菜单
子 skill — 探索与规划。用户在多种实现方案/设计风格之间未决，或方案选定后要写工程版 RFC 时使用。包含三方案对比（compare.html）、视觉设计方向、实现计划（plan.html）三种范式。当父 skill html-effectiveness 路由命中"对比/选型/RFC/计划"类请求时加载。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
让 agent 用单文件 HTML 替代 markdown 输出空间性、并行性、可比较或可交互的内容。当用户请求"对比/计划/评审/报告/解释器/幻灯片/编辑器/可视化"或当输出含并排选项、流程图、时间线、代码 diff、可交互元素、需要"指着某处说就是它"的场景时使用。本 skill 是路由器：先用决策框架判断是否走 HTML，再按 9 大类调度对应的子 skill（01-explore / 02-review / 03-design / 04-proto / 05-diagram / 06-slides / 07-research / 08-report / 09-editor），并复用 ../templates/*.html 与 shared/base.css 输出真实可运行的产物。
子 skill — 设计系统与组件展示。当用户要从 repo 提取 design tokens 做团队 reference、或要把一个组件的所有 variant 平铺在一张 contact sheet 上 review 时使用。包含设计系统参考（design-tokens.html）和组件变体陈列两种范式。当父 skill 路由命中"设计系统/design tokens/组件变体/展示组件库"类请求时加载。
子 skill — 原型与可点击流。当用户要决定一个 transition 的 duration/easing（动画沙盒，animation.html）或要"走一遍"4-6 屏交互流验证手感时使用。包含动画沙盒和可点击流两种范式。当父 skill 路由命中"动画/原型/手感/clickable flow"类请求时加载。
子 skill — 插画与图表。当用户要博客/文档配图（SVG 插图集）、流程图、状态机、deploy pipeline（flowchart.html）时使用。所有图都用内联 SVG，不引外部库（mermaid/d3/excalidraw）。当父 skill 路由命中"图/diagram/flowchart/state machine/pipeline 可视化"类请求时加载。
子 skill — 代码评审与理解。当用户要 PR 评审、PR 写作（作者侧）、或要理解陌生代码模块的请求路径/调用栈时使用。包含 PR 评审（diff.html）、PR 写作（pr.html）、模块图三种范式。当父 skill 路由命中"评审/PR/审阅/这段代码怎么工作"类请求时加载。
子 skill — 键盘控制幻灯片。当用户要"上去就能讲"的会议幻灯片、不想用 Keynote/PPT/Google Slides、希望单 HTML 文件左右键翻页时使用。当父 skill 路由命中"幻灯片/slide deck/做几张 slides/讲几页"类请求时加载。
| name | html-effectiveness-explore |
| description | 子 skill — 探索与规划。用户在多种实现方案/设计风格之间未决，或方案选定后要写工程版 RFC 时使用。包含三方案对比（compare.html）、视觉设计方向、实现计划（plan.html）三种范式。当父 skill html-effectiveness 路由命中"对比/选型/RFC/计划"类请求时加载。 |
"You're not sure what you want yet. Ask the agent to fan out across several directions and lay them next to each other so you can point at one."
| 用户说 | 用哪个范式 | 模板 |
|---|---|---|
| "几种实现方式给我看看 / 哪种更好" | 三方案对比 | ../templates/compare.html |
| "compare X vs Y vs Z" | 同上 | 同上 |
| "我想要 UI 但说不清风格 / 几个方向给我看" | 视觉设计方向 | 自建（见下） |
| "做一份实现计划 / RFC / 怎么落地" | 实现计划 | ../templates/plan.html |
| "ship in 2 weeks 怎么排" | 同上 | 同上 |
空间形状：每个方案 = 一个完整代码块 + 一张 Pro/Con 表 + 一行指标（bundle / 可测试性 / SSR / 复用）。三个方案要并排才能比较，markdown 只能上下堆。
最少要素：
HTML 骨架：
<div class="approaches">
<article class="approach">
<header><span class="tag">Approach 1</span><h2>Inline useEffect</h2></header>
<pre><code>...实际可运行代码...</code></pre>
<table class="proscons">
<thead><tr><th>Pro</th><th>Con</th></tr></thead>
<tbody><tr><td>...</td><td>...</td></tr></tbody>
</table>
<footer class="metrics">
<span>Bundle <b>+0 kb</b></span>
<span>Test <b>medium</b></span>
<span>Reuse <b>low</b></span>
<span>SSR <b>yes</b></span>
</footer>
</article>
<!-- 重复 2-3 次 -->
</div>
<aside class="recommendation"><strong>建议：</strong>...</aside>
关键 CSS：
.approaches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.approach { display: flex; flex-direction: column; gap: 16px;
padding: 20px; border: 1px solid var(--gray-300);
border-radius: 12px; background: var(--white); }
.approach pre { flex: 1; max-height: 360px; overflow: auto; }
.proscons td:first-child { color: var(--success); }
.proscons td:last-child { color: var(--danger); }
.metrics { display: flex; gap: 16px; flex-wrap: wrap;
font-size: 13px; color: var(--gray-700); }
直接可用模板：../../templates/compare.html
空间形状：4 张真实渲染的卡片（不是描述！）+ 每张一行风格说明 + 顶栏 light/dark 切换。
典型 4 个方向（覆盖大多数场景）：
关键 CSS / JS：
.directions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.directions[data-theme="dark"] { background: var(--slate); color: var(--ivory); }
.render { aspect-ratio: 4/3; padding: 32px; border-radius: 12px;
background: var(--ivory); display: flex; align-items: center;
justify-content: center; flex-direction: column; }
document.querySelectorAll('.theme-toggle button').forEach(b => b.onclick = () => {
document.querySelectorAll('.directions').forEach(d => d.dataset.theme = b.dataset.theme);
});
无独立模板（按需生成；可参考 ../../templates/compare.html 的两栏结构改造）。
空间形状：6 块固定区域：
HTML 骨架：
<header class="meta">
<h1>Implementation plan — [Feature]</h1>
<dl class="meta-grid">
<div><dt>Effort</dt><dd>~2 weeks</dd></div>
<div><dt>Surfaces touched</dt><dd>3 packages</dd></div>
<div><dt>New tables</dt><dd>2</dd></div>
<div><dt>Feature flag</dt><dd><code>flag_v1</code></dd></div>
</dl>
</header>
<section class="step"><span class="step-no">01</span>
<h2>Milestones</h2>
<ol class="timeline">...</ol>
</section>
<section class="step"><span class="step-no">02</span>
<h2>Data flow</h2>
<svg viewBox="0 0 800 320">...</svg>
</section>
<!-- 03 Mockups · 04 Key code · 05 Risks · 06 Open questions -->
SVG 数据流要点：
<rect> 用 8px 圆角--slate，虚线（fan-out）用 --clay + stroke-dasharray="4 4"<defs><marker id="arr">（见 ../shared/components.html 第 1 节）直接可用模板：../../templates/plan.html
Mira Okafor, Devon Park，不写 User A