html-presentation skill
This deck is one HTML file
How my slide-deck skill for Claude works, with this deck as the live demo. Poke everything.
Hisham AbuellaA personal projectOctober 2026
Measured from the file on disk
That is the whole deck: 18 slides, 22 themes, 25 font pairings and the engine. No images and no libraries.
How the skill works
From a plain sentence to a checked deck
Ask
I say what the talk is.
Choose
Claude picks the look.
Write
One section per slide.
Check
A script finds the problems.
Deliver
I get the file.
Computed live
No framework. Nothing to install.
Stage: 1920 × 1080
Your window changes. The stage does not.
Resize your window and watch this line.
Layouts
27 layouts, pick one by name
Tap a layout
title
Outlined chips are used in this deck.
Try it: type below
This headline fits itself.
Type size: normal.
Builds
Builds reveal one click at a time
fade
rise
scale
draw
count
list
- one
- by
- one
Magic Move, part one
Give two shapes the same name.
Magic Move, part two
The engine does the gliding.
Charts
A chart is one attribute
Change a number. The bars redraw.
Themes
22 themes, one tap each
Core
Library (16)
Fonts
25 font pairings, same words, new voice
Core
Library
Marker
Press M and draw on this slide.
Presenter view
Press P: a second window, just for you
The checker
The checker finds what you stopped seeing
$ node check.mjs broken.html
FAIL broken.html: 4 slides, 4 issues (0.8s)
slide 3: img "missing.jpg" has no alt attribute
fix: add alt="what it shows" (alt="" if purely decorative)
slide 4: ul has 7 bullets (max 6)
fix: cut to 5 or split into two slides
$ node check.mjs fixed.html --themes
ok fixed.html [keynote-white]: 4 slides, 0 issues (0.6s)
ok fixed.html [studio]: 4 slides, 0 issues (2.6s)
... and 20 more themes, all ok
بالمصري
ملف HTML واحد، بيشتغل في أي متصفح.
مفيش حاجة تنزّلها. افتح الملف واضغط F.
Your turn
Press a key.
My personal skill, not Apple's.One file. Opens anywhere. Prints to PDF.present-in-html skill: hisham-abuella.github.io/present-in-html