Jonathon's AI Wiki

Frontend Slides (zarazhangrui) — Zero-Dependency HTML Presentation Skill

8 min read

Source: github.com/zarazhangrui/frontend-slides (MIT, 15.5k stars) + RoboNuggets video walkthrough (12:17, Apr 24 2026)

Frontend Slides is an MIT-licensed Claude Code skill by @zarazhangrui that generates zero-dependency, animation-rich HTML presentations from a prompt or by converting a .pptx. Single HTML file per deck (inline CSS/JS), 12 curated visual presets, “show, don’t tell” style discovery, optional Vercel deploy and Playwright-based PDF export. Installs as a Claude Code plugin from its own marketplace. The go-to public skill for Claude-generated decks as of April 2026.

Key Takeaways

  • Zero dependencies. Every output is a single self-contained HTML file with all CSS/JS inline. No npm, no build step, no framework lock-in. Will still work in a browser a decade from now.
  • “Show, don’t tell” style discovery. Instead of asking you to describe your aesthetic in words, the skill generates three single-slide previews from your mood (Impressed / Excited / Calm / Inspired) and you pick one. Non-designers make useful choices by reaction.
  • 12 curated presets grouped Dark / Light / Specialty: Bold Signal, Electric Studio, Creative Voltage, Dark Botanical, Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial, Neon Cyber, Terminal Green, Swiss Modern, Paper & Ink. Each preset ships with font pairs (Fontshare / Google Fonts — never system fonts), color tokens, layout conventions, and signature elements.
  • Viewport-fitting is a hard rule. Every .slide locks to 100vh / 100dvh with overflow: hidden; every size uses clamp(min, preferred, max); breakpoints at 700/600/500px viewport heights; prefers-reduced-motion respected. Content that would overflow must be split into another slide — never scroll within a slide.
  • Per-slide density caps are published: 1 heading + 4–6 bullets OR 2 paragraphs; feature grids max 6 cards; code slides max 10 lines; quote slides max 3-line quote + attribution.
  • PPT conversion path. scripts/extract-pptx.py (via python-pptx) pulls text, images, and speaker notes from a .pptx; the skill re-renders them in the chosen HTML preset. Good migration path off PowerPoint for decks you want to host on the web.
  • Anti-”AI slop” design opinion. Explicit DO-NOT-USE list in the skill: Inter / Roboto / Arial as display, purple gradients on white, generic indigo (#6366f1), glassmorphism without purpose, realistic illustrations. The skill nudges Claude away from the converged defaults.
  • Progressive disclosure architecture — the main SKILL.md is ~180 lines; STYLE_PRESETS.md, viewport-base.css, html-template.md, animation-patterns.md, and scripts/*.sh|.py load only when the skill enters the relevant phase. Matches Agent Skills’ official 3-level progressive disclosure model.
  • Share paths — one-command Vercel deploy (scripts/deploy.sh) for a shareable live URL, or Playwright-based PDF export (scripts/export-pdf.sh) that screenshots each slide at 1920×1080. Animations are lost in the PDF (static snapshot).
  • RoboNuggets walkthrough (Jay E) structures the skill as three levels: Level 1 vanilla install, Level 2 custom presets / paid components overlay, Level 3 agentic composition (Skills + Routines delegation for end-to-end deck builds).

Installation

Two CLI commands, in order:

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

Gotcha: the shorthand /plugin marketplace add zarazhangrui/frontend-slides defaults to SSH and fails with a public-key error on machines that don’t have GitHub SSH keys configured. Use the .git HTTPS URL above.

Manual clone path

git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides

Then /frontend-slides in Claude Code.

Implementation

  • Tool/Service: Frontend Slides (Claude Code skill/plugin)
  • Author: @zarazhangrui
  • License: MIT
  • Stars: 15,519 (2026-04-24)
  • Install scope: user-wide via Claude Code plugin marketplace
  • Runtime cost: free skill; Claude usage burns against your Claude.ai or API plan per generation. PPT conversion needs python-pptx. URL deploy needs a free Vercel account. PDF export auto-installs Playwright (~150MB Chromium download on first run).
  • Integration notes:
    • Bundled plugin structure at plugins/frontend-slides/.claude-plugin/plugin.json (name frontend-slides, version 1.0.0, category productivity).
    • Marketplace manifest at .claude-plugin/marketplace.json uses the official anthropic.com/claude-code/marketplace.schema.json schema — this is a first-class Claude Code plugin, not an ad-hoc skill drop.
    • Skill files (SKILL.md, STYLE_PRESETS.md, viewport-base.css, html-template.md, animation-patterns.md) live at both repo root AND plugins/frontend-slides/skills/frontend-slides/ via relative symlinks — the symlinks depend on the marketplace clone location, so don’t move the folder after install.
    • The skill defines strict workflow phases: Mode detection → Content discovery → Style discovery → Generate → Delivery → Optional share. Modification rules are explicit for Mode C (enhancement of existing decks).

Known gotchas from SKILL.md

  • Never negate a CSS function directly. right: -clamp(...) is silently ignored by browsers. Use right: calc(-1 * clamp(...)) instead. The skill calls this out because it’s a common Claude generation error.
  • Nav-dot containers must clear before rebuilding. Use replaceChildren() (or similar) rather than appending, or re-opening a saved file duplicates the dots. This also avoids tripping XSS-shaped security hooks that flag innerHTML = writes.
  • Inline editing is opt-in only. If the user declines editing in the content-discovery phase, the skill must emit zero edit-mode HTML/CSS/JS — not just hide the UI. Keeps the file smaller and avoids leaving dormant XSS surface on shared decks.
  • Filenames with spaces break Vercel deploys subtly. The deploy script handles them but URLs encode %20. Rename assets to hyphens before deploying if images fail to load.
  • First PDF export is slow — Playwright downloads Chromium (~150MB) to a temp dir on first run. Subsequent runs are fast within the same session.

Why This Matters for WEO Work

  • Instant client decks without Canva/Keynote lock-in. Brief Claude, pick a preset, export PDF or deploy to a URL. Pitch decks, QBR templates, one-pager client summaries now have a code path that doesn’t require a design tool.
  • Course artifacts are already using this pattern. The Claude Onboarding course publishes its 9 slide decks via a similar Marp-to-PDF pipeline, hosted on Cloudflare as /claude-onboarding/decks/*.pdf. Frontend Slides extends that pattern to any deliverable (not just courseware).
  • Paper & Ink + JetBrains Mono matches this wiki’s design voice (editorial serif + monospace technical accents). The first test deck generated through the skill for this project rendered in that style — see output/karpathy-wiki-deck.html.
  • Agentic deck builds — Jay E’s Level-3 framing (Skills + Routines for research → outline → design → export delegation) is directly applicable to WEO’s scheduled client-deliverable automation (weekly QBR drafts, monthly client KPI one-pagers, campaign pitch decks on demand).

Try It

  1. Install. 
    /plugin marketplace add https://github.com/zarazhangrui/frontend-slides.git
/plugin install frontend-slides@frontend-slides
/reload-plugins
  2. Invoke. Type /frontend-slides and describe the deck you want — e.g., “a 7-slide pitch deck for Smile Springs Family Dental’s Invisalign service line.”
  3. Pick a mood from the four options (Impressed / Excited / Calm / Inspired). The skill generates three visual previews.
  4. Pick a preview (A / B / C). The skill generates the full deck in that aesthetic.
  5. Customize — the deck’s :root CSS variables let you retune colors; font imports swap typography; .reveal class drives animation timing. All inline — no build.
  6. Share. Offer is surfaced after generation: deploy to Vercel for a live URL or export to PDF. Both are single-command.
  7. For WEO reusability — save decks you’re proud of as templates. Same pattern as Claude Design templates (see Module 5): build once, reuse across clients.

Open Questions

  • Roadmap for more presets beyond 12? Jay E’s RoboNuggets paywalled component library (50+) hints that the base 12 is not the ceiling — but Zara hasn’t published a roadmap.
  • Skill + Claude Design interop. Can Frontend Slides accept a Claude Design export (HTML/PPTX) as input to re-theme in a different preset? Needs testing.
  • Enterprise deploy target beyond Vercel. For WEO’s dental-client decks, Vercel is fine for prospects but sensitive client work might need a private host. Worth confirming the deploy script is trivially portable to Cloudflare Pages or S3.

Graph View

Backlinks