claudegoodies
Skill

frontend-slides

From zarazhangrui

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 zero-dependency HTML slide decks (from scratch or PPTX conversion) with a fixed 1920x1080 16:9 stage and animation-heavy styling.

Use it when

  • Building a talk/pitch deck as a single self-contained HTML file
  • Converting an existing .pptx file into a web presentation
  • Enhancing an existing HTML presentation while keeping 16:9 layout intact
  • Want CSS-driven animated slides without npm or a build toolchain

Skip it if

  • Need a responsive deck that reflows on phones (explicitly not supported)
  • Want a framework-based slide tool (React/Motion) rather than static HTML/CSS/JS
  • Need slides embedded in a larger app rather than standalone HTML files

Facts

Repository
zarazhangrui/frontend-slides
Status
Actively maintained
Last commit
Source file
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.

## Core Principles

1. **Zero Dependencies** — Single HTML files with inline CSS/JS. No npm, no build tools.
2. **Show, Don't Tell** — Generate visual previews, not abstract choices. People discover what they want by seeing it.
3. **Distinctive Design** — No generic "AI slop." Every presentation must feel custom-crafted.
4. **Progressive Disclosure** — Read lightweight style indexes first. For bold templates, use small preview cards for style previews and load the full `design.md` only after the user picks that template.
5. **Fixed 16:9 Stage (NON-NEGOTIABLE)** — Every deck uses a 1920×1080 slide canvas scaled as a whole to the viewport. Slides must stay 16:9 on every screen, including phones. Do not reflow slide content to fit the device.

## Design Aesthetics

You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.

Focus on:

- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics.
- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors
View full source on GitHub →

Other skills