present-in-htmlPresentations, written in HTML.
Give Claude a topic, an outline, documents, data or links. Get a designed slide deck: one file that opens in any browser, presents itself, and prints to PDF.
▶ Play the tour
Four skills, one deck
Claude picks the right one from what you ask. Each loads only when it is needed, so the plugin adds about 734 tokens to a session.
Make
present-in-htmlWrites the deck from your material in a look chosen for your audience, with speaker notes, then runs the checker.
Turn q3-report.pdf into a 10-minute board deck
Edit
edit-deckOpens a click-and-type editor for wording and notes. Save writes the same file back.
Let me fix the wording myself
Review
review-deckChecks timing, jargon, story and sources against the audience and the time slot.
Will this fit in 15 minutes for managers?
Publish
publish-deckPuts the deck and its images on GitHub Pages and returns a link to share.
Put my deck online so I can send a link
What every deck can do
The engine, the theme and the slides live in one HTML file. Nothing to install to present it.
Install
Two commands in Claude Code, then ask for a presentation. The skills and the source are on GitHub.
As a plugin
Recommended. Updates arrive with /plugin update.
/plugin marketplace add hisham-abuella/present-in-html /plugin install present-in-html@present-in-html-marketplace
Then just ask
Or call a skill directly, like /present-in-html:review-deck.
Make a 10-minute deck for our Q3 board review. Revenue was $4.2M, up 18%.
Without the plugin system
Copies the skills into ~/.claude/skills/; the workflow needs the plugin.
git clone https://github.com/hisham-abuella/present-in-html.git cd present-in-html && ./install-skill.sh
For the checker
Playwright, installed once outside the plugin folder.
mkdir -p ~/.kp-tools && cd ~/.kp-tools npm i playwright && npx playwright install chromium
Template library
Every deck here is one HTML file. Open one, press F for fullscreen, P for the presenter window, S to try another theme.
The tourKeynote Black. What present-in-html is and how to install it, made with the plugin.
The templateEvery layout once. The file each new deck starts from.
Every layoutAll 28 layouts in one story, with photos generated on a laptop.
Product launchBig statements, a hero number that morphs, counting stats.
Quarterly reviewAgenda, charts to scale, KPIs, a recommended option, a timeline.
Engineering talkArchitecture diagrams that draw, a process, a code walkthrough.
How LLMs actually workMagic Move, diagrams that draw, charts, code. From a public GenAI course.
How it worksThe skill explained, with the deck as its own live demo.
Slides that runLive demos on slides: app UI, calculator, simulation, sound, code, a game.
Arabic, right to leftA whole deck in Arabic: layouts, timelines and charts mirror.
How it works, in Egyptian ArabicThe how-it-works deck, right to left.
Slides that run, in Egyptian ArabicThe live-demo deck, right to left.
Fonts and themesEvery font pairing and theme as a specimen. Type your own headline.
Electrical / wireless engineerDesign reviews, link budgets, lab talks, standards updates
Software engineerIncident reviews, architecture talks, demos, internal tech talks
Data scientist / analystAnalysis readouts, model reviews, experiment results, dashboards walk-throughs
Doctor / clinicianCase conferences, grand rounds, M&M, patient-education talks
Medical / scientific researcherSeminars, conference talks, lab meetings, thesis committee updates
School teacherPrimary and middle-school lessons, parent evenings, classroom routines
University lecturerLectures in dimmed halls, tutorials, worked examples, course introductions
Student (thesis defence)Thesis and capstone defences, qualifying exams, course projects
Startup founder (pitch)Seed and Series A pitches, demo days, investor updates
Product managerProduct reviews, roadmap updates, decision memos, launch readouts
Executive / consultant (board review)Steering committees, strategy reviews, client recommendations
Finance professionalBudget reviews, variance and forecast decks, treasury and audit updates
Marketing / salesCampaign plans, launch briefs, QBRs, sales kickoffs
LawyerAdvice memos, client briefings, CLE talks, case summaries
Architect / designerConcept and design reviews, client presentations, studio crits
Trainer / community or faith educator (EN and AR)Bilingual workshops, community classes, Friday and weekend programmes, parent sessions
Security engineerIncident reviews, threat models, red-team readouts, security briefings
Civil / structural / mechanical engineerDesign reviews, site reports, tender briefings, project handovers
Nonprofit / NGO / public policyImpact reports, funder updates, policy briefings, community presentations
Journalist / editorStory pitches, investigation briefings, editorial meetings, data-story reviews
Real estate / propertyInvestor tours, listing presentations, market updates, portfolio reviews
Chef / restaurant / hospitalityMenu launches, front-of-house briefings, service reviews, supplier pitches
HR / people operationsAll-hands updates, policy changes, engagement survey results, onboarding talks
UX / product designerDesign crits, research readouts, case studies, handoff walkthroughs
Sports coach / performance analystMatch analysis, season reviews, tactical briefings, pre-season plans
Historian / museum curatorExhibition talks, public lectures, collection walk-throughs, humanities seminars
Claude 101A crash course on getting real work out of Claude, from first prompt to your own skills.
The future of presentationsThe original markdown keynote: toolbar, drawing, dark and light.
The power of HTMLKeynote-format demo deck.
Why HTML winsVertical, phone-first slides you swipe through.
Stories templateThe starting file for vertical decks.
The future of work in the age of AIConference keynote sample.
Introducing ArcProduct launch sample.
Accelerate your growthSales pitch sample.
Building scalable APIs with GraphQLTerminal-styled tech talk.
Introduction to machine learningCourse module in the Stories format.
Security awarenessInternal training in the Stories format.
Q1 updateTeam update in the Stories format.
Mastering Git and GitHubWorkshop guide in the Stories format.
Nothing matches. Try another word.
Evals Work in progress
How well, how fast and at what cost do different models build a deck with this skill? Each model got the same one-shot prompt and the same course module, in its own empty folder, through the Claude Code CLI. The skill's checker and a blind judge (Opus 5.5) scored every deck: wrong claims, UI issues and seven criteria.
| Model | Runs on | Judge /10 | Time | Cost |
|---|---|---|---|---|
| Opus 5.5 | Anthropic API | 9 / 9 | 11m 44s / 11m 14s | $2.88 / $2.79 |
| Sonnet 5.5 | Anthropic API | 9 / 9 | 5m 27s / 5m 24s | $0.90 / $0.70 |
| Haiku 5.5 | Anthropic API | 7 / 7 | 7m 05s / 8m 44s | $0.24 / $0.32 |
| qwen3.8 27B | Mac Studio M4 Max, Ollama | unfinished | timed out at 120 min | $0 (local) |
Each cell is Wireless 101 / STATS 101, Module 1: judge score out of 10, wall-clock time, and API list-price cost.
So far, Sonnet 5.5 matches Opus 5.5 at about half the time and a quarter to a third of the cost, and Haiku 5.5 is a usable first draft. The local model was too slow to finish on its own. In a separate experiment, not ranked against these runs, a local MoE model (qwen3.6 35B-A3B) finished a 30-slide deck in 20 minutes, scored 9/10, by building from a plan Opus wrote once.
Preliminary: one run per model per task. Small differences may be noise, and more repeated tests are planned before drawing firm conclusions.