[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71PFSG930K0FXT15CD6XAN0":3,"skill-same:01M71PFSG930K0FXT15CD6XAN0":104},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":25,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":66,"commitSha":67,"skillDirectory":68,"forksCount":13,"repositoryHtmlUrl":69,"repositoryHomepageUrl":6,"ownerHtmlUrl":70,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":71,"install":72,"resources":85},"01M71PFSG930K0FXT15CD6XAN0","concept-diagrams",null,"Generate flat, minimal light\u002Fdark-aware SVG diagrams as standalone HTML files, using a unified educational visual language with 9 semantic color ramps, sentence-case typography, and automatic dark mode. Best suited for educational and non-software visuals — physics setups, chemistry mechanisms, math curves, physical objects (aircraft, turbines, smartphones, mechanical watches), anatomy, floor plans, cross-sections, narrative journeys (lifecycle of X, process of Y), hub-spoke system integrations (smart city, IoT), and exploded layer views. If a more specialized skill exists for the subject (dedicated software\u002Fcloud architecture, hand-drawn sketches, animated explainers, etc.), prefer that — otherwise this skill can also serve as a general-purpose SVG diagram fallback with a clean educational look. Ships with 15 example diagrams.","gjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN","gjbvsjjvgm-sketch","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F278511911?v=4","01M71F3JXKZQ70H2KCHHTXKZDA","01M71PENEVFN19DBZFNHJPCHQ7",0,"MIT","https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fhermes-agent\u002Foptional-skills\u002Fcreative\u002Fconcept-diagrams\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"diagrams","concept diagrams","concept","dark","as","fallback","automatic","cloud architecture","software","excalidraw","generate","narrative","visual language","specialized","architecture","files","objects","clean","mode","generative","2026-11-10 13:02:02",false,"---\nname: concept-diagrams\ndescription: Generate flat, minimal light\u002Fdark-aware SVG diagrams as standalone HTML files, using a unified educational visual language with 9 semantic color ramps, sentence-case typography, and automatic dark mode. Best suited for educational and non-software visuals — physics setups, chemistry mechanisms, math curves, physical objects (aircraft, turbines, smartphones, mechanical watches), anatomy, floor plans, cross-sections, narrative journeys (lifecycle of X, process of Y), hub-spoke system integrations (smart city, IoT), and exploded layer views. If a more specialized skill exists for the subject (dedicated software\u002Fcloud architecture, hand-drawn sketches, animated explainers, etc.), prefer that — otherwise this skill can also serve as a general-purpose SVG diagram fallback with a clean educational look. Ships with 15 example diagrams.\nversion: 0.1.0\nauthor: v1k22 (original PR), ported into yousef-sovereign-core\nlicense: MIT\ndependencies: []\nmetadata:\n  hermes:\n    tags: [diagrams, svg, visualization, education, physics, chemistry, engineering]\n    related_skills: [architecture-diagram, excalidraw, generative-widgets]\n---\n\n# Concept Diagrams\n\nGenerate production-quality SVG diagrams with a unified flat, minimal design system. Output is a single self-contained HTML file that renders identically in any modern browser, with automatic light\u002Fdark mode.\n\n## Scope\n\n**Best suited for:**\n- Physics setups, chemistry mechanisms, math curves, biology\n- Physical objects (aircraft, turbines, smartphones, mechanical watches, cells)\n- Anatomy, cross-sections, exploded layer views\n- Floor plans, architectural conversions\n- Narrative journeys (lifecycle of X, process of Y)\n- Hub-spoke system integrations (smart city, IoT networks, electricity grids)\n- Educational \u002F textbook-style visuals in any domain\n- Quantitative charts (grouped bars, energy profiles)\n\n**Look elsewhere first for:**\n- Dedicated software \u002F cloud infrastructure architecture with a dark tech aesthetic (consider `architecture-diagram` if available)\n- Hand-drawn whiteboard sketches (consider `excalidraw` if available)\n- Animated explainers or video output (consider an animation skill)\n\nIf a more specialized skill is available for the subject, prefer that. If none fits, this skill can serve as a general-purpose SVG diagram fallback — the output will carry the clean educational aesthetic described below, which is a reasonable default for almost any subject.\n\n## Workflow\n\n1. Decide on the diagram type (see Diagram Types below).\n2. Lay out components using the Design System rules.\n3. Write the full HTML page using `templates\u002Ftemplate.html` as the wrapper — paste your SVG where the template says `\u003C!-- PASTE SVG HERE -->`.\n4. Save as a standalone `.html` file (for example `~\u002Fmy-diagram.html` or `.\u002Fmy-diagram.html`).\n5. User opens it directly in a browser — no server, no dependencies.\n\nOptional: if the user wants a browsable gallery of multiple diagrams, see \"Local Preview Server\" at the bottom.\n\nLoad the HTML template:\n```\nskill_view(name=\"concept-diagrams\", file_path=\"templates\u002Ftemplate.html\")\n```\n\nThe template embeds the full CSS design system (`c-*` color classes, text classes, light\u002Fdark variables, arrow marker styles). The SVG you generate relies on these classes being present on the hosting page.\n\n---\n\n## Design System\n\n### Philosophy\n\n- **Flat**: no gradients, drop shadows, blur, glow, or neon effects.\n- **Minimal**: show the essential. No decorative icons inside boxes.\n- **Consistent**: same colors, spacing, typography, and stroke widths across every diagram.\n- **Dark-mode ready**: all colors auto-adapt via CSS classes — no per-mode SVG.\n\n### Color Palette\n\n9 color ramps, each with 7 stops. Put the class name on a `\u003Cg>` or shape element; the template CSS handles both modes.\n\n| Class      | 50 (lightest) | 100     | 200     | 400     | 600     | 800     | 900 (darkest) |\n|------------|---------------|---------|---------|---------|---------|---------|---------------|\n| `c-purple` | #EEEDFE | #CECBF6 | #AFA9EC | #7F77DD | #534AB7 | #3C3489 | #26215C |\n| `c-teal`   | #E1F5EE | #9FE1CB | #5DCAA5 | #1D9E75 | #0F6E56 | #085041 | #04342C |\n| `c-coral`  | #FAECE7 | #F5C4B3 | #F0997B | #D85A30 | #993C1D | #712B13 | #4A1B0C |\n| `c-pink`   | #FBEAF0 | #F4C0D1 | #ED93B1 | #D4537E | #993556 | #72243E | #4B1528 |\n| `c-gray`   | #F1EFE8 | #D3D1C7 | #B4B2A9 | #888780 | #5F5E5A | #444441 | #2C2C2A |\n| `c-blue`   | #E6F1FB | #B5D4F4 | #85B7EB | #378ADD | #185FA5 | #0C447C | #042C53 |\n| `c-green`  | #EAF3DE | #C0DD97 | #97C459 | #639922 | #3B6D11 | #27500A | #173404 |\n| `c-amber`  | #FAEEDA | #FAC775 | #EF9F27 | #BA7517 | #854F0B | #633806 | #412402 |\n| `c-red`    | #FCEBEB | #F7C1C1 | #F09595 | #E24B4A | #A32D2D | #791F1F | #501313 |\n\n#### Color Assignment Rules\n\nColor encodes **meaning**, not sequence. Never cycle through colors like a rainbow.\n\n- Group nodes by **category** — all nodes of the same type share one color.\n- Use `c-gray` for neutral\u002Fstructural nodes (start, end, generic steps, users).\n- Use **2-3 colors per diagram**, not 6+.\n- Prefer `c-purple`, `c-teal`, `c-coral`, `c-pink` for general categories.\n- Reserve `c-blue`, `c-green`, `c-amber`, `c-red` for semantic meaning (info, success, warning, error).\n\nLight\u002Fdark stop mapping (handled by the template CSS — just use the class):\n- Light mode: 50 fill + 600 stroke + 800 title \u002F 600 subtitle\n- Dark mode:  800 fill + 200 stroke + 100 title \u002F 200 subtitle\n\n### Typography\n\nOnly two font sizes. No exceptions.\n\n| Class | Size | Weight | Use |\n|-------|------|--------|-----|\n| `th`  | 14px | 500    | Node titles, region labels |\n| `ts`  | 12px | 400    | Subtitles, descriptions, arrow labels |\n| `t`   | 14px | 400    | General text |\n\n- **Sentence case always.** Never Title Case, never ALL CAPS.\n- Every `\u003Ctext>` MUST carry a class (`t`, `ts`, or `th`). No unclassed text.\n- `dominant-baseline=\"central\"` on all text inside boxes.\n- `text-anchor=\"middle\"` for centered text in boxes.\n\n**Width estimation (approx):**\n- 14px weight 500: ~8px per character\n- 12px weight 400: ~6.5px per character\n- Always verify: `box_width >= (char_count × px_per_char) + 48` (24px padding each side)\n\n### Spacing & Layout\n\n- **ViewBox**: `viewBox=\"0 0 680 H\"` where H = content height + 40px buffer.\n- **Safe area**: x=40 to x=640, y=40 to y=(H-40).\n- **Between boxes**: 60px minimum gap.\n- **Inside boxes**: 24px horizontal padding, 12px vertical padding.\n- **Arrowhead gap**: 10px between arrowhead and box edge.\n- **Single-line box**: 44px height.\n- **Two-line box**: 56px height, 18px between title and subtitle baselines.\n- **Container padding**: 20px minimum inside every container.\n- **Max nesting**: 2-3 levels deep. Deeper gets unreadable at 680px width.\n\n### Stroke & Shape\n\n- **Stroke width**: 0.5px on all node borders. Not 1px, not 2px.\n- **Rect rounding**: `rx=\"8\"` for nodes, `rx=\"12\"` for inner containers, `rx=\"16\"` to `rx=\"20\"` for outer containers.\n- **Connector paths**: MUST have `fill=\"none\"`. SVG defaults to `fill: black` otherwise.\n\n### Arrow Marker\n\nInclude this `\u003Cdefs>` block at the start of **every** SVG:\n\n```xml\n\u003Cdefs>\n  \u003Cmarker id=\"arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\"\n          markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\">\n    \u003Cpath d=\"M2 1L8 5L2 9\" fill=\"none\" stroke=\"context-stroke\"\n          stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u002F>\n  \u003C\u002Fmarker>\n\u003C\u002Fdefs>\n```\n\nUse `marker-end=\"url(#arrow)\"` on lines. The arrowhead inherits the line color via `context-stroke`.\n\n### CSS Classes (Provided by the Template)\n\nThe template page provides:\n\n- Text: `.t`, `.ts`, `.th`\n- Neutral: `.box`, `.arr`, `.leader`, `.node`\n- Color ramps: `.c-purple`, `.c-teal`, `.c-coral`, `.c-pink`, `.c-gray`, `.c-blue`, `.c-green`, `.c-amber`, `.c-red` (all with automatic light\u002Fdark mode)\n\nYou do **not** need to redefine these — just apply them in your SVG. The template file contains the full CSS definitions.\n\n---\n\n## SVG Boilerplate\n\nEvery SVG inside the template page starts with this exact structure:\n\n```xml\n\u003Csvg width=\"100%\" viewBox=\"0 0 680 {HEIGHT}\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Cdefs>\n    \u003Cmarker id=\"arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\"\n            markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\">\n      \u003Cpath d=\"M2 1L8 5L2 9\" fill=\"none\" stroke=\"context-stroke\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u002F>\n    \u003C\u002Fmarker>\n  \u003C\u002Fdefs>\n\n  \u003C!-- Diagram content here -->\n\n\u003C\u002Fsvg>\n```\n\nReplace `{HEIGHT}` with the actual computed height (last element bottom + 40px).\n\n### Node Patterns\n\n**Single-line node (44px):**\n```xml\n\u003Cg class=\"node c-blue\">\n  \u003Crect x=\"100\" y=\"20\" width=\"180\" height=\"44\" rx=\"8\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext class=\"th\" x=\"190\" y=\"42\" text-anchor=\"middle\" dominant-baseline=\"central\">Service name\u003C\u002Ftext>\n\u003C\u002Fg>\n```\n\n**Two-line node (56px):**\n```xml\n\u003Cg class=\"node c-teal\">\n  \u003Crect x=\"100\" y=\"20\" width=\"200\" height=\"56\" rx=\"8\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext class=\"th\" x=\"200\" y=\"38\" text-anchor=\"middle\" dominant-baseline=\"central\">Service name\u003C\u002Ftext>\n  \u003Ctext class=\"ts\" x=\"200\" y=\"56\" text-anchor=\"middle\" dominant-baseline=\"central\">Short description\u003C\u002Ftext>\n\u003C\u002Fg>\n```\n\n**Connector (no label):**\n```xml\n\u003Cline x1=\"200\" y1=\"76\" x2=\"200\" y2=\"120\" class=\"arr\" marker-end=\"url(#arrow)\"\u002F>\n```\n\n**Container (dashed or solid):**\n```xml\n\u003Cg class=\"c-purple\">\n  \u003Crect x=\"40\" y=\"92\" width=\"600\" height=\"300\" rx=\"16\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext class=\"th\" x=\"66\" y=\"116\">Container label\u003C\u002Ftext>\n  \u003Ctext class=\"ts\" x=\"66\" y=\"134\">Subtitle info\u003C\u002Ftext>\n\u003C\u002Fg>\n```\n\n---\n\n## Diagram Types\n\nChoose the layout that fits the subject:\n\n1. **Flowchart** — CI\u002FCD pipelines, request lifecycles, approval workflows, data processing. Single-direction flow (top-down or left-right). Max 4-5 nodes per row.\n2. **Structural \u002F Containment** — Cloud infrastructure nesting, system architecture with layers. Large outer containers with inner regions. Dashed rects for logical groupings.\n3. **API \u002F Endpoint Map** — REST routes, GraphQL schemas. Tree from root, branching to resource groups, each containing endpoint nodes.\n4. **Microservice Topology** — Service mesh, event-driven systems. Services as nodes, arrows for communication patterns, message queues between.\n5. **Data Flow** — ETL pipelines, streaming architectures. Left-to-right flow from sources through processing to sinks.\n6. **Physical \u002F Structural** — Vehicles, buildings, hardware, anatomy. Use shapes that match the physical form — `\u003Cpath>` for curved bodies, `\u003Cpolygon>` for tapered shapes, `\u003Cellipse>`\u002F`\u003Ccircle>` for cylindrical parts, nested `\u003Crect>` for compartments. See `references\u002Fphysical-shape-cookbook.md`.\n7. **Infrastructure \u002F Systems Integration** — Smart cities, IoT networks, multi-domain systems. Hub-spoke layout with central platform connecting subsystems. Semantic line styles (`.data-line`, `.power-line`, `.water-pipe`, `.road`). See `references\u002Finfrastructure-patterns.md`.\n8. **UI \u002F Dashboard Mockups** — Admin panels, monitoring dashboards. Screen frame with nested chart\u002Fgauge\u002Findicator elements. See `references\u002Fdashboard-patterns.md`.\n\nFor physical, infrastructure, and dashboard diagrams, load the matching reference file before generating — each one provides ready-made CSS classes and shape primitives.\n\n---\n\n## Validation Checklist\n\nBefore finalizing any SVG, verify ALL of the following:\n\n1. Every `\u003Ctext>` has class `t`, `ts`, or `th`.\n2. Every `\u003Ctext>` inside a box has `dominant-baseline=\"central\"`.\n3. Every connector `\u003Cpath>` or `\u003Cline>` used as arrow has `fill=\"none\"`.\n4. No arrow line crosses through an unrelated box.\n5. `box_width >= (longest_label_chars × 8) + 48` for 14px text.\n6. `box_width >= (longest_label_chars × 6.5) + 48` for 12px text.\n7. ViewBox height = bottom-most element + 40px.\n8. All content stays within x=40 to x=640.\n9. Color classes (`c-*`) are on `\u003Cg>` or shape elements, never on `\u003Cpath>` connectors.\n10. Arrow `\u003Cdefs>` block is present.\n11. No gradients, shadows, blur, or glow effects.\n12. Stroke width is 0.5px on all node borders.\n\n---\n\n## Output & Preview\n\n### Default: standalone HTML file\n\nWrite a single `.html` file the user can open directly. No server, no dependencies, works offline. Pattern:\n\n```python\n# 1. Load the template\ntemplate = skill_view(\"concept-diagrams\", \"templates\u002Ftemplate.html\")\n\n# 2. Fill in title, subtitle, and paste your SVG\nhtml = template.replace(\n    \"\u003C!-- DIAGRAM TITLE HERE -->\", \"SN2 reaction mechanism\"\n).replace(\n    \"\u003C!-- OPTIONAL SUBTITLE HERE -->\", \"Bimolecular nucleophilic substitution\"\n).replace(\n    \"\u003C!-- PASTE SVG HERE -->\", svg_content\n)\n\n# 3. Write to a user-chosen path (or .\u002F by default)\nwrite_file(\".\u002Fsn2-mechanism.html\", html)\n```\n\nTell the user how to open it:\n\n```\n# macOS\nopen .\u002Fsn2-mechanism.html\n# Linux\nxdg-open .\u002Fsn2-mechanism.html\n```\n\n### Optional: local preview server (multi-diagram gallery)\n\nOnly use this when the user explicitly wants a browsable gallery of multiple diagrams.\n\n**Rules:**\n- Bind to `127.0.0.1` only. Never `0.0.0.0`. Exposing diagrams on all network interfaces is a security hazard on shared networks.\n- Pick a free port (do NOT hard-code one) and tell the user the chosen URL.\n- The server is optional and opt-in — prefer the standalone HTML file first.\n\nRecommended pattern (lets the OS pick a free ephemeral port):\n\n```bash\n# Put each diagram in its own folder under .diagrams\u002F\nmkdir -p .diagrams\u002Fsn2-mechanism\n# ...write .diagrams\u002Fsn2-mechanism\u002Findex.html...\n\n# Serve on loopback only, free port\ncd .diagrams && python3 -c \"\nimport http.server, socketserver\nwith socketserver.TCPServer(('127.0.0.1', 0), http.server.SimpleHTTPRequestHandler) as s:\n    print(f'Serving at http:\u002F\u002F127.0.0.1:{s.server_address[1]}\u002F')\n    s.serve_forever()\n\" &\n```\n\nIf the user insists on a fixed port, use `127.0.0.1:\u003Cport>` — still never `0.0.0.0`. Document how to stop the server (`kill %1` or `pkill -f \"http.server\"`).\n\n---\n\n## Examples Reference\n\nThe `examples\u002F` directory ships 15 complete, tested diagrams. Browse them for working patterns before writing a new diagram of a similar type:\n\n| File | Type | Demonstrates |\n|------|------|--------------|\n| `hospital-emergency-department-flow.md` | Flowchart | Priority routing with semantic colors |\n| `feature-film-production-pipeline.md` | Flowchart | Phased workflow, horizontal sub-flows |\n| `automated-password-reset-flow.md` | Flowchart | Auth flow with error branches |\n| `autonomous-llm-research-agent-flow.md` | Flowchart | Loop-back arrows, decision branches |\n| `place-order-uml-sequence.md` | Sequence | UML sequence diagram style |\n| `commercial-aircraft-structure.md` | Physical | Paths, polygons, ellipses for realistic shapes |\n| `wind-turbine-structure.md` | Physical cross-section | Underground\u002Fabove-ground separation, color coding |\n| `smartphone-layer-anatomy.md` | Exploded view | Alternating left\u002Fright labels, layered components |\n| `apartment-floor-plan-conversion.md` | Floor plan | Walls, doors, proposed changes in dotted red |\n| `banana-journey-tree-to-smoothie.md` | Narrative journey | Winding path, progressive state changes |\n| `cpu-ooo-microarchitecture.md` | Hardware pipeline | Fan-out, memory hierarchy sidebar |\n| `sn2-reaction-mechanism.md` | Chemistry | Molecules, curved arrows, energy profile |\n| `smart-city-infrastructure.md` | Hub-spoke | Semantic line styles per system |\n| `electricity-grid-flow.md` | Multi-stage flow | Voltage hierarchy, flow markers |\n| `ml-benchmark-grouped-bar-chart.md` | Chart | Grouped bars, dual axis |\n\nLoad any example with:\n```\nskill_view(name=\"concept-diagrams\", file_path=\"examples\u002F\u003Cfilename>\")\n```\n\n---\n\n## Quick Reference: What to Use When\n\n| User says | Diagram type | Suggested colors |\n|-----------|--------------|------------------|\n| \"show the pipeline\" | Flowchart | gray start\u002Fend, purple steps, red errors, teal deploy |\n| \"draw the data flow\" | Data pipeline (left-right) | gray sources, purple processing, teal sinks |\n| \"visualize the system\" | Structural (containment) | purple container, teal services, coral data |\n| \"map the endpoints\" | API tree | purple root, one ramp per resource group |\n| \"show the services\" | Microservice topology | gray ingress, teal services, purple bus, coral workers |\n| \"draw the aircraft\u002Fvehicle\" | Physical | paths, polygons, ellipses for realistic shapes |\n| \"smart city \u002F IoT\" | Hub-spoke integration | semantic line styles per subsystem |\n| \"show the dashboard\" | UI mockup | dark screen, chart colors: teal, purple, coral for alerts |\n| \"power grid \u002F electricity\" | Multi-stage flow | voltage hierarchy (HV\u002FMV\u002FLV line weights) |\n| \"wind turbine \u002F turbine\" | Physical cross-section | foundation + tower cutaway + nacelle color-coded |\n| \"journey of X \u002F lifecycle\" | Narrative journey | winding path, progressive state changes |\n| \"layers of X \u002F exploded\" | Exploded layer view | vertical stack, alternating labels |\n| \"CPU \u002F pipeline\" | Hardware pipeline | vertical stages, fan-out to execution ports |\n| \"floor plan \u002F apartment\" | Floor plan | walls, doors, proposed changes in dotted red |\n| \"reaction mechanism\" | Chemistry | atoms, bonds, curved arrows, transition state, energy profile |\n","# Concept Diagrams\n\nGenerate production-quality SVG diagrams with a unified flat, minimal design system. Output is a single self-contained HTML file that renders identically in any modern browser, with automatic light\u002Fdark mode.\n\n## Scope\n\n**Best suited for:**\n- Physics setups, chemistry mechanisms, math curves, biology\n- Physical objects (aircraft, turbines, smartphones, mechanical watches, cells)\n- Anatomy, cross-sections, exploded layer views\n- Floor plans, architectural conversions\n- Narrative journeys (lifecycle of X, process of Y)\n- Hub-spoke system integrations (smart city, IoT networks, electricity grids)\n- Educational \u002F textbook-style visuals in any domain\n- Quantitative charts (grouped bars, energy profiles)\n\n**Look elsewhere first for:**\n- Dedicated software \u002F cloud infrastructure architecture with a dark tech aesthetic (consider `architecture-diagram` if available)\n- Hand-drawn whiteboard sketches (consider `excalidraw` if available)\n- Animated explainers or video output (consider an animation skill)\n\nIf a more specialized skill is available for the subject, prefer that. If none fits, this skill can serve as a general-purpose SVG diagram fallback — the output will carry the clean educational aesthetic described below, which is a reasonable default for almost any subject.\n\n## Workflow\n\n1. Decide on the diagram type (see Diagram Types below).\n2. Lay out components using the Design System rules.\n3. Write the full HTML page using `templates\u002Ftemplate.html` as the wrapper — paste your SVG where the template says `\u003C!-- PASTE SVG HERE -->`.\n4. Save as a standalone `.html` file (for example `~\u002Fmy-diagram.html` or `.\u002Fmy-diagram.html`).\n5. User opens it directly in a browser — no server, no dependencies.\n\nOptional: if the user wants a browsable gallery of multiple diagrams, see \"Local Preview Server\" at the bottom.\n\nLoad the HTML template:\n```\nskill_view(name=\"concept-diagrams\", file_path=\"templates\u002Ftemplate.html\")\n```\n\nThe template embeds the full CSS design system (`c-*` color classes, text classes, light\u002Fdark variables, arrow marker styles). The SVG you generate relies on these classes being present on the hosting page.\n\n---\n\n## Design System\n\n### Philosophy\n\n- **Flat**: no gradients, drop shadows, blur, glow, or neon effects.\n- **Minimal**: show the essential. No decorative icons inside boxes.\n- **Consistent**: same colors, spacing, typography, and stroke widths across every diagram.\n- **Dark-mode ready**: all colors auto-adapt via CSS classes — no per-mode SVG.\n\n### Color Palette\n\n9 color ramps, each with 7 stops. Put the class name on a `\u003Cg>` or shape element; the template CSS handles both modes.\n\n| Class      | 50 (lightest) | 100     | 200     | 400     | 600     | 800     | 900 (darkest) |\n|------------|---------------|---------|---------|---------|---------|---------|---------------|\n| `c-purple` | #EEEDFE | #CECBF6 | #AFA9EC | #7F77DD | #534AB7 | #3C3489 | #26215C |\n| `c-teal`   | #E1F5EE | #9FE1CB | #5DCAA5 | #1D9E75 | #0F6E56 | #085041 | #04342C |\n| `c-coral`  | #FAECE7 | #F5C4B3 | #F0997B | #D85A30 | #993C1D | #712B13 | #4A1B0C |\n| `c-pink`   | #FBEAF0 | #F4C0D1 | #ED93B1 | #D4537E | #993556 | #72243E | #4B1528 |\n| `c-gray`   | #F1EFE8 | #D3D1C7 | #B4B2A9 | #888780 | #5F5E5A | #444441 | #2C2C2A |\n| `c-blue`   | #E6F1FB | #B5D4F4 | #85B7EB | #378ADD | #185FA5 | #0C447C | #042C53 |\n| `c-green`  | #EAF3DE | #C0DD97 | #97C459 | #639922 | #3B6D11 | #27500A | #173404 |\n| `c-amber`  | #FAEEDA | #FAC775 | #EF9F27 | #BA7517 | #854F0B | #633806 | #412402 |\n| `c-red`    | #FCEBEB | #F7C1C1 | #F09595 | #E24B4A | #A32D2D | #791F1F | #501313 |\n\n#### Color Assignment Rules\n\nColor encodes **meaning**, not sequence. Never cycle through colors like a rainbow.\n\n- Group nodes by **category** — all nodes of the same type share one color.\n- Use `c-gray` for neutral\u002Fstructural nodes (start, end, generic steps, users).\n- Use **2-3 colors per diagram**, not 6+.\n- Prefer `c-purple`, `c-teal`, `c-coral`, `c-pink` for general categories.\n- Reserve `c-blue`, `c-green`, `c-amber`, `c-red` for semantic meaning (info, success, warning, error).\n\nLight\u002Fdark stop mapping (handled by the template CSS — just use the class):\n- Light mode: 50 fill + 600 stroke + 800 title \u002F 600 subtitle\n- Dark mode:  800 fill + 200 stroke + 100 title \u002F 200 subtitle\n\n### Typography\n\nOnly two font sizes. No exceptions.\n\n| Class | Size | Weight | Use |\n|-------|------|--------|-----|\n| `th`  | 14px | 500    | Node titles, region labels |\n| `ts`  | 12px | 400    | Subtitles, descriptions, arrow labels |\n| `t`   | 14px | 400    | General text |\n\n- **Sentence case always.** Never Title Case, never ALL CAPS.\n- Every `\u003Ctext>` MUST carry a class (`t`, `ts`, or `th`). No unclassed text.\n- `dominant-baseline=\"central\"` on all text inside boxes.\n- `text-anchor=\"middle\"` for centered text in boxes.\n\n**Width estimation (approx):**\n- 14px weight 500: ~8px per character\n- 12px weight 400: ~6.5px per character\n- Always verify: `box_width >= (char_count × px_per_char) + 48` (24px padding each side)\n\n### Spacing & Layout\n\n- **ViewBox**: `viewBox=\"0 0 680 H\"` where H = content height + 40px buffer.\n- **Safe area**: x=40 to x=640, y=40 to y=(H-40).\n- **Between boxes**: 60px minimum gap.\n- **Inside boxes**: 24px horizontal padding, 12px vertical padding.\n- **Arrowhead gap**: 10px between arrowhead and box edge.\n- **Single-line box**: 44px height.\n- **Two-line box**: 56px height, 18px between title and subtitle baselines.\n- **Container padding**: 20px minimum inside every container.\n- **Max nesting**: 2-3 levels deep. Deeper gets unreadable at 680px width.\n\n### Stroke & Shape\n\n- **Stroke width**: 0.5px on all node borders. Not 1px, not 2px.\n- **Rect rounding**: `rx=\"8\"` for nodes, `rx=\"12\"` for inner containers, `rx=\"16\"` to `rx=\"20\"` for outer containers.\n- **Connector paths**: MUST have `fill=\"none\"`. SVG defaults to `fill: black` otherwise.\n\n### Arrow Marker\n\nInclude this `\u003Cdefs>` block at the start of **every** SVG:\n\n```xml\n\u003Cdefs>\n  \u003Cmarker id=\"arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\"\n          markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\">\n    \u003Cpath d=\"M2 1L8 5L2 9\" fill=\"none\" stroke=\"context-stroke\"\n          stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u002F>\n  \u003C\u002Fmarker>\n\u003C\u002Fdefs>\n```\n\nUse `marker-end=\"url(#arrow)\"` on lines. The arrowhead inherits the line color via `context-stroke`.\n\n### CSS Classes (Provided by the Template)\n\nThe template page provides:\n\n- Text: `.t`, `.ts`, `.th`\n- Neutral: `.box`, `.arr`, `.leader`, `.node`\n- Color ramps: `.c-purple`, `.c-teal`, `.c-coral`, `.c-pink`, `.c-gray`, `.c-blue`, `.c-green`, `.c-amber`, `.c-red` (all with automatic light\u002Fdark mode)\n\nYou do **not** need to redefine these — just apply them in your SVG. The template file contains the full CSS definitions.\n\n---\n\n## SVG Boilerplate\n\nEvery SVG inside the template page starts with this exact structure:\n\n```xml\n\u003Csvg width=\"100%\" viewBox=\"0 0 680 {HEIGHT}\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Cdefs>\n    \u003Cmarker id=\"arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\"\n            markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\">\n      \u003Cpath d=\"M2 1L8 5L2 9\" fill=\"none\" stroke=\"context-stroke\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u002F>\n    \u003C\u002Fmarker>\n  \u003C\u002Fdefs>\n\n  \u003C!-- Diagram content here -->\n\n\u003C\u002Fsvg>\n```\n\nReplace `{HEIGHT}` with the actual computed height (last element bottom + 40px).\n\n### Node Patterns\n\n**Single-line node (44px):**\n```xml\n\u003Cg class=\"node c-blue\">\n  \u003Crect x=\"100\" y=\"20\" width=\"180\" height=\"44\" rx=\"8\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext class=\"th\" x=\"190\" y=\"42\" text-anchor=\"middle\" dominant-baseline=\"central\">Service name\u003C\u002Ftext>\n\u003C\u002Fg>\n```\n\n**Two-line node (56px):**\n```xml\n\u003Cg class=\"node c-teal\">\n  \u003Crect x=\"100\" y=\"20\" width=\"200\" height=\"56\" rx=\"8\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext class=\"th\" x=\"200\" y=\"38\" text-anchor=\"middle\" dominant-baseline=\"central\">Service name\u003C\u002Ftext>\n  \u003Ctext class=\"ts\" x=\"200\" y=\"56\" text-anchor=\"middle\" dominant-baseline=\"central\">Short description\u003C\u002Ftext>\n\u003C\u002Fg>\n```\n\n**Connector (no label):**\n```xml\n\u003Cline x1=\"200\" y1=\"76\" x2=\"200\" y2=\"120\" class=\"arr\" marker-end=\"url(#arrow)\"\u002F>\n```\n\n**Container (dashed or solid):**\n```xml\n\u003Cg class=\"c-purple\">\n  \u003Crect x=\"40\" y=\"92\" width=\"600\" height=\"300\" rx=\"16\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext class=\"th\" x=\"66\" y=\"116\">Container label\u003C\u002Ftext>\n  \u003Ctext class=\"ts\" x=\"66\" y=\"134\">Subtitle info\u003C\u002Ftext>\n\u003C\u002Fg>\n```\n\n---\n\n## Diagram Types\n\nChoose the layout that fits the subject:\n\n1. **Flowchart** — CI\u002FCD pipelines, request lifecycles, approval workflows, data processing. Single-direction flow (top-down or left-right). Max 4-5 nodes per row.\n2. **Structural \u002F Containment** — Cloud infrastructure nesting, system architecture with layers. Large outer containers with inner regions. Dashed rects for logical groupings.\n3. **API \u002F Endpoint Map** — REST routes, GraphQL schemas. Tree from root, branching to resource groups, each containing endpoint nodes.\n4. **Microservice Topology** — Service mesh, event-driven systems. Services as nodes, arrows for communication patterns, message queues between.\n5. **Data Flow** — ETL pipelines, streaming architectures. Left-to-right flow from sources through processing to sinks.\n6. **Physical \u002F Structural** — Vehicles, buildings, hardware, anatomy. Use shapes that match the physical form — `\u003Cpath>` for curved bodies, `\u003Cpolygon>` for tapered shapes, `\u003Cellipse>`\u002F`\u003Ccircle>` for cylindrical parts, nested `\u003Crect>` for compartments. See `references\u002Fphysical-shape-cookbook.md`.\n7. **Infrastructure \u002F Systems Integration** — Smart cities, IoT networks, multi-domain systems. Hub-spoke layout with central platform connecting subsystems. Semantic line styles (`.data-line`, `.power-line`, `.water-pipe`, `.road`). See `references\u002Finfrastructure-patterns.md`.\n8. **UI \u002F Dashboard Mockups** — Admin panels, monitoring dashboards. Screen frame with nested chart\u002Fgauge\u002Findicator elements. See `references\u002Fdashboard-patterns.md`.\n\nFor physical, infrastructure, and dashboard diagrams, load the matching reference file before generating — each one provides ready-made CSS classes and shape primitives.\n\n---\n\n## Validation Checklist\n\nBefore finalizing any SVG, verify ALL of the following:\n\n1. Every `\u003Ctext>` has class `t`, `ts`, or `th`.\n2. Every `\u003Ctext>` inside a box has `dominant-baseline=\"central\"`.\n3. Every connector `\u003Cpath>` or `\u003Cline>` used as arrow has `fill=\"none\"`.\n4. No arrow line crosses through an unrelated box.\n5. `box_width >= (longest_label_chars × 8) + 48` for 14px text.\n6. `box_width >= (longest_label_chars × 6.5) + 48` for 12px text.\n7. ViewBox height = bottom-most element + 40px.\n8. All content stays within x=40 to x=640.\n9. Color classes (`c-*`) are on `\u003Cg>` or shape elements, never on `\u003Cpath>` connectors.\n10. Arrow `\u003Cdefs>` block is present.\n11. No gradients, shadows, blur, or glow effects.\n12. Stroke width is 0.5px on all node borders.\n\n---\n\n## Output & Preview\n\n### Default: standalone HTML file\n\nWrite a single `.html` file the user can open directly. No server, no dependencies, works offline. Pattern:\n\n```python\n# 1. Load the template\ntemplate = skill_view(\"concept-diagrams\", \"templates\u002Ftemplate.html\")\n\n# 2. Fill in title, subtitle, and paste your SVG\nhtml = template.replace(\n    \"\u003C!-- DIAGRAM TITLE HERE -->\", \"SN2 reaction mechanism\"\n).replace(\n    \"\u003C!-- OPTIONAL SUBTITLE HERE -->\", \"Bimolecular nucleophilic substitution\"\n).replace(\n    \"\u003C!-- PASTE SVG HERE -->\", svg_content\n)\n\n# 3. Write to a user-chosen path (or .\u002F by default)\nwrite_file(\".\u002Fsn2-mechanism.html\", html)\n```\n\nTell the user how to open it:\n\n```\n# macOS\nopen .\u002Fsn2-mechanism.html\n# Linux\nxdg-open .\u002Fsn2-mechanism.html\n```\n\n### Optional: local preview server (multi-diagram gallery)\n\nOnly use this when the user explicitly wants a browsable gallery of multiple diagrams.\n\n**Rules:**\n- Bind to `127.0.0.1` only. Never `0.0.0.0`. Exposing diagrams on all network interfaces is a security hazard on shared networks.\n- Pick a free port (do NOT hard-code one) and tell the user the chosen URL.\n- The server is optional and opt-in — prefer the standalone HTML file first.\n\nRecommended pattern (lets the OS pick a free ephemeral port):\n\n```bash\n# Put each diagram in its own folder under .diagrams\u002F\nmkdir -p .diagrams\u002Fsn2-mechanism\n# ...write .diagrams\u002Fsn2-mechanism\u002Findex.html...\n\n# Serve on loopback only, free port\ncd .diagrams && python3 -c \"\nimport http.server, socketserver\nwith socketserver.TCPServer(('127.0.0.1', 0), http.server.SimpleHTTPRequestHandler) as s:\n    print(f'Serving at http:\u002F\u002F127.0.0.1:{s.server_address[1]}\u002F')\n    s.serve_forever()\n\" &\n```\n\nIf the user insists on a fixed port, use `127.0.0.1:\u003Cport>` — still never `0.0.0.0`. Document how to stop the server (`kill %1` or `pkill -f \"http.server\"`).\n\n---\n\n## Examples Reference\n\nThe `examples\u002F` directory ships 15 complete, tested diagrams. Browse them for working patterns before writing a new diagram of a similar type:\n\n| File | Type | Demonstrates |\n|------|------|--------------|\n| `hospital-emergency-department-flow.md` | Flowchart | Priority routing with semantic colors |\n| `feature-film-production-pipeline.md` | Flowchart | Phased workflow, horizontal sub-flows |\n| `automated-password-reset-flow.md` | Flowchart | Auth flow with error branches |\n| `autonomous-llm-research-agent-flow.md` | Flowchart | Loop-back arrows, decision branches |\n| `place-order-uml-sequence.md` | Sequence | UML sequence diagram style |\n| `commercial-aircraft-structure.md` | Physical | Paths, polygons, ellipses for realistic shapes |\n| `wind-turbine-structure.md` | Physical cross-section | Underground\u002Fabove-ground separation, color coding |\n| `smartphone-layer-anatomy.md` | Exploded view | Alternating left\u002Fright labels, layered components |\n| `apartment-floor-plan-conversion.md` | Floor plan | Walls, doors, proposed changes in dotted red |\n| `banana-journey-tree-to-smoothie.md` | Narrative journey | Winding path, progressive state changes |\n| `cpu-ooo-microarchitecture.md` | Hardware pipeline | Fan-out, memory hierarchy sidebar |\n| `sn2-reaction-mechanism.md` | Chemistry | Molecules, curved arrows, energy profile |\n| `smart-city-infrastructure.md` | Hub-spoke | Semantic line styles per system |\n| `electricity-grid-flow.md` | Multi-stage flow | Voltage hierarchy, flow markers |\n| `ml-benchmark-grouped-bar-chart.md` | Chart | Grouped bars, dual axis |\n\nLoad any example with:\n```\nskill_view(name=\"concept-diagrams\", file_path=\"examples\u002F\u003Cfilename>\")\n```\n\n---\n\n## Quick Reference: What to Use When\n\n| User says | Diagram type | Suggested colors |\n|-----------|--------------|------------------|\n| \"show the pipeline\" | Flowchart | gray start\u002Fend, purple steps, red errors, teal deploy |\n| \"draw the data flow\" | Data pipeline (left-right) | gray sources, purple processing, teal sinks |\n| \"visualize the system\" | Structural (containment) | purple container, teal services, coral data |\n| \"map the endpoints\" | API tree | purple root, one ramp per resource group |\n| \"show the services\" | Microservice topology | gray ingress, teal services, purple bus, coral workers |\n| \"draw the aircraft\u002Fvehicle\" | Physical | paths, polygons, ellipses for realistic shapes |\n| \"smart city \u002F IoT\" | Hub-spoke integration | semantic line styles per subsystem |\n| \"show the dashboard\" | UI mockup | dark screen, chart colors: teal, purple, coral for alerts |\n| \"power grid \u002F electricity\" | Multi-stage flow | voltage hierarchy (HV\u002FMV\u002FLV line weights) |\n| \"wind turbine \u002F turbine\" | Physical cross-section | foundation + tower cutaway + nacelle color-coded |\n| \"journey of X \u002F lifecycle\" | Narrative journey | winding path, progressive state changes |\n| \"layers of X \u002F exploded\" | Exploded layer view | vertical stack, alternating labels |\n| \"CPU \u002F pipeline\" | Hardware pipeline | vertical stages, fan-out to execution ports |\n| \"floor plan \u002F apartment\" | Floor plan | walls, doors, proposed changes in dotted red |\n| \"reaction mechanism\" | Chemistry | atoms, bonds, curved arrows, transition state, energy profile |\n",{"name":5,"author":51,"license":14,"version":52,"metadata":53,"description":7,"dependencies":65},"v1k22 (original PR), ported into yousef-sovereign-core","0.1.0",{"hermes":54},{"tags":55,"related_skills":62},[26,56,57,58,59,60,61],"svg","visualization","education","physics","chemistry","engineering",[63,35,64],"architecture-diagram","generative-widgets",[],"main","6746276ba18cb774853eb61b3b9399658bc9bc5c","core\u002Fhermes-agent\u002Foptional-skills\u002Fcreative\u002Fconcept-diagrams","https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN","https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch","2026-04-28 17:01:03",{"source":8,"skillName":5,"commands":73,"prompt":83,"zipAvailable":84},[74,77,80],{"tool":75,"command":76},"npx","npx skills add gjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN --skill concept-diagrams",{"tool":78,"command":79},"bunx","bunx skills add gjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN --skill concept-diagrams",{"tool":81,"command":82},"pnpm","pnpm dlx skills add gjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN --skill concept-diagrams","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fhermes-agent\u002Foptional-skills\u002Fcreative\u002Fconcept-diagrams\u002FSKILL.md",true,[86,92,96,100],{"path":87,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":90,"sourceHtmlUrl":91},"references\u002Fdashboard-patterns.md","REFERENCE","参考文档",1799,"https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fhermes-agent\u002Foptional-skills\u002Fcreative\u002Fconcept-diagrams\u002Freferences\u002Fdashboard-patterns.md",{"path":93,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":94,"sourceHtmlUrl":95},"references\u002Finfrastructure-patterns.md",5335,"https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fhermes-agent\u002Foptional-skills\u002Fcreative\u002Fconcept-diagrams\u002Freferences\u002Finfrastructure-patterns.md",{"path":97,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":98,"sourceHtmlUrl":99},"references\u002Fphysical-shape-cookbook.md",2083,"https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fhermes-agent\u002Foptional-skills\u002Fcreative\u002Fconcept-diagrams\u002Freferences\u002Fphysical-shape-cookbook.md",{"path":101,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":102,"sourceHtmlUrl":103},"templates\u002Ftemplate.html",6796,"https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fhermes-agent\u002Foptional-skills\u002Fcreative\u002Fconcept-diagrams\u002Ftemplates\u002Ftemplate.html",[105,146,171,188,207,226],{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":125,"publishedAt":46},"01M71QG27G1R2H2ZWEG4S0WTZT","writing-plans","Write implementation plans: bite-sized tasks, paths, code.","https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fskills\u002Fsoftware-development\u002Fwriting-plans\u002FSKILL.md",[111,114,117,122],{"categoryNo":112,"categoryName":113,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":115,"categoryName":116,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":118,"categoryName":119,"taxonomyType":120,"taxonomyTypeDesc":121},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":123,"categoryName":124,"taxonomyType":120,"taxonomyTypeDesc":121},"01JBSEEDCAT000000000000036","内容创作者",[126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145],"writing","writing plans","plans","test-driven","test-driven-development","superpowers","design","workflow","code","tasks","subagent","code-review","review","documentation","write","paths","planning","development","test","implementation",{"skillNo":147,"name":130,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":157,"publishedAt":46},"01M71QFZYRTJXMAE551MRAKZ14","TDD: enforce RED-GREEN-REFACTOR, tests before code.","https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fskills\u002Fsoftware-development\u002Ftest-driven-development\u002FSKILL.md",[151,154],{"categoryNo":152,"categoryName":153,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":155,"categoryName":156,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",[158,143,144,159,160,161,162,131,126,163,134,136,164,165,166,167,168,128,169,170],"test driven development","driven","green","red-green-refactor","testing","debugging","systematic","refactor","systematic-debugging","enforce","tests","tdd","quality",{"skillNo":172,"name":166,"nameZh":6,"description":173,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":174,"categories":175,"keywords":177,"publishedAt":46},"01M71QFWR5Q8EYEQ6MCS3SM6MC","4-phase root cause debugging: understand bugs before fixing.","https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fskills\u002Fsoftware-development\u002Fsystematic-debugging\u002FSKILL.md",[176],{"categoryNo":155,"categoryName":156,"taxonomyType":20,"taxonomyTypeDesc":21},[178,163,164,129,179,180,130,131,126,136,181,182,143,183,128,184,144,185,186,187],"systematic debugging","problem","problem-solving","phase","bugs","root cause","root-cause","investigation","understand","hermes",{"skillNo":189,"name":190,"nameZh":6,"description":191,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":192,"categories":193,"keywords":199,"publishedAt":46},"01M71QFS9S04MD8JP747W5WM0N","subagent-driven-development","Execute plans via delegate_task subagents (2-stage review).","https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fskills\u002Fsoftware-development\u002Fsubagent-driven-development\u002FSKILL.md",[194,195,198],{"categoryNo":115,"categoryName":116,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":196,"categoryName":197,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":123,"categoryName":124,"taxonomyType":120,"taxonomyTypeDesc":121},[200,136,143,159,129,130,201,202,131,126,133,134,137,138,203,204,128,205,206,144],"subagent driven development","delegate","delegation","subagents","parallel","stage","task",{"skillNo":208,"name":209,"nameZh":6,"description":210,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":211,"categories":212,"keywords":215,"publishedAt":46},"01M71QFQ1DBCVAZ511MXFE6T2V","requesting-code-review","Pre-commit review: security scan, quality gates, auto-fix.","https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fskills\u002Fsoftware-development\u002Frequesting-code-review\u002FSKILL.md",[213,214],{"categoryNo":152,"categoryName":153,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":118,"categoryName":119,"taxonomyType":120,"taxonomyTypeDesc":121},[216,217,134,138,129,130,218,219,131,220,126,221,222,136,137,223,224,143,225,128],"code review","requesting code review","fix","auto-fix","auto","security scan","commit","verification","security","scan",{"skillNo":227,"name":228,"nameZh":6,"description":229,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":230,"categories":231,"keywords":233,"publishedAt":46},"01M71QFM7KWM540YR67FRN807Q","python-debugpy","Debug Python: pdb REPL + debugpy remote (DAP).","https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fskills\u002Fsoftware-development\u002Fpython-debugpy\u002FSKILL.md",[232],{"categoryNo":118,"categoryName":119,"taxonomyType":120,"taxonomyTypeDesc":121},[234,235,236,237,238,239,240,241,163,164,242,243,244,166,245,246,247,248,187,249],"debugpy","python debugpy","python","dap","inspect","post-mortem","pdb","remote","debugger","node","commands","debug","post","breakpoints","node-inspect","tui"]