关于 explain-with-section-clips
通过分组章节和短循环动画片段来解释变更的技能。它规定片段行为、无障碍与版式要求，并使用 `explainer-kit` 和 `EV.clip` 构建可视化说明。
主要功能
- 01将说明组织为 3–6 个章节
- 02每个 5–12 秒片段展示一个概念
- 03片段离开视野时暂停
- 04提供播放控制和进度条
- 05减少动态效果和缩略图中显示结束帧
- 06使用 `explainer-kit` 和 `EV.clip` 构建片段
适用场景
- 01以可视方式解释一组变更
- 02展示数值如何逐步流转
- 03说明请求如何被拦截
- 04按章节呈现代码变更
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/explain-with-section-clips确认已加载。
详细介绍
使用分节片段进行说明
传统的分组分节页面，每个分节的视觉内容都是在小型播放器框架中循环播放的短动画（“片段”）。每个片段只展示一个想法。
适用场景
- 用户要求通过分节片段直观说明变更。
- 编排器用于通过分节片段直观说明变更。
分节
- 3–6 个分节。每个分节包含：一句话总结 → 一个片段 → 2–3 行简短说明 → 一个
ev-more开关，用于说明其中的内容（例如“新增代码 · 修改的文件”）。 - 在开关内归类相关信息：高亮代码、分组项目、状态标签、精简表格。
片段
- 时长 5–12 秒，循环播放，展示一个想法：某个数值逐渐增加、某个值流经各个步骤、某个请求被拦截，或某项变更扩散到其使用方。
- 仅在可见时播放；滚动离开后暂停。提供播放／暂停／重播控件和进度条。
- 静止时（播放前、启用减少动态效果时、在缩略图中）显示结束帧，且结束帧必须能独立说明结果。
- 片段中的文字在手机上必须清晰易读（桌面尺寸下 ≥ 13 px，在窄画框中按比例放大）。
构建方式
- 使用
explainer-kitskill 将其构建为片段，并通过EV.clip(el, {duration, setup, draw})绘制片段，其中draw(t)仅根据时间设置整个画面（这样即可免费支持跳转、循环播放和海报帧）。 - 为每个分节设置
id+data-toc，使其显示在章节列表中。
评论
支持 Markdown