# Slides
> HTML presentation slide creator with 12 style presets. Generates self-contained HTML files that work as presentations in any browser. Zero dependencies — no npm, no framework, just open the file. Supports speaker notes, keyboard navigation, and print-to-PDF. Triggers on: HTML slides, web presentation, browser slides, HTML presentation, reveal.js alternative, simple slides, quick presentation, keynote alternative.
- Skill: `ceoimperiumprojects/slides` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add ceoimperiumprojects/slides`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ceoimperiumprojects/slides/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ceoimperiumprojects (https://skillmd.com/u/ceoimperiumprojects)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ceoimperiumprojects/slides
---
# HTML Presentation Slides
Create self-contained HTML presentations that run in any browser with zero dependencies. One file, no build step, no internet required.
## Keywords
HTML slides, web presentation, browser slides, HTML presentation, reveal.js alternative, simple slides, quick presentation, keynote alternative, slide deck, presentation, slides, powerpoint alternative, google slides alternative, speaker notes, fullscreen presentation
## What This Creates
A single `.html` file that:
- Opens in any browser as a full-screen presentation
- Arrow keys and spacebar navigate between slides
- Escape key shows slide overview grid
- F key toggles fullscreen mode
- P key shows/hides presenter notes
- Ctrl+P prints to PDF (use Chrome for best results)
- Responsive — adapts to any screen size
- No internet required — all styles and scripts are inline
- Works offline, works on any OS, works forever (no dependencies to break)
## Base HTML Template
Every presentation uses this template. Style presets override the CSS variables.
```html
{{TITLE}}
{{PRESENTATION_TITLE}}
{{SUBTITLE}}
Speaker notes go here. Press P to show/hide.
{{Slide Title}}
- Point one
- Point two
- Point three
Additional context for the speaker.
"The best way to predict the future is to create it."
— Peter Drucker
Comparison
Before
- Manual process
- Hours of work
- Error-prone
After
- Automated
- Minutes
- Reliable
How It Works
// Example code block
const result = await imperium.analyze({
target: 'competitors',
depth: 'full'
});
console.log(result.insights);
Thank You
{{CTA — website, email, or next step}}
```
## Style Presets
12 visual themes available. Each preset overrides the CSS `:root` variables.
### 1. Midnight
Dark navy background with white text and electric blue accents. Professional, modern, great for tech presentations.
```css
:root {
--bg: #0f172a;
--text: #f1f5f9;
--accent: #3b82f6;
--heading-font: 'Segoe UI', system-ui, sans-serif;
--body-font: 'Segoe UI', system-ui, sans-serif;
}
```
### 2. Clean
White background with dark text. Minimal, distraction-free. Works for any context.
```css
:root {
--bg: #ffffff;
--text: #1e293b;
--accent: #2563eb;
--heading-font: 'Segoe UI', system-ui, sans-serif;
--body-font: 'Segoe UI', system-ui, sans-serif;
}
```
### 3. Startup
Dark background with gradient accent elements. Modern startup aesthetic.
```css
:root {
--bg: #0a0a0a;
--text: #fafafa;
--accent: #a855f7;
--heading-font: 'Segoe UI', system-ui, sans-serif;
--body-font: 'Segoe UI', system-ui, sans-serif;
}
```
Additional: accent gradient from `#a855f7` to `#ec4899` on headings.
### 4. Corporate
Light gray background, navy text. Professional and boardroom-ready.
```css
:root {
--bg: #f8fafc;
--text: #1e3a5f;
--accent: #1e40af;
--heading-font: 'Georgia', 'Times New Roman', serif;
--body-font: 'Segoe UI', system-ui, sans-serif;
}
```
### 5. Creative
Bold colors, oversized typography. For pitches that need to stand out.
```css
:root {
--bg: #fef3c7;
--text: #1c1917;
--accent: #dc2626;
--heading-font: 'Georgia', 'Times New Roman', serif;
--body-font: 'Segoe UI', system-ui, sans-serif;
}
```
### 6. Developer
Terminal aesthetic. Dark background, monospace font, green accents.
```css
:root {
--bg: #0d1117;
--text: #c9d1d9;
--accent: #58a6ff;
--heading-font: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
--body-font: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}
```
Additional: green (#3fb950) for code highlights, subtle grid background.
### 7. Warm
Cream background with warm brown text. Friendly, approachable, human.
```css
:root {
--bg: #fdf6e3;
--text: #3c2415;
--accent: #c2410c;
--heading-font: 'Georgia', 'Times New Roman', serif;
--body-font: 'Segoe UI', system-ui, sans-serif;
}
```
### 8. Neon
Black background with neon gradient text. High-energy, attention-grabbing.
```css
:root {
--bg: #000000;
--text: #ffffff;
--accent: #00ff88;
--heading-font: 'Segoe UI', system-ui, sans-serif;
--body-font: 'Segoe UI', system-ui, sans-serif;
}
```
Additional: headings use gradient `linear-gradient(135deg, #00ff88, #00d4ff)` with `-webkit-background-clip: text`.
### 9. Nature
Forest green palette. Organic, grounded, eco-friendly feel.
```css
:root {
--bg: #1a2e1a;
--text: #e8f5e9;
--accent: #66bb6a;
--heading-font: 'Georgia', 'Times New Roman', serif;
--body-font: 'Segoe UI', system-ui, sans-serif;
}
```
### 10. Minimal
Pure black and white. Maximum whitespace, maximum clarity.
```css
:root {
--bg: #ffffff;
--text: #000000;
--accent: #000000;
--heading-font: 'Segoe UI', system-ui, sans-serif;
--body-font: 'Segoe UI', system-ui, sans-serif;
}
```
Additional: headings use letter-spacing: 0.05em, lighter font-weight.
### 11. Retro
Vintage color palette with serif fonts. Nostalgic, distinctive.
```css
:root {
--bg: #2d1b14;
--text: #f5e6d3;
--accent: #e07a3a;
--heading-font: 'Georgia', 'Palatino Linotype', serif;
--body-font: 'Georgia', 'Palatino Linotype', serif;
}
```
### 12. Gradient
Smooth gradient backgrounds that shift per slide. Dynamic, modern.
```css
:root {
--bg: linear-gradient(135deg, #667eea, #764ba2);
--text: #ffffff;
--accent: #fbbf24;
--heading-font: 'Segoe UI', system-ui, sans-serif;
--body-font: 'Segoe UI', system-ui, sans-serif;
}
```
Additional: each slide uses a different gradient from a curated palette:
- Slide 1: `#667eea → #764ba2`
- Slide 2: `#f093fb → #f5576c`
- Slide 3: `#4facfe → #00f2fe`
- Slide 4: `#43e97b → #38f9d7`
- Slide 5: `#fa709a → #fee140`
- Slide 6+: cycle through the palette
## Brand Integration
Before generating slides, check if `brand/brand.json` exists.
**If brand files exist:**
- Override any preset with brand colors:
- `brand.colors.primary` → `--accent`
- `brand.colors.background` → `--bg` (or use a preset and just override accent)
- `brand.colors.text` → `--text`
- Use brand fonts:
- `brand.fonts.heading` → `--heading-font`
- `brand.fonts.body` → `--body-font`
- Add brand logo to title slide if `brand/assets/logo.svg` or `brand/assets/logo.png` exists
- Apply tone-of-voice to slide content
**If no brand files exist:**
- Use the selected preset as-is
- Default to "Midnight" preset if no preference given
## Slide Types
When generating presentations, use these slide patterns:
### Title Slide
Centered layout. Large heading, subtitle, optional logo. Used for opening and section breaks.
```html
Presentation Title
Subtitle or tagline
```
### Content Slide
Title with bullet points. The workhorse slide for most content.
```html
Section Title
- Key point — supporting detail
- Key point — supporting detail
- Key point — supporting detail
```
### Quote Slide
Large quote with attribution. Use for customer testimonials, founding principles, or impactful statements.
```html
"The quote goes here."
— Attribution
```
### Code Slide
Syntax-displayed code block. For technical presentations, API demos, architecture explanations.
```html
Implementation
const example = 'code here';
```
### Stats/Numbers Slide
Grid of key metrics. For traction, impact, or comparison data.
```html
```
### Two-Column Slide
Side-by-side content. For comparisons, before/after, pros/cons.
```html
```
### Image Slide
Full-bleed image or side-by-side image with text.
```html
Title
Description alongside the image.
```
### CTA/Closing Slide
Final slide with clear call to action.
```html
Get Started
website.com | hello@company.com
```
## Best Practices
### Content Rules
- Maximum 6 bullet points per slide — less is more
- One idea per slide — if it needs two ideas, make two slides
- Use `` for key terms — they render in the accent color
- Keep headlines under 8 words
- Speaker notes can be verbose — slides should not be
### Design Rules
- Default padding (5vw) keeps content away from edges — don't override unless full-bleed
- Use `clamp()` for font sizes — already built into the template for responsiveness
- Stats grid auto-fits: 2 stats = 2 columns, 3 = 3 columns, 4 = 2x2 grid
- Code blocks have overflow-x auto — long lines won't break the layout
### Presentation Tips
- F for fullscreen before presenting
- Test with Ctrl+P to verify PDF output looks correct
- Speaker notes (P key) only show on presenter's screen in browser
- Share the .html file directly — recipients just double-click to view
- Works in Chrome, Firefox, Safari, Edge — no compatibility issues