القائمة
从零开始或通过转换PowerPoint文件创建令人惊艳、动画丰富的HTML演示文稿。当用户想要构建演示文稿、将PPT/PPTX转换为网页格式，或为演讲/推介创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择发现他们的美学。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
استنادا إلى تصنيف SOC المهني
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/loulanyue/awesome-claude-notes --skill frontend-slidesيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
Head-to-head comparison of coding agents (Claude Code, Aider, Codex, etc.) on custom tasks with pass rate, cost, time, and consistency metrics
Design and optimize AI agent action spaces, tool definitions, and observation formatting for higher completion rates.
Operate as an agentic engineer using eval-first execution, decomposition, and cost-aware model routing.
| name | frontend-slides |
| description | 从零开始或通过转换PowerPoint文件创建令人惊艳、动画丰富的HTML演示文稿。当用户想要构建演示文稿、将PPT/PPTX转换为网页格式，或为演讲/推介创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择发现他们的美学。 |
| source_path | skills/frontend-slides/SKILL.md |
| 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 如果您需要为最终文稿进行自动化浏览器验证