Frontend Slides

Install

/plugin marketplace add https://github.com/zarazhangrui/frontend-slides
/plugin install frontend-slides@frontend-slides

This is third-party code. Review the repository files before installing.

What it does

The skill builds a presentation as a single HTML file with inline CSS and JS, with no npm or build step. Instead of asking about taste, the agent generates three previews in different styles and the user picks a direction visually. Each slide sits on a fixed 16:9 stage that scales as a whole, so layout holds on phones. It can extract text, images and notes from a PPTX and rebuild them as a web deck, and export to PDF.

Who it is for. For people preparing talks and pitches who do not want to lay out slides by hand.

Example request

Make a ten-slide deck about our startup and show me three style options

Limitations

The output is HTML, not an editable PPTX. PowerPoint conversion uses a Python script, and PDF export and deploy use shell scripts, so the agent needs file and shell access. The plugin command exists only in Claude Code; other agents read SKILL.md directly.

How to disable. Uninstall the frontend-slides plugin via /plugin or delete ~/.claude/skills/frontend-slides.

Security check

• Runs Python and shell scripts for conversion and export

README in short

The README covers installing as a Claude Code plugin, copying into ~/.claude/skills manually and using it in other agents via the repository link. It walks through two flows: a new deck and PPTX conversion. It lists built-in dark, light and specialty styles plus an optional bold template pack loaded only when chosen. MIT licensed.

SKILL.md

---
name: frontend-slides
description: 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.
---

# 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 with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.
- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions.
- Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.

Related