A Claude Code Skill
Jul 2026 · Coral Edition
FRONTEND SLIDES IN YOUR BROWSER
Single-file HTML decks · No build step
01 / 10
The Problem
02 / 10
SLIDES SHOULDN'T BE THIS HARD
SLIDEWARE FIGHTS YOU
Ribbon menus, snapping boxes, theme roulette — an hour of formatting for every ten minutes of content.
WEB DECKS WANT A TOOLCHAIN
The frameworks are lovely — after npm install, a config file, and a deploy story your talk never asked for.
AI DECKS LOOK LIKE AI DECKS
Purple gradients, centered clichés, cookie-cutter card grids — on-distribution design nobody remembers.
What It Is
ONE FILE.
ZERO BUILD STEPS.
Describe your talk to Claude Code and get back a finished presentation: a fixed 1920×1080 stage, entrance choreography, keyboard and touch navigation — all in one self-contained HTML file. Tailwind arrives from a CDN, fonts from Google Fonts. Nothing to install, nothing to compile, nothing to host.
PITCH-DECK.HTML
Ten slides. Styles, fonts, and script inlined. Opens anywhere a browser exists — laptop, phone, projector.
100%
Self-contained
The whole deliverable ↓
03 / 10
How It Works
04 / 10
FOUR STEPS TO A FINISHED DECK
DESCRIBE
Tell Claude the topic, the length, and whether you'll talk over it or send it around.
PICK A STYLE
Three real title slides render in front of you — taste by seeing, never by adjective.
GENERATE
Every slide lands on a proven layout preset, skinned by your chosen design system.
PRESENT
Arrow keys, swipe, or print straight to PDF.
By the Numbers
05 / 10
THE SYSTEM, MEASURED
88
Layout presets fixing slide structure
Across 23 slide slots
34
Bold template design systems
Coral is one of them
1
HTML file per deck — nothing else
Zero dependencies
Source / repository tree — Jul 2026
Frontend Slides
Layout Presets
STRUCTURE
COMES
SOLVED
A preset fixes geometry, hierarchy, and choreography on the 1920×1080 stage. The design system only supplies the skin — no slide is ever improvised.
01
OPENINGS · 13
Thirteen ways in — marquee, monolith, poster stack, dossier. The first slide is never a blank page.
02
EVIDENCE · 24
Seventeen chart grammars plus seven stat layouts. Honest baselines, one accent, no gridlines.
03
STORYTELLING · 38
Lists, sections, quotes, timelines, comparisons — the beats that carry the middle of an argument.
04
CLOSINGS · 13
Thirteen endings, from credits roll to split curtain. Decks land — they don't just stop.
Template Pack
TASTE IS
DISCOVERED,
NOT
DESCRIBED
Claude renders three genuine title slides — a safe preset, a bold template, a wildcard — and you point at the one that feels right.
07 / 10
Sampled From the Pack
CORAL
Magazine poster · this deck
BROADSIDE
Newsprint editorial
RETRO ZINE
Photocopy punk
NEO GRID BOLD
Hard grids, loud type
SAKURA CHROMA
Soft color, high chroma
MONOCHROME
One ink, all contrast
…and 28 more, each with its own full design system
Design Principle
08 / 10
“Show, don't tell. People discover their aesthetic by seeing options — never by describing them.
CORE PRINCIPLE N° 03
SKILL.md — Frontend Slides
Get It Running
09 / 10
INSTALLED IN A MINUTE
01
CLONE THE SKILL
Drop the repository into your Claude Code skills folder and it's live in every project.
git clone github.com/dreamid27/frontend-slides
→ ~/.claude/skills/
02
ASK FOR A DECK
Say "build me a pitch deck." Four quick questions — purpose, length, content, density — then three live style previews to choose between.
03
PRESENT ANYWHERE
The file runs from disk, a URL, or a borrowed laptop. Arrow keys and swipe to navigate; print to PDF or deploy with one script.
Before You Go
10 / 10
MAKE SLIDES A JOY AGAIN.
One prompt, one file, one deliberate slide at a time.
GitHub
github.com/dreamid27/frontend-slides
Runs On
Claude Code + any browser
Format
One self-contained HTML file
Made with Frontend Slides — github.com/dreamid27/frontend-slides