A Claude Code skill for creating high-impact HTML slide decks with polished motion, fragments, themes, canvas visuals, and presentation-first storytelling.
Pro Frontend Slides is built for moments when a normal webpage is not enough and a static slide deck is too flat. It helps Claude generate keynote-like HTML presentations that are easier to present, easier to theme, and easier to evolve.
Most AI-generated slides fail in the same ways: too much text, weak pacing, generic styling, and layouts that break at presentation size.
This skill is designed to avoid that by enforcing:
- presentation-first composition
- viewport-safe slides
- stronger motion and reveal pacing
- reusable storytelling patterns
- optional pro features for live presenting
| Capability | What It Enables |
|---|---|
| New presentations | Create a slide deck from a topic, notes, or full content |
| PPTX conversion | Convert PowerPoint content into HTML slides |
| Deck enhancement | Upgrade an existing HTML presentation |
| Fragment reveals | Reveal content step by step with Space |
| Theme switching | Switch among live themes while presenting |
| Cinematic transitions | Use Fade / Slide / Zoom / Flip transitions |
| Drawing mode | Annotate slides live with a canvas overlay |
| Data storytelling | Animate counters and charts for metric-heavy slides |
| Export-ready output | Generate self-contained HTML suitable for sharing and printing |
This skill is a good fit if you want Claude to help with:
- pitch decks
- technical talks
- product demos
- launch presentations
- educational explainers
- data storytelling slides
- keynote-style HTML decks
The upstream frontend-design workflow is great for beautiful interfaces and pages.
Pro Frontend Slides is optimized specifically for presentation work:
- stronger pacing
- staged reveals
- presentation-oriented composition
- live theme switching
- better support for demos, talks, and storytelling decks
- stricter viewport rules to avoid broken slides
- Put this repository in your Claude Code skills directory.
- Make sure Claude Code can access the skill files.
- Invoke the skill when you want HTML presentations instead of generic webpages.
If you are packaging or sharing it with others, keep the supporting files next to SKILL.md so the skill can read its references.
Use prompts like these:
Create a 10-slide product launch presentation with bold motion and fragment reveals.
Convert this PPTX into HTML slides with a dark cinematic theme.
Improve this existing slide deck and make it feel more keynote-like.
If you want the fastest way to feel what this skill is good at, start with one of these:
- Launch deck — create a bold product presentation with fragments and transitions
- PPTX upgrade — convert an existing PowerPoint into a cleaner HTML deck
- Deck polish — take an existing HTML deck and improve pacing, hierarchy, and visuals
Suggested first prompts:
Create a product launch deck with high-energy visuals and cinematic transitions.
Convert this PPTX into keynote-like HTML slides.
Improve this existing deck and reduce text density while making it more presentation-ready.
More ready-to-copy prompts and showcase material are available here:
At a high level, the skill will:
- detect whether the task is new creation, PPT conversion, or deck enhancement
- gather content and presentation goals
- choose a style path or show style options
- read the necessary reference files
- generate a self-contained HTML presentation
- optionally support export, deployment, or enhancement workflows
| File | Purpose |
|---|---|
SKILL.md |
Main skill definition and execution rules |
STYLE_PRESETS.md |
Visual style presets and aesthetic directions |
animation-patterns.md |
Motion and transition reference |
html-template.md |
Base HTML presentation architecture |
pro-frontend-skill.md |
Advanced presentation systems and pro features |
viewport-base.css |
Mandatory viewport-safe slide foundation |
scripts/ |
Helper tooling for PPT extraction, export, and deployment |
docs/ |
Installation and usage guidance |
examples/ |
Example prompts and usage patterns |
The generated presentation output is designed to be:
- a single self-contained HTML file
- inline CSS/JS
- no build step required to view it in the browser
Some helper workflows may require extra tools:
- PPT extraction may require Python packages such as
python-pptx - Image processing may require Pillow
- PDF export may require Playwright or other browser tooling
- Deployment may require Vercel CLI or other hosting tools
The important distinction is:
- the generated slides are lightweight and build-free
- some helper scripts are optional and may have dependencies
docs/INSTALL.md— install notes and setup expectationsdocs/USAGE.md— common workflows and when to use each modeexamples/prompts.md— example prompts for common scenariosexamples/before-after.md— transformation-oriented examplesexamples/showcase.md— scenario-based showcase of expected outcomespro-frontend-skill.md— advanced features such as fragments, transitions, themes, controls, and drawing
Description
A Claude Code skill for generating high-impact HTML slide decks with animations, themes, fragments, and presentation-first storytelling.
Suggested topics
claude-code, skill, slides, presentation, html-slides, animation, storytelling, pptx, frontend
Primarily slide decks. The output is presentation-first HTML, not a generic landing page.
No build step is required for the generated HTML itself.
Yes. The skill supports PPT conversion workflows, with optional helper scripts.
Yes. One of the core modes is enhancing an existing HTML presentation.
MIT