# Frontend Slides

从零开始或通过转换 PowerPoint 文件创建令人惊叹、动画丰富的 HTML 演示文稿（Presentations）。适用于用户想要构建演示文稿、将 PPT/PPTX...

- Repository: https://github.com/xu-xiang/everything-claude-code-zh (2012 stars)
- Category: Documents
- License: MIT
- Last updated: 2026-03-05
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add xu-xiang/everything-claude-code-zh --skill frontend-slides -g -a claude-code -y`
Codex: `npx skills add xu-xiang/everything-claude-code-zh --skill frontend-slides -g -a codex -y`
Cursor: `npx skills add xu-xiang/everything-claude-code-zh --skill frontend-slides -g -a cursor -y`
Gemini CLI: `npx skills add xu-xiang/everything-claude-code-zh --skill frontend-slides -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add xu-xiang/everything-claude-code-zh`

## Description

从零开始或通过转换 PowerPoint 文件创建令人惊叹、动画丰富的 HTML 演示文稿（Presentations）。适用于用户想要构建演示文稿、将 PPT/PPTX 转换为 Web 页面或为演讲/路演创建幻灯片（Slides）的场景。通过视觉探索而非抽象选择，帮助非设计师发掘其审美偏好。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 前端幻灯片（Frontend Slides）

创建零依赖、动画丰富且完全在浏览器中运行的 HTML 演示文稿。

灵感来源于 [zarazhangrui](https://github.com/zarazhangrui) 作品中所展示的视觉探索方法。

## 何时激活

- 创建演讲稿、路演包（Pitch Deck）、工作坊课件或内部演示文稿
- 将 `.ppt` 或 `.pptx` 幻灯片转换为 HTML 演示文稿
- 改进现有 HTML 演示文稿的布局、动态效果或排版
- 与尚不确定设计偏好的用户一起探索演示风格

## 核心原则（不可逾越）

1. **零依赖（Zero dependencies）**：默认使用内联 CSS 和 JS 的自包含（Self-contained）单 HTML 文件。
2. **强制视口适配（Viewport fit）**：每张幻灯片必须适配单个视口（Viewport），严禁内部滚动。
3. **展示而非言传（Show, don't tell）**：使用视觉预览，而非抽象的风格调查问卷。
4. **独特设计（Distinctive design）**：避免通用的紫色渐变、白底 Inter 字体等模板感过强的设计。
5. **生产级质量（Production quality）**：保持代码注释清晰、具备可访问性（Accessible）、响应式且性能良好。

在生成之前，请阅读 `STYLE_PRESETS.md` 以获取视口安全 CSS 基准、密度限制、预设目录和 CSS 注意事项。

## 工作流（Workflow）

### 1. 检测模式（Detect Mode）

选择一条路径：
- **新演示文稿**：用户已有主题、笔记或完整草稿
- **PPT 转换**：用户持有 `.ppt` 或 `.pptx` 文件
- **增强（Enhancement）**：用户已有 HTML 幻灯片并希望进行改进

### 2. 发现内容（Discover Content）

仅询问最少必要信息：
- 目的：路演、教学、会议演讲、内部更新
- 长度：短（5-10 页）、中（10-20 页）、长（20+ 页）
- 内容状态：已完成的文案、粗略笔记、仅有主题

如果用户已有内容，请在设计样式前要求其粘贴。

### 3. 发现风格（Discover Style）

默认采用视觉探索方式。

如果用户已知所需的预设（Preset），则跳过预览并直接使用。

否则：
1. 询问幻灯片应营造的感觉：震撼（Impressed）、活力（Energized）、专注（Focused）、启发（Inspired）。
2. 在 `.ecc-design/slide-previews/` 中生成 **3 个单页幻灯片预览文件**。
3. 每个预览必须是自包含的，清晰展示排版/颜色/动态效果，且幻灯片内容保持在 100 行以内。
4. 询问用户保留哪个预览或混合哪些元素。

在将情绪映射到风格时，请参考 `STYLE_PRESETS.md` 中的预设指南。

### 4. 构建演示文稿（Build the Presentation）

输出以下之一：
- `presentation.html`
- `[presentation-name].html`

仅当演示文稿包含提取的或用户提供的图像时，才使用 `assets/` 文件夹。

必要结构：
- 语义化的幻灯片部分（Slide Sections）
- 来自 `STYLE_PRESETS.md` 的视口安全 CSS 基准
- 用于主题值的 CSS 自定义属性
- 用于键盘、滚轮和触摸导航的演示文稿控制器类
- 用于揭示动画（Reveal Animations）的 Intersection Observer
- 减弱动态效果（Reduced-motion）支持

### 5. 强制视口适配（Enforce Viewport Fit）

将其视为严格的准入门槛。

规则：
- 每个 `.slide` 必须使用 `height: 100vh; height: 100dvh; overflow: hidden;`
- 所有字体和间距必须使用 `clamp()` 进行缩放
- 当内容不适配时，拆分为多张幻灯片
- 严禁通过将文本缩小到可读尺寸以下来解决溢出问题
- 严禁在幻灯片内部出现滚动条

使用 `STYLE_PRESETS.md` 中的密度限制和强制性 CSS 代码块。

### 6. 验证（Validate）

在以下尺寸检查完成的幻灯片：
- 1920x1080
- 1280x720
- 768x1024
- 375x667
- 667x375

The rest: https://github.com/xu-xiang/everything-claude-code-zh/blob/HEAD/.cursor/skills/frontend-slides/SKILL.md