keynot

kill powerpoint with html.

What • Install • How • Inside • Caveats

---

A Claude Code skill that turns any prompt into a polished, self-contained HTML slide deck — keyboard navigation, swipe, fullscreen, animated reveals, brand-accurate design. Single file. Opens anywhere. No runtime dependencies.

Built for the moment you need to present something and you don't want to open PowerPoint. Read the writeup: Stop Reaching for PowerPoint.

Live demo

→ Open the live deck
Arrow keys or swipe to navigate · press f for fullscreen

Generated from a single prompt: "keynot, but if the audience was zombies, and lean into it." Everything — nav, fullscreen, animations, typography, all five slides — is one HTML file. Source.

What it does

Ask Claude for "slides", "a deck", or "something to present" and keynot activates. You get one HTML file with:

• Navigation — arrow keys, space, swipe on touch, clickable dot indicators, auto-hiding nav bar
• Fullscreen — f key or click the fullscreen button
• Staggered reveals — content fades up in sequence on each slide
• Brand theming — CSS variables for primary/accent/typography swap in seconds
• Layout library — split panels, stat columns, value cards, approach rows, photo panels
• Embedded assets — fonts via CDN, images via base64 — one file, no broken links

Before / After

🪟 Old way "Open PowerPoint. Pick a template. Fight the master slide. Realize your brand colors aren't in the theme. Export to PDF. Send a 40MB file. Hope the fonts render."

🗂️ keynot "Make me a deck on X, use our brand guide." → one deck.html, double-click to open, press f for fullscreen, done.

Install

Option A — Via /plugin (recommended)

keynot ships its own Claude Code plugin marketplace. Add it once, install the plugin:

/plugin marketplace add shawnzam/keynot
/plugin install keynot@keynot-marketplace

That's it. The skill is now available in every Claude Code session. Update with /plugin update keynot.

Option B — Drop-in SKILL.md (no plugin manifest)

If you just want the skill without the plugin wrapper:

# User-scoped (available everywhere)
mkdir -p ~/.claude/skills/keynot
curl -fsSL https://raw.githubusercontent.com/shawnzam/keynot/main/skills/keynot/SKILL.md \
  -o ~/.claude/skills/keynot/SKILL.md

# Or project-scoped
mkdir -p .claude/skills/keynot
curl -fsSL https://raw.githubusercontent.com/shawnzam/keynot/main/skills/keynot/SKILL.md \
  -o .claude/skills/keynot/SKILL.md

Then restart Claude Code.

Option C — As a reference

The SKILL.md file is self-contained. Read it, copy the CSS/JS shell, and build decks by hand if you prefer.

How to use

Once installed, just ask:

Make me a 5-slide deck introducing our new product.
Brand guide is attached.

Turn this doc into slides.

I need something to present tomorrow on the roadmap.
Dark theme, serif headings.

keynot will extract brand parameters (colors, type, layout language), pick a slide sequence that matches your goal, and ship a single .html file you can open in any browser.

Example use cases

• Investor or pitch decks — Paste your narrative, drop in a brand guide, get a polished deck in minutes. Iterate in plain English instead of wrestling with slide masters.
• Conference talks & tech demos — Single HTML file that opens anywhere, runs offline, and won't embarrass you when the venue wifi dies. Keyboard nav and fullscreen are already wired up.
• Internal readouts & weekly updates — Turn a status doc into a skimmable deck so your team actually reads it. Swap content in seconds when numbers change.
• Client one-pagers — Match any client's brand from a PDF style guide and deliver something that looks bespoke without opening Figma.
• Workshop & teaching slides — Build a course deck with embedded images, staggered reveals, and deep-linkable slide URLs. Students open it in their browser, no installs.
• Sales leave-behinds — Ship a self-contained .html that prospects can forward internally. No broken fonts, no missing assets, no "please install our viewer."
• Portfolio & case studies — Present past work with editorial-quality typography and layouts that match each project's brand.

What's in the skill

The SKILL.md file walks Claude through:

1. Brand extraction — how to parse a style guide (PDF, URL, description) into CSS variables
2. Deck architecture — the single-file HTML shell with all navigation and fullscreen wired up
3. Layout patterns — split panels, stat columns, value cards, approach rows, tool cards, photo panels
4. Content sequencing — a proven 5-slide structure for introductions and pitches
5. Typography rules — display, heading, eyebrow, and body tokens with clamp() scaling
6. Iteration workflow — how to make surgical edits without corrupting JavaScript
7. Pitfalls — JS operator corruption from blanket regex, base64 sizing, emoji hygiene

When not to use

• PowerPoint is required — your audience needs to edit in Office. Use .pptx instead.
• You need real-time collaboration — Google Slides wins here.
• Heavy animations or transitions — keynot does opacity fades and staggered reveals, not 3D cube transitions.
• Video embeds — possible, but bloats the single-file deck quickly.

For everything else — pitches, one-pagers, internal readouts, conference talks, lunch-and-learns — keynot ships faster and looks sharper than the alternatives.

License

MIT — see LICENSE.