A minimalist, AI-friendly slide deck framework. One HTML file. No build step. Pair it with any AI coding assistant and write decks like prose.

slides/
├── deck.html              The template deck. Edit this.
├── design-system.html     Visual showcase of every component.
├── index.html             Landing page (uses Tailwind CDN).
├── AGENTS.md              AI agent instructions — design system + components + storytelling.
├── media/                 Drop your images and videos here.
├── docs/
│   ├── USING.md           How to use the template.
│   ├── STORYTELLING.md    How to structure any presentation.
│   └── DESIGN.md          Design tokens, components, and tone rules.
├── .github/
│   └── workflows/
│       └── deploy.yml     Auto-deploy to GitHub Pages on push.
└── LICENSE                MIT.

Slides are usually built in PowerPoint, Keynote, or Google Slides. Those tools are great if you like dragging text boxes. They're terrible if you want to:

• Treat your deck like a document you can write, not a canvas you have to arrange
• Pair with an AI assistant to draft, edit, and iterate
• Keep your slides in version control
• Embed your deck anywhere with a single iframe
• Print to PDF without losing fidelity
• Stop fighting auto-formatting

This framework is a single HTML file with a library of 21 components. You edit it like a webpage. You present it in a browser. You pair with an AI assistant to write slides through conversation.

1. Clone the repo:

   git clone https://github.com/noskillish/slides.git
   cd slides

2. Open deck.html in your browser. You'll see the template with examples of every component.

3. Open the file in your editor (with Claude Code, Cursor, or whatever you like).

4. Edit the slides. Each slide is a <section class="slide">. Copy any one to make a new one.

5. Drop media into media/ and reference with relative paths.

6. Present in full-screen (F11). Navigate with arrow keys or swipe on touch devices.

7. Export to PDF by clicking the button or pressing P.

This template was made with AI assistance in mind. The workflow:

1. Open the repo in your editor with your AI assistant running.
2. Tell it what slide you want: "Add a quote slide that says 'Coding is solved' as the opening."
3. The AI inserts a slide using the right component.
4. Iterate by feedback: "Make it dark." "Move it to slide 3." "Shorten the headline."
5. Drop in media as you go: "Wire media/demo.mp4 to the collage on slide 8 with controls."

The AI reads AGENTS.md to understand the design system, all 21 components, the storytelling framework, and the tone rules. It can also freestyle new components as long as they stay on-token.

See docs/USING.md for the full workflow.

Add ?embed to any deck URL and drop it in an iframe. The PDF button hides; navigation stays.

<iframe src="your-deck.html?embed" style="width:100%; aspect-ratio:16/9; border:none;"></iframe>

Works in blog posts, Notion, documentation sites, or anywhere that renders HTML.

• docs/USING.md — How to use the template, components, keyboard shortcuts, PDF export, troubleshooting.
• docs/STORYTELLING.md — How to structure a presentation. The six-beat framework, the headline pattern, common mistakes. Works for talks, pitches, strategy decks, and more.
• docs/DESIGN.md — Design tokens, components, tone & voice rules.
• design-system.html — Visual showcase of every component, rendered.
• AGENTS.md — AI agent context file. Everything an AI needs to produce correct, on-brand slides.

• One HTML file per deck. No JavaScript framework. No build step. No npm install.
• Self-contained. deck.html and design-system.html have zero external dependencies beyond Google Fonts (Inter).
• index.html is the landing page. It uses the Tailwind CDN for responsive layout — it's a marketing page, not a deck file. The product files stay dependency-free.
• Works in any modern browser. Present, share, embed.
• PDF export via window.print() with print-optimized CSS (@page set to 16:9).
• Auto-deploy to GitHub Pages on push to main via the included GitHub Action.

MIT. Use it, fork it, change it.

Built originally for a specific talk and generalized for anyone who wants to present with less friction. Inspired by editorial layouts and the broader minimalist tradition in tech writing.