メニュー
Generate professional dark-themed SVG architecture diagrams, cloud infrastructure diagrams, and data visualizations as standalone HTML files. Use when user asks to create system architecture diagrams, infrastructure maps, or data charts.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
本地离线 OCR 文字识别，基于 tesseract.js。当用户发图片/截图/扫描件要求提取文字时使用，支持中英文。纯本地运行，无需联网。
Use when completing tasks, implementing major features, or before merging to verify work meets requirements
Use when implementing any feature or bugfix, before writing implementation code
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
| name | data-chart |
| description | Generate professional dark-themed SVG architecture diagrams, cloud infrastructure diagrams, and data visualizations as standalone HTML files. Use when user asks to create system architecture diagrams, infrastructure maps, or data charts. |
| version | 1.0.0 |
| author | deskwand (adapted from Hermes Agent architecture-diagram, based on Cocoon AI) |
| license | MIT |
| metadata | {"source":"adapted from Hermes Agent architecture-diagram (Cocoon AI, MIT)","tags":["Architecture","Diagrams","SVG","HTML","Visualization","Charts","Cloud"]} |
| allowed-tools | read,write,shell |
Generate professional dark-themed diagrams as standalone HTML files with inline SVG. No external tools, no API keys — just write HTML and open in browser.
Best for:
For data charts (bar, line, pie): output vega-lite code blocks directly in the response — see Vega-Lite Charting section below.
.html file| Component Type | Fill (rgba) | Stroke (Hex) |
|---|---|---|
| Frontend | rgba(8, 51, 68, 0.4) | #22d3ee (cyan) |
| Backend | rgba(6, 78, 59, 0.4) | #34d399 (emerald) |
| Database | rgba(76, 29, 149, 0.4) | #a78bfa (violet) |
| Cloud/AWS | rgba(120, 53, 15, 0.3) | #fbbf24 (amber) |
| Security | rgba(136, 19, 55, 0.4) | #fb7185 (rose) |
| Message Bus | rgba(251, 146, 60, 0.3) | #fb923c (orange) |
#020617) with 40px gridrx="6"), 1.5px strokesSee templates/template.html for the full HTML template with working examples.
For charts (bar, line, pie, scatter), output vega-lite code blocks:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": { "values": [...] },
"mark": "bar",
"encoding": {
"x": { "field": "category", "type": "nominal" },
"y": { "field": "value", "type": "quantitative" }
}
}
| Data shape | Chart type |
|---|---|
| Categories vs values | Bar (vertical) or Bar (horizontal for long labels) |
| Time series | Line or Area |
| Part-to-whole | Pie / Donut (≤6 segments) or Stacked Bar |
| Correlation | Scatter / Bubble |
| Distribution | Histogram / Box Plot |
.html file, all CSS/SVG inlinevega-lite code block in response