关于 explain-with-preview
Explain with Preview 是一种技能，用双栏章节呈现变更：卡片可供选择，固定预览面板随之切换。它支持方案比较和变更前后说明，并使用一致的行结构展示细节。
主要功能
- 01双栏可视化说明
- 02可选方案卡片
- 03决策与前后对比模式
- 04统一的比较行结构
- 05可加入代码和来源详情
适用场景
- 01呈现方案及其取舍
- 02通过预览说明变更
- 03比较变更前后状态
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/explain-with-preview确认已加载。
详细介绍
配合预览进行说明
双栏章节：左侧是一句简短的引导语和几张可点击的卡片，右侧是一个固定面板，读者选择卡片后，面板内容随之切换。来回切换，就能清楚地看出差异。
适用场景
- 用户要求通过预览直观说明变更。
- 编排器用于通过预览直观说明变更。
两种模式
| 模式 | 卡片 | 初始显示 |
|---|---|---|
| 选项（决策） | 每个选项对应一张，共 2–3 张，其中包括一个谨慎／低风险选项 | 推荐选项 |
| 前后对比 | 恰好两张：“之前 · 当前”和“之后 · 变更后” | 之后（"selected"） |
内容
- 每个选项的行必须完全相同，顺序也相同，这样变化的就只有内容：决策通常包括保留（
ok）、舍弃（removed）、先修复（decision，具体操作）、风险（risk），以及effort（耗时，以小时或天计，并说明工作内容）。每行列出 2–4 个简短条目，使用事实中的真实名称和数字：与该选项相关的每项重要发现都必须放入其中一行。 - 脆弱性、依赖关系和复杂性都应列入这些行中（例如“先修复：将 3 项路径检查移植到本地插件中”），不要单独设章说明。
- 工具或术语首次出现时，在所在行中加以解释（“nursery（Biome 的不稳定规则）”）。
code（每个选项可选）：提供该选项新增或修改的配置或代码片段，最多 8 行真实内容，并注明文件路径。如果推荐选项涉及配置或代码变更，则为其提供代码片段。flip：说明哪些情况会改变推荐结论（1–3 项）。details：包含“测量方法”（命令、版本、机器、单次或重复运行、未测量的内容）和“来源”（链接）。- 使用真实内容。示意内容须标明为示意。
从 JSON 构建
将章节写成 JSON 并生成片段；不要手动编写 HTML、CSS 或脚本：
python <explainer-kit>/assets/preview.py decide.json --out frag-decide.html
JSON 结构记录在 preview.py 顶部，以及工具包的 FRAGMENT-CONTRACT.md（“从 JSON 生成预览章节”）中。文本字段可包含行内 <b>、<code> 和 <a href>。
评论
支持 Markdown