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

演示样式技能

presentation/index.html 中使用的 CSS 类和 HTML 模式。

CSS 组件类

布局

• .two-col —— 2 列网格布局，间距 24px
• .info-grid —— 用于信息卡片的 2 列网格
• .col-card —— 列内的卡片（添加 .good 显示绿色边框，.bad 显示红色边框）
• .info-card —— 信息网格中的卡片

内容块

• .trigger-box —— 灰色背景、深色左边框的方框（用于关键概念、前置要求）
• .how-to-trigger —— 绿色背景、绿色边框的方框（用于"尝试此操作"）
• .warning-box —— 橙色背景、警告边框的方框（用于重要警告）
• .code-block —— 深色代码显示块，等宽字体

列表

• .use-cases —— 图标+文本列表项的容器
• .use-case-item —— 带有图标和文本的单个项目
• .feature-list —— 简单的带边框列表

标签和徽章

• .matcher-tag —— 灰色内联胶囊标签
• .weight-badge —— 绿色胶囊徽章（由 JS 为带权重的幻灯片自动注入）

代码块语法高亮

在 .code-block 内，使用以下 span 进行语法着色：

<div class="code-block">
<span class="comment"># 这是一条注释</span>
<span class="key">字段名</span>: <span class="string">值</span>
<span class="cmd">&gt;</span> 要运行的命令
</div>

• .comment —— 绿色 (#6a9955)，用于注释
• .key —— 蓝色 (#9cdcfe)，用于属性名/键
• .string —— 橙色 (#ce9178)，用于字符串值
• .cmd —— 黄色 (#dcdcaa)，用于命令/提示符

幻灯片类型模式

两列内容幻灯片（好与坏对比）

<div class="slide" data-slide="N" data-weight="5">
    <h1>标题</h1>
    <div class="two-col">
        <div class="col-card bad">
            <h4>之前（Vibe 编码）</h4>
            <!-- 不好的示例 -->
        </div>
        <div class="col-card good">
            <h4>之后（智能体）</h4>
            <!-- 好的示例 -->
        </div>
    </div>
</div>

请勿在幻灯片 HTML 中硬编码 <span class="weight-badge">。演示文稿 JavaScript 会自动注入和移除权重徽章。

带代码示例的内容幻灯片

<div class="slide" data-slide="N">
    <h1>标题</h1>
    <div class="trigger-box">
        <h4>关键概念</h4>
        <p>描述</p>
    </div>
    <div class="code-block"><span class="comment"># 示例</span>
<span class="key">字段</span>: <span class="string">值</span></div>
</div>

图标列表模式

<div class="use-cases">
    <div class="use-case-item">
        <span class="use-case-icon">表情</span>
        <div class="use-case-text">
            <strong>标题</strong>
            <span>描述文本</span>
        </div>
    </div>
</div>

旅程栏专用

• .journey-bar —— 固定在进度栏下方的进度条
• .journey-bar.hidden —— 在标题幻灯片上隐藏
• 旅程栏颜色通过 HSL 插值从红色（0%）过渡到绿色（100%）
• 权重徽章由 JS 自动注入到带权重幻灯片的 h1 元素中