frontend-slides-frontend-slides
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...
Profile →npx skills add sickn33/agentic-awesome-skills --skill frontend-slides-frontend-slides --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.
How it works
- Phase 0: Detect Mode to choose between New Presentation, PPT Conversion, or Enhancement, with explicit modification rules for Phase C.
- Phase 1: Content Discovery for new presentations, asking purpose, length, content readiness, and density, then optionally evaluating images and co-designing outline.
- Phase 2: Style Discovery where 3 distinct single-slide HTML previews are generated to compare typography, colors, and animation without asking for options. Uses Safe presets from STYLE_PRESETS.md and bold templates from bold-template-pack/selection-index.json, plus a wildcard design. Previews saved to .frontend-slides/slide-previews/ and opened automatically.
- Phase 2.1: User picks a style through a selection of Style A/B/C or Mix elements.
- Phase 3: Generate Presentation using content from Phase 1 and the chosen style, applying density settings to layout and slide count.
When to use it
Use when you need to create animation-rich HTML presentations from scratch or convert PPT/PPTX to web, especially if you want a distinctive, non-generic frontend aesthetic and a fixed 1920×1080 stage.
What it can touch
- Reads and uses content from Phase 1 (text, images if provided).
- Outputs previews to .frontend-slides/slide-previews/ and final deck as HTML/CSS/JS within the phase process.
Caveats
- Requires adherence to a fixed 1920×1080 stage; content must fit within density constraints with slide-splitting if needed.
- Uses zero-dependency HTML files with inline CSS/JS; no npm or build steps.
- Risk level labeled as critical in the skill metadata.
# Frontend Slides ## When to Use Use this skill when you need 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... 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 Ae
- When to Use
- Core Principles
- Design Aesthetics
- Fixed Stage Rules
- Content Density Modes
- Phase 0: Detect Mode
- Mode C: Modification Rules
- Phase 1: Content Discovery (New Presentations)
- Step 1.2: Image Evaluation (if images provided)
- Phase 2: Style Discovery
- Step 2.0: Generate 3 Style Previews Directly
- Step 2.1: User Picks
- Phase 3: Generate Presentation
- Phase 4: PPT Conversion
bash scripts/deploy.sh <path-to-presentation> bash scripts/export-pdf.sh <path-to-html> [output.pdf] bash scripts/export-pdf.sh <path-to-html> [output.pdf] --compact
What does the frontend-slides-frontend-slides skill do?
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...
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill frontend-slides-frontend-slides --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.