frontend-slides

Files (3)

• SKILL.md
• STYLE_PRESETS.md
• openai.yaml · agents/

SKILL.md (first lines)

# 前端幻灯片

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

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

## 何时使用

- 创建演讲文稿、推销文稿、研讨会文稿或内部演示
- 将 `.ppt` 或 `.pptx` 幻灯片转换为 HTML 演示文稿
- 改进现有 HTML 演示文稿的布局、动态或排版
- 与尚未知道自己设计偏好的用户一起探索演示风格

## 不可妥协的原则

1. **零依赖**：默认使用一个内联 CSS 和 JS 的自包含 HTML 文件。
2. **视口适配是强制性的**：每张幻灯片必须适合一个视口，无需内部滚动。
3. **展示而非讲述**：使用视觉预览而非抽象的风格问卷。
4. **独特设计**：避免通用的紫色渐变、白底 Inter 字体、模板外观的文稿。
5. **生产质量**：保持代码注释、可访问、响应式和高性能。

生成之前，阅读 `STYLE_PRESETS.md` 了解视口安全的 CSS 基础、密度限制、预设目录和 CSS 注意事项。

## 工作流程

### 1. 检测模式

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

### 2. 发现内容

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

如果用户有内容，请他们在样式化之前粘贴。

### 3. 发现风格

默认使用视觉探索。

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

否则：
1. 询问文稿应创造什么感觉：印象深刻、充满活力、专注、受启发。
2. 在 `.ecc-design/slide-previews/` 中生成 **3 个单页预览文件**。
3. 每个预览必须自包含、清晰显示排版/颜色/动态，并保持在约 100 行幻灯片内容以内。
4. 询问用户要保留哪个预览或要混合哪些元素。

使用 `STYLE_PRESETS.md` 中的预设指南将情绪映射到风格。

### 4. 构建演示文稿

输出以下任一格式：
- `presentation.html`
- `[presentation-name].html`

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

必需结构：
- 语义幻灯片部分
- 来自 `STYLE_PRESETS.md` 的视口安全 CSS 基础
- 用于主题值的 CSS 自定义属性
- 用于键盘、滚轮和触摸导航的演示控制器类
- 用于显示动画的 Intersection Observer
- 减少动态支持

### 5. 强制视口适配

将此视为硬性门槛。

规则：
- 每个 `.slide` 必须使用 `height: 100vh; height: 100dvh; overflow: hidden;`
- 所有类型和间距必须随 `clamp()` 缩放
- 当内容不适合时，拆分为多张幻灯片
- 永远不要通过将文本缩小到可读尺寸以下来解决溢出
- 永远不允许幻灯片内出现滚动条

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

### 6. 验证

在这些尺寸下检查完成的文稿：
- 1920x1080
- 1280x720
- 768x1024
- 375x667
- 667x375

如果有浏览器自动化可用，使用它来验证没有幻灯片溢出且键盘导航正常工作。

### 7. 交付

交付时：
- 删除临时预览文件，除非用户想要保留它们
- 当有用时使用平台适当的打开器打开文稿
- 总结文件路径、使用的预设、幻灯片数量和简单的主题定制点

为当前操作系统使用正确的打开器：
- macOS: `open file.html`
- Linux: `xdg-open file.html`
- Windows: `start "" file.html`

## PPT / PPTX 转换

PowerPoint 转换流程：
1. 优先使用带有 `python-pptx` 的 `python3` 提取文本、图像和笔记。
2. 如果 `python-pptx` 不可用，询问是否安装它或回退到手动/导出工作流。
3. 保留幻灯片顺序、演讲笔记和提取的资产。
4. 提取后，运行与新演示文稿相同的样式选择工作流。

保持转换跨平台。当 Python 可以完成工作时，不要依赖仅限 macOS 的工具。

## 实现要求

From aaione/everything-claude-code-zh, MIT.

More from aaione/everything-claude-code-zh