video youtu.be Watch ↗

Stop Making PowerPoints: Vibe-Coding HTML Slides as a Skill

TL;DR

A self-described non-technical creator (Zara Zhang) walks through Front End Slides, a Claude Code / Codex skill that turns an outline into a beautiful, interactive HTML deck (a web page, not a .pptx), which the video states has passed 22k+ GitHub stars. The demo is instrumental; the payload is four theses about how skills get built and why they win. (1) You don't start with a skill, you end with one — build and battle-test the workflow by hand through many rounds of feedback, then ask the agent to freeze that workflow into a skill (the packaging is the last step). (2) HTML is the model's native output language — training data is saturated with web pages, so the model lays text+images out beautifully; if Markdown is the native language on the input side, HTML is native on the output side, and HTML is friendly to both model and human. (3) Design for agents, not humans — a skill's output can differ for every person because an agent, not a human, consumes it; the agent becomes the middle layer that makes software personal and collapses the complaint/feedback loop (users just tell the agent to change it). (4) Everything is code — any computer knowledge work can in theory be done with code and gets dramatically better when it is, and the biggest winners of vibe coding are non-programmers, for whom slides are the ideal on-ramp (no blank page, everyone needs a deck). Along the way the skill demonstrates agentic self-correction (the agent screenshots each slide draft and fixes itself), a curated 30+ template library the agent selects from, a four-question onboarding flow, and a cheap-preview gate (pick one of three cover designs before the full build).

Concepts introduced

Skill Extraction — build and prove a workflow by hand first, then freeze it into a skill; the packaging is the last step, not the first ("you end with a skill").
HTML as Native Output — HTML is the model's native output language (as Markdown is its native input language), and it is uniquely friendly to both the model and the human reader.
Agent-Mediated Software — when an agent, not a human, consumes software, output personalizes per user and the complaint/feedback loop collapses; product people must design for agents.
Knowledge Work as Code — everything is code: computer knowledge work can be done with code and improves when it is, and non-programmers are vibe coding's biggest winners.

Held, not dropped

Themes the video touches that don't warrant their own concept page yet — spin out on demand:

Skill onboarding + cheap-preview gate as a design pattern — the four-question onboarding (purpose/length/content/density) and the "pick one of three previews before the expensive build" step are a reusable skill-design pattern (front-load context to avoid slop; gate token-costly generation behind a cheap, user-selected preview). Close to Intent Context but at the skill's onboarding altitude. Held.
File-path handoff tooling tip — sending Claude Code the file path (not the pasted image) to insert media, and the Mac Finder "show path bar → copy as pathname" trick. Practical, not a concept.
One-command deploy — "tell Claude to deploy this deck with Vercel" ships a live link in minutes. Deployment convenience; held.
App graveyard → skills — the "zombie apps you never open" framing for why skills replace small apps. The core is folded into Agent-Mediated Software; the app-graveyard rhetoric itself is held.

Key claims

You don't start with a skill, you end with a skill — build and battle-test the workflow by hand, then package it. principle → Skill Extraction. Durable ordering claim: the skill is the crystallized residue of a proven workflow, so packaging cold (before the workflow works) inverts the dependency. The video: ~10–20 rounds of feedback teaching the agent "what a great deck looks like," then "take everything we just did and package it into a skill."
Front-load a skill's onboarding with a few context questions (purpose, length, content, density), because the model needs enough context up front or it produces slop. best practice — context: generative skills with a wide, subjective output space; a terse skill on a narrow task needn't interrogate the user. → Skill Extraction, Intent Context.
Gate expensive generation behind a cheap, user-picked preview (three cover designs before the full deck) to avoid burning tokens on unwanted directions. best practice — context: token-costly generation with style/taste-dependent output; the preview is only worth it when regeneration is expensive and direction is subjective.
HTML is the model's native output language; if Markdown is native on the input side, HTML is native on the output side, and HTML is friendly to both model and human. principle → HTML as Native Output. The video's stated mechanism: training data full of web pages → the model excels at laying a pile of text and images into something clear and beautiful.
A skill's output can be different for every person because an agent, not a human, uses it; the agent is the middle layer that makes software personal and collapses the feedback/complaint loop. principle → Agent-Mediated Software.
Design products for agents, not only humans — a growing share of what you build will be consumed by agents on behalf of users. best practice — context: product/design work in an agent-mediated world; contingent on the "everyone has an agent" premise the video assumes.
Small productivity apps (mobile and web) will be replaced by skills the agent calls inside the tool you already use — "the software comes to you." observation — the video's prediction; groundable over time, not settled now.
Everything is code: any knowledge work on a computer can in theory be done with code, and it gets dramatically better when it is; the biggest winners of vibe coding are non-programmers. principle → Knowledge Work as Code.
Start with slides as a first vibe-coding project — no scary blank page, everyone has to make a deck, and it moves your energy from box-pushing to content. best practice — context: non-technical people getting into vibe coding. → Vibe Coding.
Claude Code takes screenshots of every slide draft and self-corrects if it made a mistake. observation → Agentic UI Testing. Independent corroboration that agents validate their own rendered output.
The skill ships a library of 30+ opinionated HTML templates (designed from curated reference images), and the agent picks one based on the mood and content of your slides. observation → Golden Templates. Curated exemplars the agent selects from and adapts — golden-templates applied to slide design.
Install by sending the agent the GitHub link and asking it to install; deploy by telling Claude to ship it with Vercel. observation → Public Skill Adoption. Install-by-link mechanic; the 22k star count is the attention signal that concept flags as not a fitness measure.
The video states the skill has 22k+ GitHub stars, went viral (~1.4M views on a demo post), and was built by a non-technical person "without writing a single line of code," and that Claude is currently "a little stronger at front end design than the GPT models." observation — external, groundable claims (star/view counts, the model-strength comparison), reproduced as the video's assertions for a later grounding pass; not verified here.

