| name | architecture-diagrams |
| description | 当需求涉及多系统对接 / 资金流转，或用户提到「架构图」「技术架构」时触发。超复杂链路中场景清单后、IMAP 前自动接续；也适用于系统设计文档、技术方案评审、风险分析、Phase 路线图等。
|
| type | pipeline |
| output_format | .html |
| output_prefix | arch- |
| pipeline_position | 2.5 |
| depends_on | ["scene-list"] |
| optional_inputs | ["baseline"] |
| consumed_by | ["interaction-map"] |
| scripts | {"build_arch_skeleton.py":"Step 1 骨架 — from build_arch_skeleton import generate"} |
架构图集 Skill（Architecture Diagrams）
触发与定位
做什么：多 Tab 单页 HTML 技术方案文档，CSS Grid 卡片 + 表格 + Callout 讲清技术设计，等同评审 PPT。
何时触发：超复杂链路（≥ 2 系统 / 资金流 / 多团队依赖）在 scene-list 后、interaction-map 前接续；技术方案评审、风险分析、Phase 路线图。
不做：页面跳转交互（归 interaction-map）/ UI 高保真（归 prototype）/ 拓扑节点连线（按需查 references/svg-topology-extension.md，大部分方案不需要）。
与 interaction-map 区别：imap 是横向 Flow + Mockup 讲交互；arch 是 Tab + CSS Grid 卡片讲架构。
改脚本前 30 秒
hook 守的是「Read 过本文件」不看读了多少行。改 scripts/build_arch_skeleton.py 用 Read 此文件 limit=80（§1+§2 即够）。改产出物建议全文。
Public API（不可改签名）：
from build_arch_skeleton import generate — generate(project, nav, tab_fns, output_path, extra_css='', extra_js='')project = {"name": str, "subtitle": str (可选)} · nav = [(tab_id, label), ...] · tab_fns = {tab_id: () -> html_str}
会拦你的 hook：
post-script-syntax-check — pyflakes / py_compilepost-cjk-punct-check — 全角标点强制（中文文案）pre-skill-load-gate — 改 arch-*.html 必先 Read 本 SKILL.md
改完跑啥：
python3 .claude/skills/architecture-diagrams/scripts/build_arch_skeleton.py && open .claude/skills/architecture-diagrams/scripts/archive/build-arch-demo.html
深入读什么：组件 HTML 模板 Read references/components-cheatsheet.md；SVG 拓扑 Read references/svg-topology-extension.md；自检规则 grep -A 20 "^## 自检清单" SKILL.md。
硬规则（FAIL 即拦）
- 配色 2 色上限：同一 Tab 最多 2 种强调色（accent 蓝 + 1 辅助语义色），其余账户/模块用中性灰。
.co-b/-a/-r/-g/-v 五色 callout 是跨页色板，不是同页可并用——同一 Tab 出现 ≥ 3 色 callout 必须改 accent + 灰中性范式
- Tab 索引一致：
sw(i) 的 i 从 0 开始，与 .pw 的 id="tN" 一一对应；nav[(tab_id, label), ...] 顺序锁定 Tab 显示顺序
- 字体栈：正文
'Noto Sans SC','Inter',system-ui,sans-serif；代码 / 数据 / 地址 JetBrains Mono。不混写
