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.
How to install frontend-slides?
zarazhangrui/frontend-slides
$npx -y skills add zarazhangrui/frontend-slides --skill frontend-slidesInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/zarazhangrui/frontend-slides" --skill "zarazhangrui/frontend-slides"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/zarazhangrui/frontend-slides" that are relevant to the current task. Run `npx skills add "https://github.com/zarazhangrui/frontend-slides"` and select the relevant skills, then follow their instructions.
SKILL.md
| 1 | # Frontend Slides |
| 2 | |
| 3 | A coding-agent skill for creating stunning HTML presentations — from scratch or by converting PowerPoint files. It is packaged as a Claude Code plugin, and the core `SKILL.md` can also be read by other coding agents with filesystem and shell access. |
| 4 | |
| 5 | ## 📺 Watch the Walkthrough & Tutorial |
| 6 | |
| 7 | New here? This beginner-friendly video walks you through the whole thing, start to finish. |
| 8 | |
| 9 | <a href="https://www.youtube.com/watch?v=372Iksaz8b0" title="Frontend Slides — walkthrough & tutorial (beginner-friendly)"> |
| 10 | <img src="https://img.youtube.com/vi/372Iksaz8b0/maxresdefault.jpg" alt="Watch the Frontend Slides walkthrough and tutorial on YouTube" width="100%" /> |
| 11 | </a> |
| 12 | |
| 13 | > ▶️ **[Watch on YouTube →](https://www.youtube.com/watch?v=372Iksaz8b0)** (beginner-friendly walkthrough and tutorial) |
| 14 | |
| 15 | ## What This Does |
| 16 | |
| 17 | **Frontend Slides** helps non-designers create beautiful web presentations without knowing CSS or JavaScript. It uses a "show, don't tell" approach: instead of asking you to describe your aesthetic preferences in words, it generates visual previews and lets you pick what you like. |
| 18 | |
| 19 | Here is a deck about the skill, made through the skill: |
| 20 | |
| 21 | https://github.com/user-attachments/assets/ef57333e-f879-432a-afb9-180388982478 |
| 22 | |
| 23 | ### Key Features |
| 24 | |
| 25 | - **Zero Dependencies** — Single HTML files with inline CSS/JS. No npm, no build tools, no frameworks. |
| 26 | - **Visual Style Discovery** — Can't articulate design preferences? No problem. Pick from generated visual previews. |
| 27 | - **PPT Conversion** — Convert existing PowerPoint files to web, preserving all images and content. |
| 28 | - **Anti-AI-Slop** — Curated distinctive styles that avoid generic AI aesthetics (bye-bye, purple gradients on white). |
| 29 | - **Bold Template Pack** — Optional design-forward templates from `beautiful-html-templates`, loaded progressively so safe presets still work as the default fallback. |
| 30 | - **Production Quality** — Accessible, fixed 16:9, well-commented code you can customize. |
| 31 | |
| 32 | ## Installation |
| 33 | |
| 34 | ### Via Claude Code Custom Marketplace Source |
| 35 | |
| 36 | Install directly from this public GitHub repo. Run these as two separate Claude Code messages; do not paste both lines into the prompt at once. |
| 37 | |
| 38 | ```text |
| 39 | /plugin marketplace add https://github.com/zarazhangrui/frontend-slides |
| 40 | ``` |
| 41 | |
| 42 | After that finishes, run: |
| 43 | |
| 44 | ```text |
| 45 | /plugin install frontend-slides@frontend-slides |
| 46 | ``` |
| 47 | |
| 48 | Use the HTTPS URL. The shorter `zarazhangrui/frontend-slides` form may make Claude Code try SSH, which can fail if GitHub is not already in your `known_hosts` file. |
| 49 | |
| 50 | Then use it by typing `/frontend-slides:frontend-slides` in Claude Code. Claude Code namespaces plugin-installed skills as `/plugin-name:skill-name`. |
| 51 | |
| 52 | ### Claude Code Manual Installation |
| 53 | |
| 54 | Copy the skill files to your Claude Code skills directory: |
| 55 | |
| 56 | ```bash |
| 57 | # Create the skill directory |
| 58 | mkdir -p ~/.claude/skills/frontend-slides/scripts |
| 59 | |
| 60 | # Copy the user-facing skill files |
| 61 | cp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.claude/skills/frontend-slides/ |
| 62 | cp -R bold-template-pack ~/.claude/skills/frontend-slides/ |
| 63 | cp scripts/extract-pptx.py scripts/deploy.sh scripts/export-pdf.sh ~/.claude/skills/frontend-slides/scripts/ |
| 64 | ``` |
| 65 | |
| 66 | Or clone directly: |
| 67 | |
| 68 | ```bash |
| 69 | git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides |
| 70 | ``` |
| 71 | |
| 72 | Then use it by typing `/frontend-slides` in Claude Code. Standalone skills are not namespaced. |
| 73 | |
| 74 | ### Other Coding Agents |
| 75 | |
| 76 | Agents such as Codex, Kimi Code, OpenCode, Gemini CLI, or other local coding assistants can use the same core skill. The simplest path is to send the agent this GitHub repo link and ask it to use the Frontend Slides skill: |
| 77 | |
| 78 | ```text |
| 79 | https://github.com/zarazhangrui/frontend-slides |
| 80 | ``` |
| 81 | |
| 82 | If the agent can read GitHub repos or browse files, it should start from `SKILL.md` and load only the referenced support files it needs: |
| 83 | |
| 84 | - `STYLE_PRESETS.md` |
| 85 | - `viewport-base.css` |
| 86 | - `html-template.md` |
| 87 | - `animation-patterns.md` |
| 88 | - `bold-template-pack/` |
| 89 | - `scripts/` |
| 90 | |
| 91 | Some agents can also install the skill for you if they have filesystem access and a known local skills directory. If not, they can still follow `SKILL.md` directly for the current session. |
| 92 | |
| 93 | The Claude Code plugin gives Claude Code a custom marketplace-source install flow and `/frontend-slides:frontend-slides` command. Other agents usually do not use that command surface. |
| 94 | |
| 95 | ## Usage |
| 96 | |
| 97 | ### Create a New Presentation |
| 98 | |
| 99 | ```text |
| 100 | /frontend-slides:frontend-slides |
| 101 | |
| 102 | > "I want to create a pitch deck for my AI startup" |
| 103 | ``` |
| 104 | |
| 105 | If installed manually as a standalone Claude Code skill, use `/frontend-slides` instead. |
| 106 | |
| 107 | In non-Claude agents, ask the agent to use the Frontend Slides skill and point it at this repo or `SKILL.md`. |
| 108 | |
| 109 | The skill will: |
| 110 | |
| 111 | 1. Ask about your content (slides, messages, images) |
| 112 | 2. Generate 3 visual style previews for you to compare, inferring the vibe from your brief unless you already named one |
| 113 | 3. Let you pick the visual direction |
| 114 | 4. Create the full presentation in your chosen style |
| 115 | 5. Open it in your browser |
| 116 | |
| 117 | ## |
Related
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site…Jul 2026
- prototypeBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a…Jul 2026
- lark-whiteboard飞书画板：查询和编辑飞书云文档中的画板。支持导出画板为预览图片、导出原始节点结构、使用多种格式更新画板内容。 当用户需要查看画板内容、导出画板图片、编辑画板时使用此 skill。不负责：飞书云文档内容编辑（lark-doc）、文档内嵌电子表格/Base（lark-sheets / lark-base）。Jul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX…Jul 2026
- design-guidePaperclip UI design system guide for building consistent, reusable frontend components.Jul 2026
- impeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or…Jul 2026
