{"skill":{"slug":"dark-architecture-diagram","displayName":"draw architecture diagram","summary":"Create professional, dark-themed SVG architecture diagrams as standalone HTML files matching a specific design system with precise color tokens, typography,...","description":"---\nname: dark-architecture-diagram\ndescription: Create professional, dark-themed SVG architecture diagrams as standalone HTML files matching a specific design system with precise color tokens, typography, and component patterns. Use when the user asks for system architecture diagrams, infrastructure diagrams, technical diagrams showing system components, layer diagrams, or any diagram that should use the dark \"cyberpunk-engineering\" aesthetic with colored layer boundaries, numbered step circles, and card-based component layouts. Also use when the user says \"用全景图风格\", \"暗色架构图\", \"dark architecture\", or references this diagram style.\n---\n\n# Dark Architecture Diagram\n\nCreate standalone HTML files containing SVG architecture diagrams in a dark, technical aesthetic. The style is \"cyberpunk-engineering\" — dark slate backgrounds, colored layer boundaries, monospace typography, and glowing accents. Every diagram produced with this skill should look like it belongs in the same design system.\n\n## When to Use\n\nThis skill applies when creating technical architecture diagrams that need:\n\n- Multi-layer system visualization (e.g., presentation → logic → data)\n- Component relationship mapping with flow arrows\n- Numbered execution step sequences\n- Dark theme with high contrast and color-coded layers\n\n## Core Design Philosophy\n\nThe design language communicates hierarchy through color temperature and opacity rather than size alone. Each architectural layer gets a unique hue. Cards within layers use the layer's color at low opacity for fills and full saturation for strokes. Text hierarchy is maintained through a strict 5-level grayscale system. The overall feeling should be \"a well-lit control room at night\" — dark but highly readable.\n\n## File Structure\n\nAlways produce a single standalone HTML file with embedded `\n\n\n\n\n\n```\n\n## Design Token Summary\n\nRead `references/design-tokens.md` for the complete token specification. Key tokens:\n\n| Token | Value | Usage |\n|-------|-------|-------|\n| Background | `#020617` | Page and SVG background |\n| Card Fill | `#0f172a` | All card/box backgrounds |\n| Grid/Border | `#1e293b` | Subtle grid lines, card borders |\n| Text L1 (title) | `#f8fafc` | Main titles only |\n| Text L2 (heading) | `#e2e8f0` | Section headings, step labels |\n| Text L3 (body) | `#94a3b8` | Body text, descriptions |\n| Text L4 (muted) | `#64748b` | Secondary info, captions |\n| Text L5 (ghost) | `#475569` | Footnotes, de-emphasized |\n\n## Layer Color System\n\nEach architectural layer is assigned a dedicated hue. When creating a new diagram, map your layers to these colors in order of visual priority:\n\n| Role | Color | Hex | Typical Use |\n|------|-------|-----|-------------|\n| Product/Presentation | Pink | `#f472b6` | Top-level user-facing layer |\n| Channel/Access | Cyan | `#22d3ee` | Entry points, routing |\n| Orchestrator/Core | Orange | `#fb923c` | Central coordination |\n| Domain/Service | Purple | `#a78bfa` | Business domain modules |\n| Capability/Tools | Green | `#34d399` | Infrastructure capabilities |\n| Memory/State | Yellow | `#fbbf24` | State, caching, memory |\n| Platform/Cross-cut | Rose | `#fb7185` | Cross-cutting concerns |\n| Safety/Security | Red | `#ef4444` | Security boundaries |\n| Steps/Flow | Sky Blue | `#0ea5e9` | Numbered execution steps |\n| Gateway | Light Blue | `#38bdf8` | API gateways, auth |\n\n## Component Patterns\n\nRead `references/component-patterns.md` for the full component library. Key patterns:\n\n### Layer Boundary\n```svg\n\n\n{emoji} {Layer Name}\n{description}\n```\n\n### Card Component\n```svg\n\n\n{emoji} {Title}\n{description}\n{metadata}\n```\n\n### Numbered Step Circle\n```svg\n\n{N}\n{Step Name}\n```\n\n### Flow Arrows\n```svg\n\n\n\n\n\n\n\n\n```\n\n### LLM Execution Zone (Dashed Boundary)\n```svg\n\n```\n\n## Typography Rules\n\n- **Font stack**: `'JetBrains Mono', 'PingFang SC', monospace`\n- **Title** (page header): 22px, weight 700, color `#f8fafc`\n- **Layer label**: 11px, weight 700, layer color\n- **Card title**: 10-11px, weight 600, layer color\n- **Body text**: 8-9px, weight 400, `#94a3b8`\n- **Caption/metadata**: 7-8px, weight 400, `#64748b`\n- **Ghost text**: 6-7px, weight 400-600, `#475569`\n\n## SVG Conventions\n\n- **viewBox**: Use a large viewBox (e.g., `0 0 1420 1400`) for detail; the SVG scales responsively via `width: 100%; height: auto`\n- **Grid pattern**: 40×40 grid with `#1e293b` stroke at 0.5 opacity\n- **Border radius**: `rx=\"12\"` for layer boundaries, `rx=\"8\"` for cards, `rx=\"6\"` for small items, `rx=\"4\"` for tags/chips\n- **Arrow markers**: Define in `` — neutral (`#64748b`), orange, cyan variants\n- **Gradients**: Use `linearGradient` for special zones (orchestrator, LLM domain) — always subtle (0.02–0.15 opacity)\n- **Stroke patterns**: solid for primary boundaries, `stroke-dasharray=\"6,3\"` for LLM zones, `stroke-dasharray=\"4,3\"` for placeholder/expandable areas\n- **Spacing**: 15-25px between layers, 10-15px between cards within a layer\n- **L-shape routing**: Route arrows with right-angle bends to avoid crossing content — never diagonal through other components\n\n## Summary Cards (Below Diagram)\n\nInclude a grid of summary cards below the SVG for key architectural decisions:\n\n```css\n.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }\n.card { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; padding: 18px 20px; }\n```\n\nEach card has a colored dot matching its layer, a title, and bullet points.\n\n## Header Pattern\n\nAlways include a header with a pulsing cyan dot and subtitle:\n\n```css\n.header h1::before {\n content: '';\n width: 8px; height: 8px;\n border-radius: 50%;\n background: #22d3ee;\n animation: pulse 2s infinite;\n}\n```\n\n## Checklist\n\nBefore finalizing any diagram, verify:\n\n- [ ] Background is `#020617`, not black or dark gray\n- [ ] All cards use `#0f172a` fill with colored overlay\n- [ ] Text hierarchy follows the 5-level system\n- [ ] Each layer has a unique color from the palette\n- [ ] Numbered steps use `#0ea5e9` filled circles with white text\n- [ ] Arrows use L-shape routing, no diagonal crossing\n- [ ] Font is JetBrains Mono + PingFang SC\n- [ ] Grid pattern is defined and applied to background rect\n- [ ] All `rx` values follow the size convention (12/8/6/4)\n- [ ] Footer text uses `#475569` at 10px\n","tags":{"latest":"1.0.0"},"stats":{"comments":0,"downloads":370,"installsAllTime":13,"installsCurrent":1,"stars":0,"versions":1},"createdAt":1777534855972,"updatedAt":1778492809868},"latestVersion":{"version":"1.0.0","createdAt":1777534855972,"changelog":"Dark Architecture Diagram skill v1.0.0 – Initial Release\n\n- Introduces professional, dark-themed SVG architecture diagrams following a strict \"cyberpunk-engineering\" design system.\n- Supports layer-based visualizations, component mapping, numbered steps, and flow arrows, all styled for high contrast and clarity.\n- Defines consistent color tokens, typography rules (JetBrains Mono), and component patterns for cohesive diagrams.\n- Outputs diagrams as standalone HTML files with fully embedded styles and responsive SVG viewBox.\n- Provides detailed guidance on layer color usage, summary cards, LLM zones, and UI conventions for technical diagramming needs.","license":"MIT-0"},"metadata":null,"owner":{"handle":"ksky521","userId":"s177z4s6dabs1y9tx72np0acxs83zsfm","displayName":"三水清","image":"https://avatars.githubusercontent.com/u/1073262?v=4"},"moderation":null}