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"}
]
}
]
}