메뉴
从零开始或通过转换PowerPoint文件创建令人惊艳、动画丰富的HTML演示文稿。当用户想要构建演示文稿、将PPT/PPTX转换为网页格式，或为演讲/推介创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择发现他们的美学。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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.