// Generate polished dark-themed architecture diagrams as standalone HTML files with inline SVG, semantic system grouping, and readable connection flows.
Learn a reliable browser workflow by iterating on a real web task, recording strategy, and proposing a reusable skill.
Google Workspace CLI for Gmail, Calendar, Drive, Contacts, Tasks, Sheets, Docs, and Slides.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Surgical execution guardrails for coding, debugging, review, and refactor tasks
Triage Inbox Agent Today lanes, search mailbox evidence, prepare manual or AI-assisted replies, and suggest cleanup automations with strict confirmation gates.
Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.
| name | architecture-diagram |
| description | Generate polished dark-themed architecture diagrams as standalone HTML files with inline SVG, semantic system grouping, and readable connection flows. |
Turn an architecture description or inspected codebase into a self-contained HTML diagram with inline SVG that opens directly in any modern browser.
| Name | Type | Required | Description |
|---|---|---|---|
| system_name | string | No | Short system or project name for the header |
| diagram_brief | string | No | Structured architecture description |
| diagram_type | select | No | Diagram emphasis: auto, system-overview, cloud-infrastructure, deployment, data-flow, security, network-topology, microservices |
| output_path | string | No | Workspace-relative or absolute HTML output path |
assets/template.html. Do not freehand the outer page shell unless the request explicitly needs a very different composition.references/full-guidance.md before major layout work. It contains the spacing, legend placement, component taxonomy, and arrow-order rules that keep the diagrams readable.viewBox is cheap; unreadable overlaps are not.::html{...} directive that points at the generated HTML file so the main conversation view can render the diagram inline.references/full-guidance.md: design system, layout heuristics, and output checklistassets/template.html: starter HTML/SVG template to customizeLICENSE.txt: upstream MIT license carried with the bundled port../architecture-diagram.json.