slides
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.
Why this exists
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
- 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.
Quick start
-
Clone the repo:
git clone https://github.com/noskillish/slides.git
cd slides
-
Open deck.html in your browser. You'll see the template with examples of every component.
-
Open the file in your editor (with Claude Code, Cursor, or whatever you like).
-
Edit the slides. Each slide is a <section class="slide">. Copy any one to make a new one.
-
Drop media into media/ and reference with relative paths.
-
Present in full-screen (F11). Navigate with arrow keys or swipe on touch devices.
-
Export to PDF by clicking the button or pressing P.
AI workflow
This template was made with AI assistance in mind. The workflow:
- Open the repo in your editor with your AI assistant running.
- Tell it what slide you want: "Add a quote slide that says 'Coding is solved' as the opening."
- The AI inserts a slide using the right component.
- Iterate by feedback: "Make it dark." "Move it to slide 3." "Shorten the headline."
- 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.
Embedding
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.
Claude Plugin
This repo is a Claude plugin marketplace. Install in Claude Code or Claude for Work:
/plugin marketplace add noskillish/slides
/plugin install slides@slides
Then use the commands:
| Command | What it does |
|---|
/slides | Generate a complete deck from a description |
/slides-outline | Draft the structure without writing HTML |
/add-slide | Add slides to an existing deck |
/slides-theme | Switch between themes (default, craft, solid) |
/slides-review | Review a deck for storytelling, design, and tone |
/slides-new-component | Build a custom component that follows the design system |
The plugin auto-detects the best storytelling format from your description:
| Format | Trigger |
|---|
| TED Talk (six-beat) | "conference talk", "keynote", "audience" |
| Sequoia pitch deck | "pitch", "investors", "funding", "Series A" |
| McKinsey SCR | "strategy", "board", "executive", "consulting" |
| Product launch | "launch", "product", "release", "unveil" |
| Board update | "board update", "quarterly", "KPIs", "status" |
| Sales deck | "sales", "prospect", "customer", "pipeline" |
Documentation
