// Build an interactive architecture map for an organization, open source project, or tech platform
Research and publish a daily AI news edition (The AI Dispatch)
Build an interactive educational story with a style guide aesthetic
Build a complete CSS design system style guide
Build a complete tech guide for a developer tool or language
Compose full-length (~1.5 minute) chiptune songs in the audio tracker's compact JSON format. Supports RPG battle themes, town music, overworld adventures, classical arrangements, ambient dungeon tracks, and more. This skill should be used when creating songs for the audio tracker, composing game music, or generating .json song files.
| name | architecture |
| description | Build an interactive architecture map for an organization, open source project, or tech platform |
| argument-hint | <subject> [style-name] |
| allow-model-invocation | true |
Create an interactive architecture map for $ARGUMENTS.
The map must be self-contained HTML with inline CSS, Google Fonts only, Mermaid.js loaded from CDN (https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs), no build step. Target 800-1200 lines. Focus on clarity and navigability over exhaustive detail.
Architecture maps can cover three types of subjects:
README.md to see which styles are availableblueprint for infrastructure, federal-night for government, circuit-board for tech)styles/{name}.html to extract the design system (CSS variables, fonts, color palette).architecture/va-oit/index.html as the reference template for structure, Mermaid config, and fullscreen viewer code.graph TD — hierarchies, org charts, component treesgraph LR — data flows, request paths, pipelinesflowchart — decision flows, request routingtimeline — evolution, version history, modernizationblock-beta — layered architectures, stack diagramssequenceDiagram — API call flows, auth sequencesLaunch 2 sonnet subagents in parallel. Each should use WebSearch extensively and WebFetch for documentation pages, GitHub READMEs, and architecture docs.
Agent 1 — Structure & Systems:
Agent 2 — Connections & Status:
Both agents should cite their sources for the appendix.
Use 2 sequential opus subagents:
Create the full HTML file with:
Infrastructure (copy from reference):
<head> with Google Fonts from the chosen stylearchitecture/va-oit/index.htmlthemeVariables mapped to the style's palette:
background, primaryColor, primaryTextColor, primaryBorderColor etc. all from style CSS varsfontFamily matching the style's body fontuseMaxWidth: false in flowchart configmermaid.run().then(...) expand-button injection codeContent — sections 01-07:
diagram-labelMermaid diagram rules:
<pre class="mermaid"> must be inside a <div class="diagram-container"> with a <div class="diagram-label">style declarations on nodes for colors: style NODE fill:#hex,stroke:#hex,color:#hex<br/> for multi-line node labelsMermaid node text contrast (REQUIRED):
Mermaid's primaryTextColor theme variable overrides per-node color in style directives — the color doesn't propagate through foreignObject to HTML labels. You MUST include a post-render fixNodeLabelColors function that:
mermaid.run().then() wrapped in requestAnimationFrame.node elements, reads the shape's fill via getComputedStyle(shape).fill(0.299*r + 0.587*g + 0.114*b) / 255foreignObject * with !important: dark (#0a0010) if lum > 0.4, white (#ffffff) otherwisefill attribute on text/tspan elements for SVG text fallbackfixNodeLabelColors(clone))Copy the implementation from architecture/openclaw/index.html.
Read the file, then append:
Critical rules for both build agents:
</body> or last </section> and insert before itid attributes must match jump nav anchors<a href="../index.html" class="back-link">Architecture Maps</a>architecture/{kebab-case-name}/index.htmlOne opus subagent reads the complete file and:
<pre class="mermaid"> is valid syntax. Check node IDs don't collide across diagrams. Ensure all style declarations reference defined nodes.href anchors match section id attributes.overflow-x: auto. Verify mobile breakpoint styles exist.architecture/index.html exists, read it and add a card for the new map. If it doesn't exist, create a hub page following the project's index pattern (card grid linking to each map)./index.html if there's no Architecture section link yet.Add {subject} architecture map ({style-name} style)git config --global credential.helper store && echo "https://GGPrompts:$(gh auth token --user GGPrompts)@github.com" > ~/.git-credentials && git push origin mainarchitecture/va-oit/index.html (Federal Night style, ~1200 lines)architecture/openclaw/index.html (has fixNodeLabelColors implementation)styles/{name}.htmlREADME.md