Menu
从零开始或通过转换PowerPoint文件创建令人惊艳、动画丰富的HTML演示文稿。当用户想要构建演示文稿、将PPT/PPTX转换为网页格式，或为演讲/推介创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择发现他们的美学。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | frontend-slides |
| description | 从零开始或通过转换PowerPoint文件创建令人惊艳、动画丰富的HTML演示文稿。当用户想要构建演示文稿、将PPT/PPTX转换为网页格式，或为演讲/推介创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择发现他们的美学。 |
| origin | ECC |
创建零依赖、动画丰富的 HTML 演示文稿，完全在浏览器中运行。
受 zarazhangrui（鸣谢：@zarazhangrui）作品中展示的视觉探索方法的启发。
.ppt 或 .pptx 幻灯片转换为 HTML 演示文稿时在生成之前，请阅读 STYLE_PRESETS.md 以了解视口安全的 CSS 基础、密度限制、预设目录和 CSS 陷阱。
选择一条路径：
.ppt 或 .pptx只询问最低限度的必要信息：
如果用户有内容，请他们在进行样式设计前粘贴内容。
默认采用视觉探索方式。
如果用户已经知道所需的预设，则跳过预览并直接使用。
否则：
.ecc-design/slide-previews/ 中生成 3 个单幻灯片预览文件。在将情绪映射到风格时，请使用 STYLE_PRESETS.md 中的预设指南。
输出以下之一：
presentation.html[presentation-name].html仅当文稿包含提取的或用户提供的图像时，才使用 assets/ 文件夹。
必需的结构：
STYLE_PRESETS.md 的视口安全的 CSS 基础将此视为硬性规定。
规则：
.slide 必须使用 height: 100vh; height: 100dvh; overflow: hidden;clamp() 缩放使用 STYLE_PRESETS.md 中的密度限制和强制性 CSS 代码块。
在这些尺寸下检查完成的文稿：
如果可以使用浏览器自动化，请使用它来验证没有幻灯片溢出且键盘导航正常工作。
在交付时：
为当前操作系统使用正确的开源工具：
open file.htmlxdg-open file.htmlstart "" file.html对于 PowerPoint 转换：
python3 和 python-pptx 来提取文本、图像和备注。python-pptx 不可用，询问是安装它还是回退到基于手动/导出的工作流程。保持转换跨平台。当 Python 可以完成任务时，不要依赖仅限 macOS 的工具。
包含：
main, section, nav)prefers-reduced-motion除非用户明确要求更密集的幻灯片且可读性仍然保持，否则使用以下最大值：
| 幻灯片类型 | 限制 |
|---|---|
| 标题 | 1 个标题 + 1 个副标题 + 可选标语 |
| 内容 | 1 个标题 + 4-6 个要点或 2 个短段落 |
| 功能网格 | 最多 6 张卡片 |
| 代码 | 最多 8-10 行 |
| 引用 | 1 条引用 + 出处 |
| 图像 | 1 张受视口约束的图像 |
-clamp(...)frontend-patterns 用于围绕文稿的组件和交互模式liquid-glass-design 当演示文稿有意借鉴苹果玻璃美学时e2e-testing 如果您需要为最终文稿进行自动化浏览器验证Use after a complex task, failure, or when reviewing what was learned. Teaches how to write growth logs that extract reusable patterns — not diary entries.
Design a goal-oriented agent loop, and review it for the ways loops go wrong — spinning and burning tokens, Goodhart-gaming the verifier, or running a wrong answer to completion. Two actions: (1) WRITE a loop — gate whether to build it, define a machine-decidable goal, pick the loop type, pick a skeleton; (2) REVIEW a loop — run it past five failure modes plus decidability, boundaries, fallback, judge independence, and keep-judgment-with-the-human red lines. Use when designing an autonomous agent loop, or when you already have one and worry it will spin, cheat, or run a wrong answer to the end. Complements the mechanism-layer loop skills (autonomous-loops, continuous-agent-loop) by covering the judgment layer they don't. 中文触发：写 loop、设计 loop、做一个 loop、检查 loop 对不对、loop 体检、loop 会不会跑飞、可判定目标、五个崩法、plan build judge。English triggers: design an agent loop, write a loop, check a loop, loop review, prevent a runaway loop, goal-oriented loop, decidable goal, plan/build/judge.
Stop hook that blocks Claude from finishing until quality checks pass. Detects rationalization patterns (surface text heuristics), stale learning logs (filesystem mtime), and low disk space. Complements self-audit by mechanically enforcing learning capture habits.
React Native and Expo app patterns — Expo Router navigation, state separation (server/client/route/form), TanStack Query data fetching with Zod, performant lists, NativeWind/StyleSheet styling, native APIs, and secure storage. Use when building or editing React Native / Expo screens, components, navigation, or data layers.
Instinct-based learning system that observes sessions via hooks, creates atomic instincts with confidence scoring, and evolves them into skills/commands/agents. v2.1 adds project-scoped instincts to prevent cross-project contamination.
Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.