# Presentation Master
> Create beautiful HTML presentations from topic + authors. Generates slides + speaker notes. No dependencies, works offline.
- Skill: `aibot88/presentation-master` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add aibot88/presentation-master`
- Raw SKILL.md: https://api.skillmd.com/api/skills/aibot88/presentation-master/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: aibot88 (https://skillmd.com/u/aibot88)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/aibot88/presentation-master
---
# Presentation Master — Workflow Guide
## Quick Reference
**Input:** Topic + Author names
**Output:** 2 HTML files (slides + speech notes)
**Style:** Study `examples/` folder for quality reference
**Language:** Match user's language
---
## Essential Requirements
### 1. Layout Rules
```css
/* CRITICAL: No scrolling on slides */
.slide {
overflow: hidden;
padding: 40px 60px 80px 60px; /* bottom padding for nav */
}
```
**Why 80px bottom padding?** Navigation buttons sit at bottom — content must not overlap them.
### 2. Navigation Pattern
```
┌─────────────────────────────────────┐
│ │
│ SLIDE CONTENT │
│ │
│ │
├─────────────────────────────────────┤
│ [1/15] [◄] [►] │ ← Nav area (~60px)
└─────────────────────────────────────┘
↑ Counter ↑ Buttons
bottom-left bottom-right
```
**Key:** Counter on left, buttons on right. Both fixed position, ~24-30px from edges.
### 3. Content Density
Since slides can't scroll, content must be **compact**:
| Element | Recommended Size |
|---------|------------------|
| h1 (title) | 2.5-3.5rem |
| h2 (slide heading) | 1.75-2rem |
| h3 (card heading) | 1-1.2rem |
| Body text | 0.85-0.95rem |
| Card padding | 1-1.5rem |
| Grid gaps | 0.75-1.25rem |
**Tip:** Use grids (2-4 columns) to fit more content horizontally.
---
## Slide Structure
### Recommended: 14-22 slides
```
Slide 1: Title (topic + authors)
Slide 2: Overview/Agenda
Slides 3-N: Content (mix of types)
Slide N-1: Summary/Key Takeaways
Slide N: Thank You
```
### Slide Types to Mix
| Type | Use For | Layout |
|------|---------|--------|
| Title | Opening, section dividers | Centered, gradient bg |
| Content | Main ideas | Heading + bullets/cards |
| Grid | Multiple concepts | 2-4 column card grid |
| Comparison | Pros/cons, before/after | 2-column layout |
| Stats | Key numbers | Large numbers + labels |
| Quote | Expert opinion | Blockquote style |
| Timeline | History, process | Vertical/horizontal steps |
---
## Visual Design
### Default Style
Study `examples/` — they show the quality bar:
- **Dark backgrounds** with colored accents
- **Glass/gradient cards** with subtle borders
- **Smooth animations** (fade, slide)
- **Icon usage** for visual interest
### Key Visual Elements
Every content slide should include:
- Cards or containers (not bare lists)
- Color accents or icons
- Clear visual hierarchy
- Adequate spacing
### Animation Classes
```css
.animate-in {
opacity: 0;
transform: translateY(20px);
}
.slide.active .animate-in {
animation: fadeUp 0.5s ease forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
```
---
## Technical Implementation
### HTML Structure
```html
{Topic}
...
1 / N
```
### Navigation JavaScript
```javascript
let currentSlide = 1;
const totalSlides = N; // Set actual count
const slides = document.querySelectorAll('.slide');
function showSlide(n) {
if (n < 1) n = 1;
if (n > totalSlides) n = totalSlides;
slides.forEach(slide => slide.classList.remove('active'));
slides[n - 1].classList.add('active');
currentSlide = n;
document.getElementById('currentSlide').textContent = currentSlide;
document.getElementById('prevBtn').disabled = currentSlide === 1;
document.getElementById('nextBtn').disabled = currentSlide === totalSlides;
document.getElementById('progress').style.width =
((currentSlide / totalSlides) * 100) + '%';
}
function nextSlide() { showSlide(currentSlide + 1); }
function prevSlide() { showSlide(currentSlide - 1); }
// Keyboard support
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === ' ') {
e.preventDefault();
nextSlide();
}
if (e.key === 'ArrowLeft') {
e.preventDefault();
prevSlide();
}
});
// Touch/swipe support
let touchStartX = 0;
document.addEventListener('touchstart', (e) => {
touchStartX = e.touches[0].clientX;
});
document.addEventListener('touchend', (e) => {
const diff = touchStartX - e.changedTouches[0].clientX;
if (Math.abs(diff) > 50) {
diff > 0 ? nextSlide() : prevSlide();
}
});
showSlide(1);
```
---
## Speaker Notes Format
```html
Speech Notes — {Topic}
Speech Notes
{Topic}
Slide 1
~30 sec
Title Slide
Opening remarks...
Introduction to topic...
Total: ~15-20 min
```
---
## Content Guidelines
### Do's
- ✓ One main idea per slide
- ✓ Concrete examples (not abstract statements)
- ✓ Visual structure (cards, grids, icons)
- ✓ Logical flow between slides
- ✓ Natural speaker notes (conversational)
### Don'ts
- ✗ Scrolling content
- ✗ Walls of text
- ✗ Generic filler ("This is important...")
- ✗ Made-up statistics
- ✗ External dependencies
---
## Reference: Study Examples
The `examples/` folder contains production-quality presentations:
| File | Style | Learn From |
|------|-------|-----------|
| Artificial Intelligence.html | Dark glass | Animations, grids, timeline |
| Climate Change.html | Light professional | Cards, stats, clean layout |
| Cybersecurity.html | Neon/gaming | Particles, threat meters, glow |
**Best practice:** Open examples in browser, study their CSS patterns, adapt to your topic.
---
## Checklist Before Completion
- [ ] Content fits without scrolling
- [ ] Navigation visible and doesn't overlap content
- [ ] All slides have visual structure (not plain text)
- [ ] Facts are accurate
- [ ] Speech notes cover every slide
- [ ] Works offline (no external deps)
- [ ] Keyboard navigation works
- [ ] Touch/swipe works
---
**Remember:** The examples/ folder is your quality reference. Be creative, but maintain that level of polish.