Loading
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 ta
The skill file stays in the publisher's repository.
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
npx skills add zarazhangrui/frontend-slides --skill frontend-slides -a cursor -y
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.
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.
Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.
design.md only after the user picks that template.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:
Avoid generic AI-generated aesthetics:
Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!
These invariants apply to EVERY slide in EVERY presentation:
.active / .visible using visibility, opacity, and pointer-events from viewport-base.css. Do not use display: none / display: block for slide switching; later layout classes such as .slide-content { display: flex; } can override them and make every slide visible at once.clamp() only for non-slide UI outside the stage, or for small fallback previews where a full stage is impractical.prefers-reduced-motion support-clamp(), -min(), -max() are silently ignored) — use calc(-1 * clamp(...)) insteadWhen generating, read viewport-base.css and include its full contents in every presentation.
Ask the user whether this is primarily a reading deck or a speaking deck, then design around that answer:
| Density mode | Best for | Design behavior |
|---|---|---|
| Low density / speaker-led | Public talks, keynote-style sharing, live explanation | One idea per slide, large type, strong visual hierarchy, generous negative space, 1-3 bullets max, more slides if needed |
| High density / reading-first | Reports, handouts, async review, detailed internal docs | More self-contained slides, structured grids/tables/annotations, 4-8 bullets or 4-6 cards when readable, tighter but still intentional spacing |
Baseline limits still apply: no scrolling, no overflow, no overlapping panels, and no text below comfortable reading size. If content exceeds the selected density mode, split it into more slides instead of shrinking until it becomes cramped.
Determine what the user wants:
When enhancing existing presentations, fixed-stage fitting is the biggest risk:
When adding images to existing slides: Move image to a new slide or reduce other content first. Never add images without checking if existing content already fills the 1920×1080 slide stage.
Ask ALL questions together so the user fills everything out at once. If the current environment provides a native structured-question UI, use it; otherwise ask in one concise message with clearly numbered choices:
Question 1 — Purpose (header: "Purpose"): What is this presentation for? Options: Pitch deck / Teaching-Tutorial / Conference talk / Internal presentation
Question 2 — Length (header: "Length"): Approximately how many slides? Options: Short 5-10 / Medium 10-20 / Long 20+
Question 3 — Content (header: "Content"): Do you have content ready? Options: All content ready / Rough notes / Topic only
Question 4 — Density (header: "Density"): How dense should the deck feel? Options:
Do not ask about inline editing during Phase 1. Users should not have to choose editing behavior before seeing a draft. Inline editing is a post-draft affordance: include it by default unless the user explicitly asks for a locked/export-only file.
Remember the user's density choice. It affects slide count, typography scale, amount of text per slide, layout density, and whether to favor cinematic presenter slides or self-contained reading slides.
If user has content, ask them to share it.
If user selected "No images" → skip to Phase 2.
If user provides an image folder:
Logo in previews: If a usable logo was identified, embed it (base64) into each style preview in Phase 2 — the user sees their brand styled three different ways.
This is the "show, don't tell" phase. Most people can't articulate design preferences in words.
Based on purpose, audience, mood, and content density, generate 3 distinct single-slide HTML previews showing typography, colors, animation, and overall aesthetic.
Do not ask the user whether they want options or a preset picker. The default discovery experience is always visual comparison.
If the user already gave a vibe, use it. If they did not, infer the likely mood from the occasion, audience, content, and stakes. Keep the options diverse enough that the user can react visually instead of needing to articulate taste up front.
If the user explicitly names a preset or bold template, honor that as one option and generate the remaining preview slots around it.
Read STYLE_PRESETS.md for safe preset candidates. If bold-template-pack/selection-index.json exists, read that compact index too, but do not read any design.md files yet.
| Mood | Suggested Presets |
|---|---|
| Impressed/Confident | Bold Signal, Electric Studio, Dark Botanical |
| Excited/Energized | Creative Voltage, Neon Cyber, Split Pastel |
| Calm/Focused | Notebook Tabs, Paper & Ink, Swiss Modern |
| Inspired/Moved | Dark Botanical, Vintage Editorial, Pastel Geometry |
Preview mix rules:
STYLE_PRESETS.md, at least 1 bold template from bold-template-pack/selection-index.json, and 1 wildcard.Custom wildcard design rules:
Bold template selection rules:
mood, tone, best_for, avoid_for, formality, density, and scheme.best_for examples as soft signals, not strict industry filters.preview.md files from the preview_md paths in the selection index.preview.md only for title-slide previews. Do not read full design.md files until the user picks the final template.template.html unless the selected final design.md is missing a critical implementation detail.Preview authenticity rules (NON-NEGOTIABLE):
preview, generated from, preview.md, template, preset, style option, Option A/B/C, file names, paths, or source-doc labels.Save previews to .frontend-slides/slide-previews/ (style-a.html, style-b.html, style-c.html). Each should be self-contained and compact, showing one animated title slide.
Open each preview automatically for the user.
Ask (header: "Style"): Which style preview do you prefer? Options: Style A: [Name] / Style B: [Name] / Style C: [Name] / Mix elements
If "Mix elements", ask for specifics.
Generate the full presentation using content from Phase 1 (text, or text + curated images) and style from Phase 2.
If images were provided, the slide outline already incorporates them from Step 1.2. If not, CSS-generated visuals (gradients, shapes, patterns) provide visual interest — this is a fully supported first-class path.
Apply the user's density choice throughout the deck:
If the user's stated needs are mixed, choose the closer of the two modes instead of inventing a middle option: live audience persuasion defaults low-density; async circulation or detailed review defaults high-density.
Never let high density become visual clutter. If a high-density slide starts to overflow, split it or redesign it into a clearer structure.
If the user selected a bold template from bold-template-pack, read that one template's full design.md before generating. Do not read the other bold templates. Treat design.md as the design recipe:
deck-stage.js or viewport-fluid CSS.design.md as design proportions to translate into 1920×1080 stage coordinates. Do not keep them as live viewport reflow rules in the final deck.template.html only as a last-resort implementation reference for the selected template.scrollHeight checks alone are not enough because grid panels can visually cover each other.If the user selected a self-generated custom wildcard, treat that preview's CSS and layout as the design recipe:
Before generating, read these supporting files:
Key requirements:
<style> block/* === SECTION NAME === */ comment blockWhen converting PowerPoint files:
python scripts/extract-pptx.py <input.pptx> <output_dir> (install python-pptx if needed: pip install python-pptx).frontend-slides/slide-previews/ if it existsopen [filename].html to launch in browser:root CSS variables for colors, font link for typography, .reveal class for animationsAfter delivery, ask the user: "Would you like to share this presentation? I can deploy it to a live URL (works on any device including phones) or export it as a PDF."
Options:
If the user declines, stop here. If they choose one or both, proceed below.
This deploys the presentation to Vercel — a free hosting platform. The link works on any device (phones, tablets, laptops) and stays live until the user takes it down.
If the user has never deployed before, guide them step by step:
Check if Vercel CLI is installed — Run npx vercel --version. If not found, install Node.js first (brew install node on macOS, or download from https://nodejs.org).
Check if user is logged in — Run npx vercel whoami.
vercel login and follow the prompts (it opens a browser window to authorize)vercel whoamiDeploy — Run the deploy script:
bash scripts/deploy.sh <path-to-presentation>
The script accepts either a folder (with index.html) or a single HTML file.
Share the URL — Tell the user:
⚠ Deployment gotchas:
src="..." in the HTML and bundles them. But if the presentation references files via CSS background-image or unusual paths, those may be missed. Before deploying, verify: open the deployed URL and check that all images load. If any are broken, the safest fix is to put the HTML and all its assets into a single folder and deploy the folder instead of a standalone HTML file.my-deck/index.html + my-deck/logo.png), deploy the folder directly: bash scripts/deploy.sh ./my-deck/. This is more reliable than deploying a single HTML file because the entire folder contents are uploaded as-is.%20. If possible, avoid spaces in image filenames. If the user's images have spaces, the script handles it — but if images still break, renaming files to use hyphens instead of spaces is the fix.This captures each slide as a screenshot and combines them into a PDF. Perfect for email attachments, embedding in documents, or printing.
Note: Animations and interactivity are not preserved — the PDF is a static snapshot. This is normal and expected; mention it to the user so they're not surprised.
Run the export script:
bash scripts/export-pdf.sh <path-to-html> [output.pdf]
If no output path is given, the PDF is saved next to the HTML file.
What happens behind the scenes (explain briefly to the user):
If Playwright installation fails:
npx playwright install chromiumDeliver the PDF — The script auto-opens it. Tell the user:
⚠ PDF export gotchas:
class="slide". The export script finds slides by querying .slide elements. If the presentation uses a different class name, the script will report "0 slides found" and fail. All presentations generated by this skill use .slide, so this only matters for externally-created HTML.src="/Users/name/photo.png") instead of relative paths (e.g., src="photo.png"), they won't load. Generated presentations always use relative paths, but converted or user-provided decks might not — check and fix if needed.src="photo.png" resolve correctly — including filenames with spaces. If images still don't appear, check: (1) the image files actually exist at the referenced path, (2) the paths are relative, not absolute filesystem paths like /Users/name/photo.png.--compact flag:
bash scripts/export-pdf.sh <path-to-html> [output.pdf] --compact
| File | Purpose | When to Read |
|---|---|---|
| STYLE_PRESETS.md | 12 curated visual presets with colors, fonts, and signature elements | Phase 2 (style selection) |
| bold-template-pack/selection-index.json | Compact bold template metadata for candidate selection | Phase 2 (style selection) |
| bold-template-pack/templates/*/preview.md | Lightweight style cards for shortlisted bold title previews | Phase 2 after shortlisting |
| bold-template-pack/templates/*/design.md | Detailed design-system docs for the selected bold template only | Phase 3 after user selection |
| viewport-base.css | Mandatory fixed-stage CSS — copy into every presentation | Phase 3 (generation) |
| html-template.md | HTML structure, JS features, code quality standards | Phase 3 (generation) |
| animation-patterns.md | CSS/JS animation snippets and effect-to-feeling guide | Phase 3 (generation) |
| scripts/extract-pptx.py | Python script for PPT content extraction | Phase 4 (conversion) |
| scripts/deploy.sh | Deploy slides to Vercel for instant sharing | Phase 6 (sharing) |
| scripts/export-pdf.sh | Export slides to PDF | Phase 6 (sharing) |