MCPInstall

presentation-generator

by glebisDocs & Writing

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.

Installs
320
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/glebis/claude-skills --skill presentation-generator
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads presentation-generator automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Presentation Generator

Overview

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:

  • HTML - Interactive presentation with navigation dots, keyboard support, smooth scrolling
  • PNG - Individual slide images via Playwright (1920x1080)
  • PDF - Multi-page document via Playwright

Quick Start

1. Create presentation from JSON/YAML content

node scripts/generate-presentation.js --input content.json --output presentation.html

2. Export to PNG slides

node scripts/export-slides.js presentation.html --format png --output ./slides/

3. Export to PDF

node scripts/export-slides.js presentation.html --format pdf --output presentation.pdf

Brand Integration

This skill references brand-agency for consistent styling:

Colors (from brand-agency)

ColorHexUsage
Primary (Orange)#e85d04Title slides, CTAs, accents
Secondary (Yellow)#ffd60aHighlights, accent slides
Accent (Blue)#3a86ffInfo slides, links
Success (Green)#38b000Positive content
Error (Red)#d62828Warnings, emphasis
Foreground#000000Text, borders
Background#ffffffLight slides

Typography

  • Headings: Geist ExtraBold (800)
  • Body: EB Garamond
  • Code/ASCII: Geist Mono

Slide Types

1. Title Slide (--title)

Full-screen title with subtitle, colored background (primary/secondary/accent/dark).

2. Content Slide (--content)

Heading + body text + optional bullet list.

3. Two-Column Slide (--two-col)

Split layout for comparisons, text + image, before/after.

4. Code Slide (--code)

Dark background, syntax-highlighted code block with title.

5. Stats Slide (--stats)

Big numbers with labels (e.g., "14 templates | 4 formats | 1 skill").

6. Task Grid Slide (--grid)

Grid of cards with numbers, titles, descriptions.

7. ASCII Art Slide (--ascii)

Decorative slide with ASCII box-drawing characters.

8. Image Slide (--image)

Full-bleed or contained image with optional caption.

ASCII Decorations

Use ASCII box-drawing characters for tech aesthetic:

Frames:   ┌─────┐  ╔═════╗  ┏━━━━━┓
          │     │  ║     ║  ┃     ┃
          └─────┘  ╚═════╝  ┗━━━━━┛

Lines:    ─ │ ═ ║ ━ ┃ ━━━ ───

Arrows:   → ← ↑ ↓ ▶ ◀ ▲ ▼

Shapes:   ● ○ ■ □ ▲ △ ★ ☆ ◆ ◇

Blocks:   █ ▓ ▒ ░

Content Format

JSON format:

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

YAML format:

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

Interactive Features

Generated HTML includes:

  • Navigation dots - Fixed right sidebar with clickable dots
  • Keyboard navigation - Arrow keys, Page Up/Down, Home/End
  • Smooth scrolling - CSS scroll-snap and smooth behavior
  • Intersection Observer - Active slide highlighting
  • Responsive - Works on various screen sizes (optimized for 16:9)

Usage Examples

Create workshop summary:

# 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

Quick presentation from markdown:

# Convert markdown outline to presentation
node scripts/md-to-slides.js notes.md --output presentation.html

Batch export:

# Export all slides as PNGs
node scripts/export-slides.js presentation.html --format png --output ./export/

# Result: slide-01.png, slide-02.png, etc.

File Structure

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

Dependencies

  • Node.js 18+
  • Playwright (npm install playwright)

Tips

  1. Use ASCII sparingly - Great for tech/dev presentations, can feel dated otherwise
  2. Stick to brand colors - Don't mix custom colors, use the 5-color palette
  3. Big text on title slides - h1 should be 4-5rem minimum
  4. One idea per slide - Neobrutalism works best with focused content
  5. Test interactivity - Always preview HTML before exporting

FAQ

What does the presentation-generator skill do?

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.

How do I install presentation-generator?

Run npx skills add https://github.com/glebis/claude-skills --skill presentation-generator in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/presentation-generator/ (personal) or .claude/skills/presentation-generator/ (project).

Which AI agents can use presentation-generator?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is presentation-generator safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains presentation-generator?

It is published by glebis in glebis/claude-skills. It has 320 recorded installs.

More from glebis/claude-skills

View all →

google-image-search

glebis/claude-skills

Search and download images via Google Custom Search API with LLM-powered selection. This skill should be used when finding images for articles, presentations, research documents, or enriching Obsidian notes with relevant visuals. Supports simple queries, batch processing from JSON config, automatic config generation from terms, and full note enrichment with automatic image insertion below headings.

Media & Creative643 installs

pdf-generation

glebis/claude-skills

Professional PDF generation from markdown using Pandoc with Eisvogel template and EB Garamond fonts. Use when converting markdown to PDF, creating white papers, research documents, marketing materials, or technical documentation. Supports both English and Russian documents with professional typography and color-coded themes. Mobile-optimized layout (6x9) by default for Telegram bot context, desktop/print layout (A4) for other contexts.

Docs & Writing482 installs

health-data

glebis/claude-skills

Open the skill to read its SKILL.md instructions.

Education & Science393 installs

firecrawl-research

glebis/claude-skills

Open the skill to read its SKILL.md instructions.

Productivity & Automation379 installs

deep-research

glebis/claude-skills

Open the skill to read its SKILL.md instructions.

Productivity & Automation324 installs

decision-toolkit

glebis/claude-skills

Open the skill to read its SKILL.md instructions.

318 installs

Popular docs & writing skills

View category →

grill-with-docs

mattpocock/skills

A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

Docs & Writing1.2M installs

lark-markdown

open.feishu.cn

飞书 Markdown：查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件，或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档，也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。

Docs & Writing778.7K installs

writing-beats

mattpocock/skills

Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.

Docs & Writing490.7K installs

writing-shape

mattpocock/skills

Writing, exploit: shape raw material into an article, paragraph by paragraph.

Docs & Writing490.2K installs

writing-fragments

mattpocock/skills

Writing, explore: mine raw fragments, no structure yet.

Docs & Writing489.6K installs

writing-for-agents

mattpocock/skills

Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.

Docs & Writing479.3K installs