claude-code-best-practice-zh: Skill for Claude Code

演示结构技能

关于 presentation/index.html 中演示文稿结构方式的知识。

文件位置

presentation/index.html —— 一个单文件 HTML 演示文稿，包含内联 CSS 和 JS。

幻灯片格式

每张幻灯片都是一个带有 data-slide（顺序编号）和可选 data-level（在过渡点的旅程等级）的 div：

<!-- 普通幻灯片 —— 继承之前 data-level 幻灯片的等级 -->
<div class="slide" data-slide="12">
    <h1>幻灯片标题</h1>
    <!-- 内容 -->
</div>

<!-- 等级过渡幻灯片 —— 为此幻灯片及之后的所有幻灯片设置新等级 -->
<div class="slide section-slide" data-slide="10" data-level="low">
    <h1>章节名称</h1>
    <p class="section-desc">等级：低 —— 本章描述</p>
</div>

<!-- 标题幻灯片（居中） -->
<div class="slide title-slide" data-slide="1">
    <h1>演示标题</h1>
    <p class="subtitle">副标题文本</p>
</div>

旅程栏等级系统

演示使用 4 级系统而非累积百分比：

• 等级通过关键过渡幻灯片（章节分隔符）上的 data-level 属性设置
• 所有在 data-level 幻灯片之后的幻灯片继承该等级，直到下一个过渡
• 旅程栏填充至 25% / 50% / 75% / 100%，分别对应低 / 中 / 高 / 专业等级
• 第 1 张幻灯片（标题幻灯片）隐藏进度栏；从第 2 张幻灯片开始显示
• 第一个 data-level 之前的幻灯片（第 2-9 张）显示空进度栏（尚未设置等级）
• .level-badge 由 JS 注入到带有 data-level 的幻灯片的 <h1> 中 —— 请勿在 HTML 中硬编码

按章节划分的等级过渡

章节	幻灯片范围	data-level	进度栏高度
第 0 部分：介绍	幻灯片 1-4	（无）	隐藏 / 空
第 1 部分：前置要求	幻灯片 5-9	（无）	空
第 2 部分：更好的提示词	幻灯片 10-17	low	25%
第 3 部分：项目记忆	幻灯片 18-24	medium	50%
第 4 部分：结构化工作流	幻灯片 25-28	（继承 medium）	50%
第 5 部分：领域知识	幻灯片 29-33	high	75%
第 6 部分：智能体工程	幻灯片 34-46	high	75%
附录	幻灯片 47+	（继承 high）	75%

导航系统

• goToSlide(n) —— 用于目录链接，必须匹配实际的 data-slide 编号
• totalSlides 从 DOM 自动计算（document.querySelectorAll('[data-slide]').length）
• 方向键、空格键和触摸滑动用于导航
• 幻灯片计数器在左下角显示 当前 / 总计

重新编号规则

添加、删除或重新排序幻灯片后：

1. 从 1 开始依次重新编号所有 data-slide 属性
2. 更新目录/旅程地图幻灯片中所有 goToSlide() 调用
3. JS totalSlides 自动计算 —— 无需手动更新
4. 确认没有间隙或重复

章节分隔符格式

章节分隔符使用 section-slide 类。等级过渡的章节分隔符带有 data-level 并在描述中显示等级名称：

<div class="slide section-slide" data-slide="10" data-level="low">
    <p class="section-number">第 2 部分</p>
    <h1>更好的提示词</h1>
    <p class="section-desc">等级：低 —— 实现真正有效的提示。</p>
</div>