// Generate interactive HTML presentations with neobrutalism styling, ASCII art decorations, and Agency brand colors. Outputs HTML (interactive with navigation), PNG (individual slides via Playwright), and PDF. References brand-agency skill for colors and typography. Use when creating presentations, slide decks, pitch materials, or visual summaries.
| name | presentation-generator |
| description | Generate interactive HTML presentations with neobrutalism styling, ASCII art decorations, and Agency brand colors. Outputs HTML (interactive with navigation), PNG (individual slides via Playwright), and PDF. References brand-agency skill for colors and typography. Use when creating presentations, slide decks, pitch materials, or visual summaries. |
Create stunning presentations in neobrutalism style with Agency brand colors. Generate interactive HTML presentations with smooth scrolling navigation, export individual slides as PNG, or create PDF documents.
Output formats:
node scripts/generate-presentation.js --input content.json --output presentation.html
node scripts/export-slides.js presentation.html --format png --output ./slides/
node scripts/export-slides.js presentation.html --format pdf --output presentation.pdf
This skill references brand-agency for consistent styling:
| Color | Hex | Usage |
|---|---|---|
| Primary (Orange) | #e85d04 | Title slides, CTAs, accents |
| Secondary (Yellow) | #ffd60a | Highlights, accent slides |
| Accent (Blue) | #3a86ff | Info slides, links |
| Success (Green) | #38b000 | Positive content |
| Error (Red) | #d62828 | Warnings, emphasis |
| Foreground | #000000 | Text, borders |
| Background | #ffffff | Light slides |
--title)Full-screen title with subtitle, colored background (primary/secondary/accent/dark).
--content)Heading + body text + optional bullet list.
--two-col)Split layout for comparisons, text + image, before/after.
--code)Dark background, syntax-highlighted code block with title.
--stats)Big numbers with labels (e.g., "14 templates | 4 formats | 1 skill").
--grid)Grid of cards with numbers, titles, descriptions.
--ascii)Decorative slide with ASCII box-drawing characters.
--image)Full-bleed or contained image with optional caption.
Use ASCII box-drawing characters for tech aesthetic:
Frames: ┌─────┐ ╔═════╗ ┏━━━━━┓
│ │ ║ ║ ┃ ┃
└─────┘ ╚═════╝ ┗━━━━━┛
Lines: ─ │ ═ ║ ━ ┃ ━━━ ───
Arrows: → ← ↑ ↓ ▶ ◀ ▲ ▼
Shapes: ● ○ ■ □ ▲ △ ★ ☆ ◆ ◇
Blocks: █ ▓ ▒ ░
{
"title": "Presentation Title",
"footer": "Company / Date",
"slides": [
{
"type": "title",
"bg": "primary",
"title": "Main Title",
"subtitle": "Subtitle text"
},
{
"type": "content",
"title": "Section Title",
"body": "Introduction paragraph",
"bullets": ["Point 1", "Point 2", "Point 3"]
},
{
"type": "code",
"title": "Code Example",
"language": "javascript",
"code": "const x = 42;"
},
{
"type": "stats",
"items": [
{"value": "14", "label": "templates"},
{"value": "4", "label": "formats"},
{"value": "∞", "label": "possibilities"}
]
}
]
}
title: Presentation Title
footer: Company / Date
slides:
- type: title
bg: primary
title: Main Title
subtitle: Subtitle text
- type: content
title: Section Title
body: Introduction paragraph
bullets:
- Point 1
- Point 2
Generated HTML includes:
# Generate from today's session
node scripts/generate-presentation.js \
--title "Claude Code Lab — Day Summary" \
--footer "29.11.2025" \
--slides slides-content.json \
--output workshop-summary.html
# Convert markdown outline to presentation
node scripts/md-to-slides.js notes.md --output presentation.html
# Export all slides as PNGs
node scripts/export-slides.js presentation.html --format png --output ./export/
# Result: slide-01.png, slide-02.png, etc.
presentation-generator/
├── SKILL.md # This file
├── templates/
│ ├── base.html # Base HTML template
│ ├── slides/ # Slide type partials
│ │ ├── title.html
│ │ ├── content.html
│ │ ├── code.html
│ │ ├── stats.html
│ │ ├── two-col.html
│ │ ├── grid.html
│ │ └── ascii.html
│ └── styles.css # Neobrutalism styles
├── scripts/
│ ├── generate-presentation.js # Main generator
│ ├── export-slides.js # PNG/PDF export
│ └── md-to-slides.js # Markdown converter
└── output/ # Generated files
npm install playwright)