[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7BHTN37HT0S342JBKS457RH":3,"skill-same:01M7BHTN37HT0S342JBKS457RH":70},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":43,"commitSha":44,"skillDirectory":45,"forksCount":13,"repositoryHtmlUrl":46,"repositoryHomepageUrl":6,"ownerHtmlUrl":47,"ownerBlogUrl":48,"ownerDescription":6,"updatedAt":49,"install":50,"resources":63},"01M7BHTN37HT0S342JBKS457RH","architecture-diagram",null,"Dark-themed SVG architecture\u002Fcloud\u002Finfra diagrams as HTML.","darkmatter\u002Fhermes","darkmatter","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F17834193?v=4","01M7BHSAW99WRAMTSSHNHX73V0","01M7BHSAXDR4PY4NA2DY5PN6W8",0,"MIT","https:\u002F\u002Fgithub.com\u002Fdarkmatter\u002Fhermes\u002Fblob\u002Fmain\u002Fdevbox\u002Fprofiles\u002Fplanner\u002Fskills\u002Fcreative\u002Farchitecture-diagram\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: architecture-diagram\ndescription: \"Dark-themed SVG architecture\u002Fcloud\u002Finfra diagrams as HTML.\"\nversion: 1.0.0\nauthor: Cocoon AI (hello@cocoon-ai.com), ported by Hermes Agent\nlicense: MIT\ndependencies: []\nplatforms: [linux, macos, windows]\nmetadata:\n  hermes:\n    tags: [architecture, diagrams, SVG, HTML, visualization, infrastructure, cloud]\n    related_skills: [concept-diagrams, excalidraw]\n---\n\n# Architecture Diagram Skill\n\nGenerate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser.\n\n## Scope\n\n**Best suited for:**\n- Software system architecture (frontend \u002F backend \u002F database layers)\n- Cloud infrastructure (VPC, regions, subnets, managed services)\n- Microservice \u002F service-mesh topology\n- Database + API map, deployment diagrams\n- Anything with a tech-infra subject that fits a dark, grid-backed aesthetic\n\n**Look elsewhere first for:**\n- Physics, chemistry, math, biology, or other scientific subjects\n- Physical objects (vehicles, hardware, anatomy, cross-sections)\n- Floor plans, narrative journeys, educational \u002F textbook-style visuals\n- Hand-drawn whiteboard sketches (consider `excalidraw`)\n- Animated explainers (consider an animation skill)\n\nIf a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below.\n\nBased on [Cocoon AI's architecture-diagram-generator](https:\u002F\u002Fgithub.com\u002FCocoon-AI\u002Farchitecture-diagram-generator) (MIT).\n\n## Workflow\n\n1. User describes their system architecture (components, connections, technologies)\n2. Generate the HTML file following the design system below\n3. Save with `write_file` to a `.html` file (e.g. `~\u002Farchitecture-diagram.html`)\n4. User opens in any browser — works offline, no dependencies\n\n### Output Location\n\nSave diagrams to a user-specified path, or default to the current working directory:\n```\n.\u002F[project-name]-architecture.html\n```\n\n### Preview\n\nAfter saving, suggest the user open it:\n```bash\n# macOS\nopen .\u002Fmy-architecture.html\n# Linux\nxdg-open .\u002Fmy-architecture.html\n```\n\n## Design System & Visual Language\n\n### Color Palette (Semantic Mapping)\n\nUse specific `rgba` fills and hex strokes to categorize components:\n\n| Component Type | Fill (rgba) | Stroke (Hex) |\n| :--- | :--- | :--- |\n| **Frontend** | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) |\n| **Backend** | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) |\n| **Database** | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) |\n| **AWS\u002FCloud** | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) |\n| **Security** | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) |\n| **Message Bus** | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) |\n| **External** | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) |\n\n### Typography & Background\n- **Font:** JetBrains Mono (Monospace), loaded from Google Fonts\n- **Sizes:** 12px (Names), 9px (Sublabels), 8px (Annotations), 7px (Tiny labels)\n- **Background:** Slate-950 (`#020617`) with a subtle 40px grid pattern\n\n```svg\n\u003C!-- Background Grid Pattern -->\n\u003Cpattern id=\"grid\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n  \u003Cpath d=\"M 40 0 L 0 0 0 40\" fill=\"none\" stroke=\"#1e293b\" stroke-width=\"0.5\"\u002F>\n\u003C\u002Fpattern>\n```\n\n## Technical Implementation Details\n\n### Component Rendering\nComponents are rounded rectangles (`rx=\"6\"`) with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a **double-rect masking technique**:\n1. Draw an opaque background rect (`#0f172a`)\n2. Draw the semi-transparent styled rect on top\n\n### Connection Rules\n- **Z-Order:** Draw arrows *early* in the SVG (after the grid) so they render behind component boxes\n- **Arrowheads:** Defined via SVG markers\n- **Security Flows:** Use dashed lines in rose color (`#fb7185`)\n- **Boundaries:**\n  - *Security Groups:* Dashed (`4,4`), rose color\n  - *Regions:* Large dashed (`8,4`), amber color, `rx=\"12\"`\n\n### Spacing & Layout Logic\n- **Standard Height:** 60px (Services); 80-120px (Large components)\n- **Vertical Gap:** Minimum 40px between components\n- **Message Buses:** Must be placed *in the gap* between services, not overlapping them\n- **Legend Placement:** **CRITICAL.** Must be placed outside all boundary boxes. Calculate the lowest Y-coordinate of all boundaries and place the legend at least 20px below it.\n\n## Document Structure\n\nThe generated HTML file follows a four-part layout:\n1. **Header:** Title with a pulsing dot indicator and subtitle\n2. **Main SVG:** The diagram contained within a rounded border card\n3. **Summary Cards:** A grid of three cards below the diagram for high-level details\n4. **Footer:** Minimal metadata\n\n### Info Card Pattern\n```html\n\u003Cdiv class=\"card\">\n  \u003Cdiv class=\"card-header\">\n    \u003Cdiv class=\"card-dot cyan\">\u003C\u002Fdiv>\n    \u003Ch3>Title\u003C\u002Fh3>\n  \u003C\u002Fdiv>\n  \u003Cul>\n    \u003Cli>• Item one\u003C\u002Fli>\n    \u003Cli>• Item two\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fdiv>\n```\n\n## Output Requirements\n- **Single File:** One self-contained `.html` file\n- **No External Dependencies:** All CSS and SVG must be inline (except Google Fonts)\n- **No JavaScript:** Use pure CSS for any animations (like pulsing dots)\n- **Compatibility:** Must render correctly in any modern web browser\n\n## Template Reference\n\nLoad the full HTML template for the exact structure, CSS, and SVG component examples:\n\n```\nskill_view(name=\"architecture-diagram\", file_path=\"templates\u002Ftemplate.html\")\n```\n\nThe template contains working examples of every component type (frontend, backend, database, cloud, security), arrow styles (standard, dashed, curved), security groups, region boundaries, and the legend — use it as your structural reference when generating diagrams.\n","# Architecture Diagram Skill\n\nGenerate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser.\n\n## Scope\n\n**Best suited for:**\n- Software system architecture (frontend \u002F backend \u002F database layers)\n- Cloud infrastructure (VPC, regions, subnets, managed services)\n- Microservice \u002F service-mesh topology\n- Database + API map, deployment diagrams\n- Anything with a tech-infra subject that fits a dark, grid-backed aesthetic\n\n**Look elsewhere first for:**\n- Physics, chemistry, math, biology, or other scientific subjects\n- Physical objects (vehicles, hardware, anatomy, cross-sections)\n- Floor plans, narrative journeys, educational \u002F textbook-style visuals\n- Hand-drawn whiteboard sketches (consider `excalidraw`)\n- Animated explainers (consider an animation skill)\n\nIf a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below.\n\nBased on [Cocoon AI's architecture-diagram-generator](https:\u002F\u002Fgithub.com\u002FCocoon-AI\u002Farchitecture-diagram-generator) (MIT).\n\n## Workflow\n\n1. User describes their system architecture (components, connections, technologies)\n2. Generate the HTML file following the design system below\n3. Save with `write_file` to a `.html` file (e.g. `~\u002Farchitecture-diagram.html`)\n4. User opens in any browser — works offline, no dependencies\n\n### Output Location\n\nSave diagrams to a user-specified path, or default to the current working directory:\n```\n.\u002F[project-name]-architecture.html\n```\n\n### Preview\n\nAfter saving, suggest the user open it:\n```bash\n# macOS\nopen .\u002Fmy-architecture.html\n# Linux\nxdg-open .\u002Fmy-architecture.html\n```\n\n## Design System & Visual Language\n\n### Color Palette (Semantic Mapping)\n\nUse specific `rgba` fills and hex strokes to categorize components:\n\n| Component Type | Fill (rgba) | Stroke (Hex) |\n| :--- | :--- | :--- |\n| **Frontend** | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) |\n| **Backend** | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) |\n| **Database** | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) |\n| **AWS\u002FCloud** | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) |\n| **Security** | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) |\n| **Message Bus** | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) |\n| **External** | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) |\n\n### Typography & Background\n- **Font:** JetBrains Mono (Monospace), loaded from Google Fonts\n- **Sizes:** 12px (Names), 9px (Sublabels), 8px (Annotations), 7px (Tiny labels)\n- **Background:** Slate-950 (`#020617`) with a subtle 40px grid pattern\n\n```svg\n\u003C!-- Background Grid Pattern -->\n\u003Cpattern id=\"grid\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n  \u003Cpath d=\"M 40 0 L 0 0 0 40\" fill=\"none\" stroke=\"#1e293b\" stroke-width=\"0.5\"\u002F>\n\u003C\u002Fpattern>\n```\n\n## Technical Implementation Details\n\n### Component Rendering\nComponents are rounded rectangles (`rx=\"6\"`) with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a **double-rect masking technique**:\n1. Draw an opaque background rect (`#0f172a`)\n2. Draw the semi-transparent styled rect on top\n\n### Connection Rules\n- **Z-Order:** Draw arrows *early* in the SVG (after the grid) so they render behind component boxes\n- **Arrowheads:** Defined via SVG markers\n- **Security Flows:** Use dashed lines in rose color (`#fb7185`)\n- **Boundaries:**\n  - *Security Groups:* Dashed (`4,4`), rose color\n  - *Regions:* Large dashed (`8,4`), amber color, `rx=\"12\"`\n\n### Spacing & Layout Logic\n- **Standard Height:** 60px (Services); 80-120px (Large components)\n- **Vertical Gap:** Minimum 40px between components\n- **Message Buses:** Must be placed *in the gap* between services, not overlapping them\n- **Legend Placement:** **CRITICAL.** Must be placed outside all boundary boxes. Calculate the lowest Y-coordinate of all boundaries and place the legend at least 20px below it.\n\n## Document Structure\n\nThe generated HTML file follows a four-part layout:\n1. **Header:** Title with a pulsing dot indicator and subtitle\n2. **Main SVG:** The diagram contained within a rounded border card\n3. **Summary Cards:** A grid of three cards below the diagram for high-level details\n4. **Footer:** Minimal metadata\n\n### Info Card Pattern\n```html\n\u003Cdiv class=\"card\">\n  \u003Cdiv class=\"card-header\">\n    \u003Cdiv class=\"card-dot cyan\">\u003C\u002Fdiv>\n    \u003Ch3>Title\u003C\u002Fh3>\n  \u003C\u002Fdiv>\n  \u003Cul>\n    \u003Cli>• Item one\u003C\u002Fli>\n    \u003Cli>• Item two\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fdiv>\n```\n\n## Output Requirements\n- **Single File:** One self-contained `.html` file\n- **No External Dependencies:** All CSS and SVG must be inline (except Google Fonts)\n- **No JavaScript:** Use pure CSS for any animations (like pulsing dots)\n- **Compatibility:** Must render correctly in any modern web browser\n\n## Template Reference\n\nLoad the full HTML template for the exact structure, CSS, and SVG component examples:\n\n```\nskill_view(name=\"architecture-diagram\", file_path=\"templates\u002Ftemplate.html\")\n```\n\nThe template contains working examples of every component type (frontend, backend, database, cloud, security), arrow styles (standard, dashed, curved), security groups, region boundaries, and the legend — use it as your structural reference when generating diagrams.\n",{"name":5,"author":23,"license":14,"version":24,"metadata":25,"platforms":38,"description":7,"dependencies":42},"Cocoon AI (hello@cocoon-ai.com), ported by Hermes Agent","1.0.0",{"hermes":26},{"tags":27,"related_skills":35},[28,29,30,31,32,33,34],"architecture","diagrams","SVG","HTML","visualization","infrastructure","cloud",[36,37],"concept-diagrams","excalidraw",[39,40,41],"linux","macos","windows",[],"main","81189f70e1089f9b3a944ffc480e6887efd831b9","devbox\u002Fprofiles\u002Fplanner\u002Fskills\u002Fcreative\u002Farchitecture-diagram","https:\u002F\u002Fgithub.com\u002Fdarkmatter\u002Fhermes","https:\u002F\u002Fgithub.com\u002Fdarkmatter","dm.sh","2026-09-14 08:11:52",{"source":8,"skillName":5,"commands":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add darkmatter\u002Fhermes --skill architecture-diagram",{"tool":56,"command":57},"bunx","bunx skills add darkmatter\u002Fhermes --skill architecture-diagram",{"tool":59,"command":60},"pnpm","pnpm dlx skills add darkmatter\u002Fhermes --skill architecture-diagram","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdarkmatter\u002Fhermes\u002Fblob\u002Fmain\u002Fdevbox\u002Fprofiles\u002Fplanner\u002Fskills\u002Fcreative\u002Farchitecture-diagram\u002FSKILL.md",true,[64],{"path":65,"resourceType":66,"resourceTypeDesc":67,"sizeBytes":68,"sourceHtmlUrl":69},"templates\u002Ftemplate.html","REFERENCE","参考文档",12319,"https:\u002F\u002Fgithub.com\u002Fdarkmatter\u002Fhermes\u002Fblob\u002Fmain\u002Fdevbox\u002Fprofiles\u002Fplanner\u002Fskills\u002Fcreative\u002Farchitecture-diagram\u002Ftemplates\u002Ftemplate.html",[71,78,85,92,99,106],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":77,"publishedAt":18},"01M7BMC2PYBVXM6FQEZMBQZB4G","plan","Write a markdown plan to .hermes\u002Fplans\u002F; no execution.","https:\u002F\u002Fgithub.com\u002Fdarkmatter\u002Fhermes\u002Fblob\u002Fmain\u002Fskills\u002Fsoftware-development\u002Fplan\u002FSKILL.md",[],[],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":84,"publishedAt":18},"01M7BMBSEKDVQ09Z666RCWT7BR","monorepo-fleet-sync","Sync docs and configs when a Flue monorepo fleet changes.","https:\u002F\u002Fgithub.com\u002Fdarkmatter\u002Fhermes\u002Fblob\u002Fmain\u002Fskills\u002Fsoftware-development\u002Fmonorepo-fleet-sync\u002FSKILL.md",[],[],{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":18},"01M7BMBNWFJT2TJZ2AKA64GEV9","inspecting-hermes-desktop-dom","Read the live Hermes desktop DOM\u002FCSS over CDP.","https:\u002F\u002Fgithub.com\u002Fdarkmatter\u002Fhermes\u002Fblob\u002Fmain\u002Fskills\u002Fsoftware-development\u002Finspecting-hermes-desktop-dom\u002FSKILL.md",[],[],{"skillNo":93,"name":94,"nameZh":6,"description":95,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":98,"publishedAt":18},"01M7BMAZM4VJ97K7JD0FDN58M8","grounded-citations","Ground answers and documents in cited, verifiable sources.","https:\u002F\u002Fgithub.com\u002Fdarkmatter\u002Fhermes\u002Fblob\u002Fmain\u002Fskills\u002Fresearch\u002Fgrounded-citations\u002FSKILL.md",[],[],{"skillNo":100,"name":101,"nameZh":6,"description":102,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":105,"publishedAt":18},"01M7BMATPEDZ4BPP67Y4ZS0BMM","competitor-news-monitor","Watch named companies for material news; cited digests.","https:\u002F\u002Fgithub.com\u002Fdarkmatter\u002Fhermes\u002Fblob\u002Fmain\u002Fskills\u002Fresearch\u002Fcompetitor-news-monitor\u002FSKILL.md",[],[],{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":112,"publishedAt":18},"01M7BMAQZV7YFA2SFPT7HCVCTX","blocked-page-recovery","Recover blocked\u002Fpaywalled\u002FWAF'd pages via fallbacks.","https:\u002F\u002Fgithub.com\u002Fdarkmatter\u002Fhermes\u002Fblob\u002Fmain\u002Fskills\u002Fresearch\u002Fblocked-page-recovery\u002FSKILL.md",[],[]]