Architecture Diagram
Create or update architecture and flow diagrams for agent-desktop's docs site in...
Install
npx skills add vercel-labs/agent-desktop --skill architecture-diagram -g -a claude-code -y- Repository
- vercel-labs/agent-desktop6.7k
- Category
- AI and agents
- Updated
- 3d ago
- License
- Apache-2.0
- Context cost
- Lightabout 1,089 tokens
- Runs scripts
- No, instructions only
What it does
Create or update architecture and flow diagrams for agent-desktop's docs site in apps/docs. Use when a docs page needs a diagram of components, data flow, or a command pipeline, or when an existing diagram in apps/docs/public/desktop/diagrams changes.
Architecture diagram
Diagrams are standalone HTML files that the docs embed with the Diagram component. Follow the technical-writer skill for any prose.
Folder convention
- One folder per diagram:
apps/docs/public/desktop/diagrams/<name>/index.html, served at/desktop/diagrams/<name>/index.html.<name>is a short kebab-case slug. Keep it under/desktop: agent-browser.dev routes only/desktoppaths to this app. apps/docs/proxy.tsreturns 404 for/desktoppaths that are not docs pages, so its matcher must excludedesktop/diagrams/, as it does fordesktop/favicon.ico.- The file is standalone: inline CSS, one inline SVG, no external requests. Start from references/template.html.
- The visual tokens are in references/style.md. Reuse them so every diagram looks the same.
- The theme comes from
?theme=lightor?theme=dark. Without the parameter the diagram followsprefers-color-schemeand defaults to dark. - Give the SVG a
<title>and a<desc>that states the whole flow in words.
