Those beautiful keynote decks you see on stage. Then I open Google Slides and get the same tired text box every time.
Setup first, then the build, then the fun stuff at the end.
The web buys you a lot. It also asks for something back.
Nothing exotic. If you can run a coding agent, you are most of the way there.
Two skills do the work. One builds decks, one makes them editable later.
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides
npx skills add https://github.com/archlizheng/frontend-slides-editable --skill frontend-slides-editable
DESIGN.md holds the colors, type, and spacing. Maybe your company already has one. If not, pull a starter from a brand you like.
npx getdesign@latest add airbnb
npx getdesign@latest add clickhouse
DESIGN.md created
Drop a CLAUDE.md in the project. The agent reads it before every prompt.
Same skill, same DESIGN.md, three different agents. They are not the same.
Strongest at design sense and holding the whole system together across a deck.
Precise and structured. Follows instructions tightly, lighter on its own flair.
Surprisingly capable for the price. Great for fast drafts and quick iterations.
The single highest-leverage move. Build one slide you genuinely love, then point the agent at it every time.
I have just finished a slide deck and want to lock it in as my permanent design system reference for all future decks. Step 1 · Save the reference file Copy the current presentation HTML verbatim to REFERENCE.html in the project root. Do not modify it. Read-only from now on. Step 2 · Document the design system Create DESIGN.md covering: - Color tokens: all CSS variables (--block-lime, --block-lilac, --block-cream, --block-mint, --block-pink, --block-coral, --block-navy, --accent-magenta, --rec-red, --ink, --canvas) - Typography: Inter (weights 320-540), JetBrains Mono (400/500), display sizes via clamp(), weight carries hierarchy - Layout: 100vh slides, scroll-snap-type y mandatory, overflow hidden, scrollbar hidden, clamp() spacing - Chrome bars: exact HTML for chrome-top and chrome-bot - Right-rail navigator: fixed pill, dot per slide, hover labels - Color block slides: block-wrap > block > topic-layout pattern - Reveal system: .reveal + .reveal-1 to .reveal-6, IntersectionObserver Step 3 · Update CLAUDE.md Add or replace ## Slide decks: Before any new deck: read REFERENCE.html + DESIGN.md. Copy structure, never rebuild. Keep chrome, nav, tokens, scroll-snap, reveal system, and navigator identical. Only change slide content, count, and color block choices. No em-dashes. No emoji. No unreadable type sizes. Step 4 · Update AGENTS.md Add or replace ## Slide decks: Canonical reference: REFERENCE.html Design system: DESIGN.md Always read both before starting. Copy, do not rebuild. Validate at 1920x1080, 1280x720, 768x1024. Confirm zero em-dashes: grep -n "—" presentation.html Confirm all four files and show me their paths.
A slide is a web page. It can call an API and show live data while you present.
{
"status": "empty",
"hint": "Click Fetch above."
}
Add a live Pokémon API demo to this slide. Fetch: https://pokeapi.co/api/v2/pokemon/ditto Show in the right-side visual column: - Pokémon sprite (official artwork from sprites.other.official-artwork, fallback to front_default) - Stat grid: ID, type, base XP, height, weight, ability count - Scrollable list of ability buttons — clicking each fetches its linked URL and shows the English short_effect in the JSON console - Dark scrollable JSON console showing the raw API response Cache the root response in localStorage so it survives slide navigation. Block wheel and touchmove events on all scrollable areas so scroll-snap navigation is not triggered while the user scrolls inside the widget.
Financial-grade visuals drawn right on the slide. No image export, no chart library.
Add an interactive candlestick chart to this slide. Generate 140 days of deterministic OHLC data using a seeded LCG RNG (seed=7, starting close=$142, start date 2026-01-05). Draw on a dark SVG panel (background #111, viewBox 0 0 1180 720): - Green candles (#32d583) for up days, red (#ff385c) for down - Wick as a line, body as a rounded rect (min height 3px) - Y-axis price labels on the right, date labels bottom-left/right - Dashed crosshair on hover with a white dot at the close price Interactions: - Wheel zooms in/out anchored at pointer position (clamp 18–140 bars) - Pointer drag pans left/right with captured pointer events - Zoom In / Zoom Out / Reset buttons in a toolbar row above the chart - Hover tooltip shows date, open, high, low, close as $X.XX - Stat labels: visible bar count + hovered close price Block wheel events on the panel (passive: false + preventDefault) so scroll-snap navigation is not triggered while zooming.
Geography that responds. Pan, zoom, and highlight regions live in front of the room.
Add an interactive US election map to this slide using real state SVG paths from @svg-maps/usa on jsDelivr CDN. Fetch the JSON at runtime. Parse locations array — each entry has name, id (2-letter lowercase), and path (SVG d attr). Build a <svg viewBox="192 9 1028 746"> with all 51 paths. Color by 2024 presidential result: - Trump (R) states: fill #d24b46 - Harris (D) states: fill #3a74c4 - Stroke: slide background color, stroke-width 1.1 R: AL AK AZ AR FL GA ID IN IA KS KY LA MI MS MO MT NE NV NC ND OH OK PA SC SD TN TX UT WI WV WY D: CA CO CT DC DE HI IL ME MD MA MN NH NJ NM NY OR RI VA VT WA Interactions: - Hover: dim others to 0.4 opacity, highlight active state - Mouse leave: reset all states - Widen map column to ~63% of slide width Below the map, large typographic readout: - 56px colored badge with state abbreviation - State name in ~38px bold Inter - Mono line: "N electoral votes · Winner +margin" - Default: "United States · Hover a state · 538 electoral votes"
That is the honest question. Are you excited about what HTML slides let you do, or does it feel like a party trick? Tell me below.
Drop a comment below to say hi, share your thoughts on the topic, suggest corrections, or tell me what to cover next.