Why this builds on the skills cluster (stance: builds_on)

The dominant stance is builds_on: the distillate extends the vault's skill-authoring cluster with new framings while corroborating four existing concepts, so it is neither purely novel nor a duplicate.

New concepts introduced. Skill Extraction sharpens the provenance question the cluster left implicit — Skill-Driven Loop Development says "pre-validate skills before you loop over them" and Skill Authoring Checklist governs a skill's internals, but neither states where a skill comes from; this video's "you end with a skill" fills that gap. HTML as Native Output and Agent-Mediated Software are genuinely new to the graph; the former is a sibling of Agent-Computer Interface (ACI)'s "keep formats close to what the model has seen naturally," aimed at the output channel. Knowledge Work as Code is the democratization thesis adjacent to (but distinct from) Execution Commoditization and Imagination Constraint.
Corroborations (independent source converges — no new concept). The agent screenshotting each draft and self-correcting is a second, independent instance of Agentic UI Testing. The 30+ curated-template library the agent selects from corroborates Golden Templates in the slide-design domain. The whole demo is a Vibe Coding testimonial (non-technical creator, natural language, rounds of feedback). Install-by-GitHub-link and the 22k-star signal corroborate the mechanics of Public Skill Adoption — including its warning that stars score attention, not fit.

Illustrated walkthrough

Visual coverage is ok (max blind gap ~46s; 20% grid-floor frames), and notably the video's own deck is a live demonstration of the skill — most keyframes are the slides themselves.

t=00:44 — "HOW IT WORKS" (the deck is the demo). A terminal-styled slide published at deck.zarazhang.com, tagged FRONTEND-SLIDES · 21K STARS, showing the command claude "make slides for my conference talk" and "A few quick questions first:". The point on screen: this is a web page at its own URL, not a PowerPoint — beautiful, interactive (click to enlarge media, hover-for-titles nav, laser-pointer cursor, click-to-reveal Easter eggs).
t=01:34 — the coding agent. The Claude Code desktop app dashboard ("What's up next, Zara?"), showing usage stats and Favorite model: Opus 4.8, "Bypass permissions" enabled. Narration: you need a coding agent (Claude Code or Codex); install the skill by sending the agent the GitHub link and asking it to install.
t=02:12 — onboarding questions. The agent asks a structured question ("2/3 · How should the slides feel?") offering Speaker-led (low density) vs Reading-first (high density) plus a free-text "Other". This is the onboarding flow built to gather enough context up front ("otherwise it just produces slop") — the four questions are purpose, length, content, density.
t=02:27 — three cover previews (the cheap-preview gate). A generated cover option, "Style B — Bold Poster" ("On the quiet power of / How to build something small"), rendered as a local HTML file. The agent generates three cover directions and asks you to pick one before building the full deck — added specifically because the model kept generating unwanted styles and "wasted a lot of tokens."
t≈02:38 — agentic self-correction (narrated). As Claude Code builds, it "takes screenshots of every slide draft and then corrects itself if it's making mistakes" — Agentic UI Testing applied to the skill's own output.
t=06:41 — Lesson 1: "DON'T BUILD APPS. BUILD SKILLS." The thesis that small productivity apps (mobile and web) get replaced by skills the agent calls inside the tool you already use — "instead of you going to find the software, the software comes to you."
t≈07:15 — Lesson 2 (narrated): a skill's output is personal. Having built both GUI web apps and skills, the creator states web apps drew daily complaint floods while the skill barely does, because a human isn't using the skill directly — an agent is. The agent is the middle layer that finally makes software personal.
t=08:00 — Lesson 3: "HTML IS THE MODEL'S NATIVE LANGUAGE." Markdown is friendly to the model but not to us (nobody enjoys a wall of text); HTML is friendly to both.
t=08:46 — "WHY DOES YOUR NEXT PRESENTATION HAVE TO BE A POWERPOINT?" The rhetorical hinge into "make your own skill."
t=09:48 — closing: "EVERYTHING IS CODE." Any knowledge work on a computer can be done with code; the biggest winners of vibe coding are non-programmers; start with slides.