frontend-slides
Frontend Slides builds self-contained, animation-rich HTML presentations that run entirely in the browser with no external dependencies. Convert PowerPoint files to web presentations or start from scratch, with visual style exploration to help non-designers discover their aesthetic without abstract questionnaires.
Frontend Slides creates animated HTML presentations from scratch or converts PowerPoint files to web-ready formats.
AI-generated summary based on this skill's SKILL.md
Install
xu-xiang/everything-claude-code-zh/frontend-slides · repository language: JavaScript
git clone https://github.com/xu-xiang/everything-claude-code-zh
cp -r everything-claude-code-zh/skills/frontend-slides ~/.claude/skills/frontend-slidesFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
Can I create animated HTML presentations from scratch with frontend-slides?
Yes. Frontend Slides lets you build animated HTML presentations from the ground up, creating self-contained slide decks that run entirely in any browser without external dependencies. You can design unique, production-ready slides with animations and transitions built directly into the HTML.
Does frontend-slides convert PowerPoint to HTML slides?
Frontend Slides supports converting PowerPoint files (PPT/PPTX) into interactive web-based presentations. Your existing decks transform into browser-native slide shows that maintain interactivity while gaining the benefits of web-based delivery and animation capabilities.
What makes frontend-slides different for designing pitch decks?
Frontend Slides includes visual style discovery tools that help you design unique pitch decks without relying on templates or abstract questionnaires. Non-designers can explore aesthetics directly and create production-ready decks with animations and visual effects tailored to their vision.
Is frontend-slides a zero-dependency HTML presentation generator?
Yes. Frontend Slides builds presentations as self-contained HTML files with no external dependencies, meaning your slide decks work in any browser without requiring additional libraries or server infrastructure. This makes sharing and deploying presentations simple and reliable.
Can I enhance existing HTML slides with frontend-slides?
Frontend Slides can improve existing HTML presentations by adding better layouts, animations, transitions, and typography. Whether you're starting fresh or refining current slides, the tool helps you create engaging, responsive slide decks with motion graphics and visual polish.
How do I build an interactive web-based slideshow with frontend-slides?
Frontend Slides lets you build interactive web-based slideshows by either converting PowerPoint files or creating presentations from scratch using HTML. Your resulting decks are fully self-contained, browser-native, and ready to share—no dependencies or external tools needed.
SKILL.md
rendered from the published skill — quoted content, verbatim
前端幻灯片（Frontend Slides）
创建完全在浏览器中运行、零依赖、动画丰富的 HTML 演示文稿。
受 zarazhangrui 作品中展示的视觉探索方法的启发（致谢：@zarazhangrui）。
激活时机（When to Activate）
- 创建演讲幻灯片组（Talk deck）、路演幻灯片组（Pitch deck）、工作坊幻灯片组或内部演示文稿
- 将
.ppt或.pptx幻灯片转换为 HTML 演示文稿 - 改进现有 HTML 演示文稿的布局、动态（Motion）或排版（Typography）
- 与尚不清楚其设计偏好的用户一起探索演示风格
硬性规定（Non-Negotiables）
- 零依赖（Zero dependencies）：默认生成一个包含内联 CSS 和 JS 的自包含 HTML 文件。
- 必须适配视口（Viewport fit）：每张幻灯片必须适配在一个视口内，且无内部滚动。
- 展示而非叙述（Show, don't tell）：使用视觉预览，而不是抽象的风格问卷。
- 独特的设计：避免通用的紫色渐变、白底 Inter 字体、看起来像模板的幻灯片组（Decks）。
- 生产质量：保持代码有注释、可访问、响应式且高性能。
在生成之前，请阅读 STYLE_PRESETS.md 以了解视口安全（Viewport-safe）的 CSS 基础、密度限制、预设目录和 CSS 注意事项。
工作流（Workflow）
1. 检测模式（Detect Mode）
选择一条路径：
- 新演示文稿：用户有主题、笔记或完整草稿
- PPT 转换：用户有 .ppt 或 .pptx
- 增强：用户已有 HTML 幻灯片并希望进行改进
2. 内容发现（Discover Content）
仅询问最少需要的信息： - 目的：路演、教学、会议演讲、内部更新 - 长度：短（5-10 页）、中（10-20 页）、长（20+ 页） - 内容状态：已完成的文案、粗略笔记、仅有主题
如果用户有内容，请他们在开始设计风格前粘贴内容。
3. 风格发现（Discover
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/frontend-slides/SKILL.md
skills/frontend-slides/STYLE_PRESETS.md