shanraisshan/claude-code-best-practice0°

presentation-structure

仓库创建 2025年10月31日最近提交 3 小时前SkillHot 收录 20 天前

▸ 精选理由

帮助代理理解幻灯片定位与结构，便于自动化修改与生成。

这个 Skill 做什么

说明仓库中 presentation/index.html 的幻灯片结构与格式约定。

说明 presentation/index.html 里幻灯片的组织规则：这是单文件 HTML（内联 CSS/JS），每张幻灯片用带 data-slide 的 div 表示，data-level 用来标记章节层级和过渡点。在编辑幻灯片、调整导航或设置权重系统时需要遵循这些约定。特别之处是所有表现都集中在一个文件里，按照数据属性和权重能保持目录、过渡和导航一致性。

▸ 展开 SKILL.md 英文原文

Knowledge about the presentation slide format, weight system, navigation, and section structure

Skill 开发管理演示结构幻灯片仓库知识通用

6.4w

Stars

6.3k

Forks

仓库内 Skill

+1.4k

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/shanraisshan/claude-code-best-practice/main/.claude/skills/presentation/presentation-structure/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/shanraisshan/claude-code-best-practice/main/.claude/skills/presentation/presentation-structure/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# Presentation Structure Skill

Knowledge about how the presentation at `presentation/index.html` is structured.

## File Location

`presentation/index.html` — a single-file HTML presentation with inline CSS and JS.

## Slide Format

Each slide is a div with `data-slide` (sequential number) and optional `data-level` (journey level at transition points):

```html
<!-- Regular slide — inherits level from previous data-level slide -->
<div class="slide" data-slide="12">
    <h1>Slide Title</h1>
    <!-- content -->
</div>

<!-- Level transition slide — sets new level for this slide and all following -->
<div class="slide section-slide" data-slide="10" data-level="low">
    <h1>Section Name</h1>

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有