Claude Code presentation-styling 技能：复用 HTML 幻灯片布局与代码样式
EnglishClaude Code 安装步骤
- 在 GitHub 固定提交的仓库中保留 `.claude/skills/presentation/presentation-styling/SKILL.md` 和 `presentation/vibe-coding-to-agentic-engineering/index.html`。
- 从仓库根目录启动 Claude Code，指定使用 `presentation-styling`，并提供要改的页面编号、对照内容及需要显示的代码片段。
中文摘要
为项目的 HTML 演示文稿挑选现成的双栏、提示块和代码块样式。适合制作改动前后对照页，统一内容层级并检查代码片段的高亮。
SKILL.md 中文导读
可复现示例
给演示文稿加一张「模糊任务与可验收任务」对照页。左栏放「改好搜索」，右栏放「空查询时隐藏结果，输入三个字后显示计数」。请用项目内的双栏样式，并给右栏加一行 `emptyQuery: hide` 示例。工作步骤
- 根据内容关系选布局。对照材料使用 `.two-col` 和两张 `.col-card`，短说明使用现有提示框。
- 把代码放进 `.code-block`，用已有的类区分字段、命令与注释。
- 打开浏览器预览，检查两个对照栏的阅读顺序，并确认代码片段的字段和注释颜色有区别。
验收方法
页面沿用双栏与现有卡片样式。右栏的代码片段应位于代码块内，字段和内容可以通过项目已有的颜色规则区分。
GitHub 原文 · 更新日期
适用环境
Claude Code 和固定版本的仓库工作副本。目标页面是 `presentation/vibe-coding-to-agentic-engineering/index.html`，使用浏览器预览内置样式与脚本。
常见问题
演示文稿的代码字段和注释怎么区分？
在 `.code-block` 内用项目已有的 `.key` 样式标记字段，用 `.comment` 样式标记注释。预览时核对代码缩进和可读性。