Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
.claude/skills/affaan-m-frontend-slides/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-07 | ✗→✓ | ▲ Improved | 26% | 0% |
| case-15 | ✗→✓ | ▲ Improved | 289% | 0% |
| case-19 | ✗→✓ | ▲ Improved | 83% | 0% |
| case-20 | ✗→✓ | ▲ Improved | -28% | 0% |
| case-04 | ✓→✓ | ＝ Same ✓ | 1% | 0% |
创建零依赖、动画丰富的 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 如果您需要为最终文稿进行自动化浏览器验证| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 27,569 | 28,393 | +3% | 1 | 1 | 0% | 6,233 | 7,966 | +28% | 0 | 0 | — |
case-02 | fail→fail | 24,103 | 2,676 | -89% | 1 | 1 | 0% | 5,240 | 2,130 | -59% | 0 | 0 | — |
case-03 | fail→fail | 22,568 | 29,948 | +33% | 1 | 1 | 0% | 4,001 | 7,943 | +99% | 0 | 0 | — |
case-04 | pass→pass | 14,973 | 6,595 | -56% | 1 | 1 | 0% | 3,116 | 3,158 | +1% | 0 | 0 | — |
case-13 | pass→pass | 2,286 | 1,643 | -28% | 1 | 1 | 0% | 339 | 1,954 | +476% | 0 | 0 | — |
case-05 | pass→pass | 11,969 | 4,635 | -61% | 1 | 1 | 0% | 2,165 | 2,566 | +19% | 0 | 0 | — |
case-06 | pass→pass | 7,996 | 17,471 | +118% | 1 | 1 | 0% | 1,353 | 2,651 | +96% | 0 | 0 | — |
case-07 | fail→pass | 17,000 | 13,848 | -19% | 1 | 1 | 0% | 3,440 | 4,332 | +26% | 0 | 0 | — |
case-08 | pass→pass | 7,010 | 3,133 | -55% | 1 | 1 | 0% | 1,243 | 2,262 | +82% | 0 | 0 | — |
case-14 | pass→pass | 3,338 | 1,474 | -56% | 1 | 1 | 0% | 563 | 1,964 | +249% | 0 | 0 | — |
case-09 | pass→pass | 10,898 | 7,916 | -27% | 1 | 1 | 0% | 1,860 | 2,980 | +60% | 0 | 0 | — |
case-10 | pass→pass | 12,734 | 13,787 | +8% | 1 | 1 | 0% | 2,406 | 4,256 | +77% | 0 | 0 | — |
case-11 | pass→pass | 4,251 | 4,280 | +1% | 1 | 1 | 0% | 788 | 2,509 | +218% | 0 | 0 | — |
case-12 | pass→pass | 16,512 | 40,307 | +144% | 1 | 1 | 0% | 3,213 | 6,016 | +87% | 0 | 0 | — |
case-15 | fail→pass | 3,051 | 2,419 | -21% | 1 | 1 | 0% | 537 | 2,088 | +289% | 0 | 0 | — |
case-16 | pass→pass | 5,988 | 6,077 | +1% | 1 | 1 | 0% | 1,192 | 2,837 | +138% | 0 | 0 | — |
case-17 | pass→pass | 7,855 | 4,830 | -39% | 1 | 1 | 0% | 1,230 | 2,598 | +111% | 0 | 0 | — |
case-18 | fail→fail | 14,899 | 3,034 | -80% | 1 | 1 | 0% | 2,316 | 2,288 | -1% | 0 | 0 | — |
case-19 | fail→pass | 11,592 | 22,155 | +91% | 1 | 1 | 0% | 1,892 | 3,464 | +83% | 0 | 0 | — |
case-20 | fail→pass | 14,255 | 1,978 | -86% | 1 | 1 | 0% | 2,831 | 2,052 | -28% | 0 | 0 | — |
case-21 | pass→pass | 15,926 | 25,051 | +57% | 1 | 1 | 0% | 3,680 | 7,918 | +115% | 0 | 0 | — |
case-22 | pass→pass | 13,815 | 13,191 | -5% | 1 | 1 | 0% | 2,693 | 4,743 | +76% | 0 | 0 | — |
case-23 | pass→pass | 18,664 | 34,460 | +85% | 1 | 1 | 0% | 4,182 | 5,733 | +37% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted. The headline lift of +17 percentage points is the difference between those two pass rates over the 23 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
| Model | Method | Date | Lift |
|---|---|---|---|
| gemini-3.6-flash | verified | 8/3/2026 | +22% |
Other measured skills in the registry, with their headline benchmark lift.