HezaoHezao
HezaoHezao/poirot
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/HezaoHezao/poirot --skill concept-diagrams命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | concept-diagrams |
| description | Minimal SVG diagrams as standalone HTML files. |
| allowed-tools | ["write_file","read_file"] |
| enabled | true |
| related-skills | ["architecture-diagram"] |
| license | MIT |
| author | Adapted from hermes-agent (Nous Research, MIT); v1k22 |
Generate production-quality SVG diagrams with a unified flat, minimal design system. Output is a single self-contained HTML file that renders identically in any modern browser, with automatic light/dark mode.
Best suited for:
Look elsewhere first for:
architecture-diagram.html file via write_filewrite_file("diagram.html", "<full HTML with inline SVG + CSS>")
| Type | When |
|---|---|
| Process flow | Sequential steps, lifecycle, pipeline |
| Hub-spoke | Central system + connected components (IoT, smart city) |
| Exploded layers | Component breakdown, cross-section |
| Comparison | Side-by-side, before/after |
| Cycle | Circular process, feedback loop |
| Hierarchy | Org chart, taxonomy, tree |
| Timeline | Chronological events |
prefers-color-scheme:root {
/* Primary elements */
--c-primary: #4A90D9;
--c-secondary: #50C878;
--c-accent: #F5A623;
/* Semantic */
--c-input: #7B68EE;
--c-output: #FF6B6B;
--c-process: #4ECDC4;
--c-data: #95E1D3;
--c-control: #C4A7E7;
--c-external: #DDD;
/* Light mode (default) */
--bg: #FAFAFA;
--text: #333;
--border: #E0E0E0;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1A1A2E;
--text: #EEE;
--border: #333;
--c-external: #444;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Diagram Title</title>
<style>
body { margin: 0; padding: 40px; background: var(--bg); }
svg { display: block; margin: 0 auto; }
.label { font-family: -apple-system, sans-serif; font-size: 14px; fill: var(--text); }
.title { font-size: 18px; font-weight: 600; }
.box { fill: var(--c-primary); opacity: 0.15; stroke: var(--c-primary); stroke-width: 2; rx: 8; }
.arrow { stroke: var(--text); stroke-width: 2; fill: none; marker-end: (); }
Input
prefers-color-scheme media query.viewBox correctly so the diagram isn't clipped.