# Architecture Diagram

Create or update architecture and flow diagrams for agent-desktop's docs site in...

- Repository: https://github.com/vercel-labs/agent-desktop (6655 stars)
- Category: AI and agents
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add vercel-labs/agent-desktop --skill architecture-diagram -g -a claude-code -y`
Codex: `npx skills add vercel-labs/agent-desktop --skill architecture-diagram -g -a codex -y`
Cursor: `npx skills add vercel-labs/agent-desktop --skill architecture-diagram -g -a cursor -y`
Gemini CLI: `npx skills add vercel-labs/agent-desktop --skill architecture-diagram -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 `/desktop` paths to this app.
- `apps/docs/proxy.ts` returns 404 for `/desktop` paths that are not docs pages, so its matcher must exclude `desktop/diagrams/`, as it does for `desktop/favicon.ico`.
- The file is standalone: inline CSS, one inline SVG, no external requests. Start from [references/template.html](references/template.html).
- The visual tokens are in [references/style.md](references/style.md). Reuse them so every diagram looks the same.
- The theme comes from `?theme=light` or `?theme=dark`. Without the parameter the diagram follows `prefers-color-scheme` and defaults to dark.
- Give the SVG a `<title>` and a `<desc>` that states the whole flow in words.

## Draw the real mechanism

The rest: https://github.com/vercel-labs/agent-desktop/blob/HEAD/.agents/skills/architecture-diagram/SKILL.md