claudegoodies
Skill

frontend-slides

From affaan-m

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.

Generates self-contained HTML/CSS/JS presentations from a topic, notes, or PPT/PPTX file.

Use it when

  • Building a talk, pitch, or workshop deck as a single HTML file
  • Converting an existing .ppt/.pptx into web slides
  • Improving layout, motion, or typography of an existing HTML deck
  • Exploring visual styles via preview slides when unsure of design direction

Skip it if

  • Needs multi-file or framework-based (React/Vue) presentation output
  • PPT conversion depends on python-pptx being installed or accepted
  • Wants heavy content density; tool enforces strict per-slide limits and single-viewport fit

Facts

Repository
affaan-m/ECC
Status
Actively maintained
Last commit
Source file
.agents/skills/frontend-slides/SKILL.md

Source preview

The instructions Claude Code reads when this skill runs.

# Frontend Slides

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.

Inspired by the visual exploration approach showcased in work by [zarazhangrui](https://github.com/zarazhangrui).

## When to Activate

- Creating a talk deck, pitch deck, workshop deck, or internal presentation
- Converting `.ppt` or `.pptx` slides into an HTML presentation
- Improving an existing HTML presentation's layout, motion, or typography
- Exploring presentation styles with a user who does not know their design preference yet

## Non-Negotiables

1. **Zero dependencies**: default to one self-contained HTML file with inline CSS and JS.
2. **Viewport fit is mandatory**: every slide must fit inside one viewport with no internal scrolling.
3. **Show, don't tell**: use visual previews instead of abstract style questionnaires.
4. **Distinctive design**: avoid generic purple-gradient, Inter-on-white, template-looking decks.
5. **Production quality**: keep code commented, accessible, responsive, and performant.

Before generating, read `STYLE_PRESETS.md` for the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas.

## Workflow

### 1. Detect Mode

Choose one path:
- **New presentation**: user has a topic, notes, or full draft
- **PPT conversion**: user has `.ppt` or `.pptx`
- **Enhancement**: user already has HTML slides and wants improvements

#
View full source on GitHub →

Other skills