Menu
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in, and reading/injecting secrets for commands.
Give the agent its own dedicated email inbox via AgentMail. Send, receive, and manage email autonomously using agent-owned email addresses (e.g. hermes-agent@agentmail.to).
Airtable REST API via curl. Records CRUD, filters, upserts.
Professional anime/2D art style generation skill. Covers 14 sub-styles (modern Japanese anime/moe, retro cel-shading, shonen, shojo, Ghibli, Makoto Shinkai, Chinese xianxia/ink wash, modern Chinese anime, Chinese 3D fantasy, Korean webtoon, Korean impasto, Western cartoon, chibi/moe, 2D cyberpunk) + 5 anti-failure iron laws + cross-style shared rules (character lock / facial proportion spec / stroke consistency / universal negative). Core capabilities: precise style targeting, consistent character identity, cross-style conversion. Trigger: "anime", "2D art", "manga", "illustration", "webtoon", "ghibli", "shinkai", "ufotable", "cel-shading", "impasto", "chibi", "moe", "catgirl", "xianxia", "ink wash", "hanfu character", "cyberpunk anime", "anime character/avatar/style". NOT for: photorealistic (use image agent default) / static posters (use poster-design)
Specialized in anime/2D/character stylization for image generation and conversion. Covers Japanese, Chinese, Korean, and Western art style families. Uses provenance analysis to trace reference images' style DNA, performs a 10-dimension analysis → 3-dimension collapse to precisely lock the style's essence, then matches the optimal tool and prompt approach for generation. Trigger on: "anime-ify", "2D style", "convert to anime", "cel-shading", "ghibli style", "Korean watercolor", "fantasy 3D", "chibi", "Japanese anime style", "style conversion", "manga style", "character illustration", "anime style", "webtoon style", "daily gallery", "daily image series", "daily image in same style", or any request involving converting content into a specific anime/2D art style. Key distinction: User requests generation or conversion to a specific anime/2D art style. Do NOT trigger for: photorealistic photography style, pure logo design, general image editing (crop/background removal etc.).
Operate the Antigravity CLI (agy): plugins, auth, sandbox.
| name | architecture-diagram |
| description | Dark-themed SVG architecture/cloud/infra diagrams as HTML. |
| version | 1.0.0 |
| author | Cocoon AI (hello@cocoon-ai.com), ported by Hermes Agent |
| license | MIT |
| dependencies | null |
| platforms | ["linux","macos","windows"] |
| metadata | {"hermes":{"tags":["architecture","diagrams","SVG","HTML","visualization","infrastructure","cloud"],"related_skills":["concept-diagrams","excalidraw"]}} |
| lane | worker-vision |
| reasoning_effort | xhigh |
| agent | Designer |
| routing_hint | **Agent-Scope:** UI/UX, visual, art-styles, design-systems, motion. Off-scope: code building, data modeling, long-form copy — return to Yuno. Routing-Spec: `yuno-team-routing`. |
Generate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser.
Best suited for:
Look elsewhere first for:
excalidraw)If a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below.
Based on Cocoon AI's architecture-diagram-generator (MIT).
write_file to a .html file (e.g. ~/architecture-diagram.html)Save diagrams to a user-specified path, or default to the current working directory:
set -euo pipefail
./[project-name]-architecture.html
After saving, suggest the user open it:
set -euo pipefail
# macOS
open ./my-architecture.html
# Linux
xdg-open ./my-architecture.html
Use specific rgba fills and hex strokes to categorize components:
| Component Type | Fill (rgba) | Stroke (Hex) |
|---|---|---|
| Frontend | rgba(8, 51, 68, 0.4) | #22d3ee (cyan-400) |
| Backend | rgba(6, 78, 59, 0.4) | #34d399 (emerald-400) |
| Database | rgba(76, 29, 149, 0.4) | #a78bfa (violet-400) |
| AWS/Cloud | rgba(120, 53, 15, 0.3) | #fbbf24 (amber-400) |
| Security | rgba(136, 19, 55, 0.4) | #fb7185 (rose-400) |
| Message Bus | rgba(251, 146, 60, 0.3) | #fb923c (orange-400) |
| External | rgba(30, 41, 59, 0.5) | #94a3b8 (slate-400) |
#020617) with a subtle 40px grid pattern<!-- Background Grid Pattern -->
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>
set -euo pipefail
Components are rounded rectangles (rx="6") with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a double-rect masking technique:
#0f172a)#fb7185)4,4), rose color8,4), amber color, rx="12"The generated HTML file follows a four-part layout:
<div class="card">
<div class="card-header">
<div class="card-dot cyan"></div>
<h3>Title</h3>
</div>
<ul>
<li>• Item one</li>
<li>• Item two</li>
</ul>
</div>
set -euo pipefail
.html fileLoad the full HTML template for the exact structure, CSS, and SVG component examples:
skill_view(name="architecture-diagram", file_path="templates/template.html")
The template contains working examples of every component type (frontend, backend, database, cloud, security), arrow styles (standard, dashed, curved), security groups, region boundaries, and the legend — use it as your structural reference when generating diagrams.