[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6BVTTFM7JJ9DQABX9QB519R":3,"skill-same:01M6BVTTFM7JJ9DQABX9QB519R":84},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":29,"publishedAt":40,"linkOnly":41,"markdownContent":42,"markdownBody":43,"frontMatter":44,"refName":55,"commitSha":56,"skillDirectory":57,"forksCount":58,"repositoryHtmlUrl":59,"repositoryHomepageUrl":6,"ownerHtmlUrl":60,"ownerBlogUrl":61,"ownerDescription":62,"updatedAt":63,"install":64,"resources":77},"01M6BVTTFM7JJ9DQABX9QB519R","architecture-diagram",null,"Generate professional dark-themed system architecture diagrams as standalone HTML\u002FSVG files. Self-contained output with no external dependencies. Based on Cocoon AI's architecture-diagram-generator (MIT).","ajoslin\u002Fdot","ajoslin","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F1265995?v=4","01M6BVTK48NGBP9V32M72JAX0V","Andrew Joslin","01M6BVTK8SSEMZK27ZF7PX0PV9",24,"MIT","https:\u002F\u002Fgithub.com\u002Fajoslin\u002Fdot\u002Fblob\u002Fmaster\u002Fconfig\u002Fopencode\u002Fskills\u002Farchitecture-diagram\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[30,31,32,33,34,35,36,37,38,39],"architecture","diagram","architecture diagram","hello","architecture diagrams","infrastructure","generate","visualization","cloud","excalidraw","2026-11-10 10:12:30",false,"---\nname: architecture-diagram\ndescription: Generate professional dark-themed system architecture diagrams as standalone HTML\u002FSVG files. Self-contained output with no external dependencies. Based on Cocoon AI's architecture-diagram-generator (MIT).\nversion: 1.0.0\nauthor: Cocoon AI (hello@cocoon-ai.com), ported by Hermes Agent\nlicense: MIT\ndependencies: []\nmetadata:\n  hermes:\n    tags: [architecture, diagrams, SVG, HTML, visualization, infrastructure, cloud]\n    related_skills: [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\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\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":45,"license":15,"version":46,"metadata":47,"description":7,"dependencies":54},"Cocoon AI (hello@cocoon-ai.com), ported by Hermes Agent","1.0.0",{"hermes":48},{"tags":49,"related_skills":53},[30,50,51,52,37,35,38],"diagrams","SVG","HTML",[39],[],"master","8aa8e87ab2fed38a42acefb4a2d9a3a557f0b1ed","config\u002Fopencode\u002Fskills\u002Farchitecture-diagram",7,"https:\u002F\u002Fgithub.com\u002Fajoslin\u002Fdot","https:\u002F\u002Fgithub.com\u002Fajoslin","http:\u002F\u002Fajoslin.com","Full-stack JS","2026-07-04 04:23:52",{"source":8,"skillName":5,"commands":65,"prompt":75,"zipAvailable":76},[66,69,72],{"tool":67,"command":68},"npx","npx skills add ajoslin\u002Fdot --skill architecture-diagram",{"tool":70,"command":71},"bunx","bunx skills add ajoslin\u002Fdot --skill architecture-diagram",{"tool":73,"command":74},"pnpm","pnpm dlx skills add ajoslin\u002Fdot --skill architecture-diagram","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fajoslin\u002Fdot\u002Fblob\u002Fmaster\u002Fconfig\u002Fopencode\u002Fskills\u002Farchitecture-diagram\u002FSKILL.md",true,[78],{"path":79,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":82,"sourceHtmlUrl":83},"templates\u002Ftemplate.html","REFERENCE","参考文档",17994,"https:\u002F\u002Fgithub.com\u002Fajoslin\u002Fdot\u002Fblob\u002Fmaster\u002Fconfig\u002Fopencode\u002Fskills\u002Farchitecture-diagram\u002Ftemplates\u002Ftemplate.html",[85,110],{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":89,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":93,"publishedAt":40},"01M6BVW4039XX633V95QMRVHT5","opencode-memory","Browse and recall OpenCode local memory stored on the user's machine: local sessions, plans, conversations, prompt history, and project context. Use immediately when the user asks to check history, previous sessions, past chats, what did we do before, last time, check plans, session history, recall, memory, remember, prior work, previous context, or have we done this before. Auto-trigger proactively when resuming work, continuing a project, referencing prior decisions, debugging repeated issues, revisiting earlier plans, or any follow-up where earlier OpenCode context may help. This means OpenCode local history\u002Ffiles specifically, not ChatGPT\u002FClaude cloud history, generic web search, or unrelated product memory systems. Do NOT use for fresh tasks with no relevant history, or when current files\u002Fgit already answer the question.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fajoslin\u002Fdot\u002Fblob\u002Fmaster\u002Fconfig\u002Fopencode\u002Fskills\u002Fopencode-memory\u002FSKILL.md",[92],{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[94,95,96,97,98,99,100,101,102,103,104,38,105,106,107,108,109],"opencode memory","memory","debugging","sessions","tasks","help","git","issues","product","chatgpt","search","browse","recall","web search","remember","web",{"skillNo":111,"name":112,"nameZh":6,"description":113,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":117,"publishedAt":40},"01M6BVTZQAWBWJWAM6P71G51G6","vercel-composition-patterns","React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.","https:\u002F\u002Fgithub.com\u002Fajoslin\u002Fdot\u002Fblob\u002Fmaster\u002Fconfig\u002Fopencode\u002Fskills\u002Fcomposition-patterns\u002FSKILL.md",[116],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[118,119,120,121,122,123,124,125,98,126,30,127,128],"vercel composition patterns","Composition","components","refactoring","api","Providers","component architecture","libraries","api changes","component","react"]