New Claude Code Skill

Reveal.js
Presentation Skill

Professional HTML presentations with strong visual design, ported from Anthropic's official PPTX skill.

ai-servicers.com · February 2026

What We Built

Anthropic released 4 official Agent Skills with Claude 4.6 — PPTX, XLSX, DOCX, and PDF. The PPTX skill has excellent presentation design standards, but there was no reveal.js equivalent.

We adapted the PPTX skill's design philosophy for our stack: self-contained HTML files deployed to nginx static sites.

Adaptation Path

PPTX Skill Reveal.js Skill
PptxGenJS API → HTML/CSS patterns
Slide masters → CSS custom properties
Node.js scripts → Self-contained HTML
soffice QA → Browser-native QA
Core Philosophy

Design Principles

Ported from Anthropic's PPTX skill — adapted for HTML

Anti-Boring-Slides Rules

🎨

Topic-Specific Palette

Colors should feel designed for THIS topic. If they'd work on any deck, they're not specific enough.

⚖️

Color Dominance

One color dominates at 60-70%. Supporting tones + one sharp accent. Never equal weight.

👁

Visual on Every Slide

Every slide needs an icon, shape, gradient, code block, or image. Text-only slides are forgettable.

🔀

Layout Variety

Vary columns, cards, stats, and callouts. Never repeat the same layout on consecutive slides.

🎲

Visual Motif

Pick ONE distinctive element (cards with colored borders, icons in squares) and repeat it consistently.

🏁

Sandwich Structure

Dark backgrounds for title + conclusion. Light (or consistent dark) for content. Bookend consistency.

12 Topic-Matched Color Palettes

Midnight Executive
Corporate, Strategy
Forest & Moss
Sustainability, Growth
Coral Energy
Creative, Marketing
Ocean Gradient
Technology, Data
Teal Trust
Healthcare, Fintech
Berry & Cream
Fashion, Lifestyle
Neon Night
Tech Demos, Dev Tools
Cherry Bold
Startups, Bold Pitches
Comprehensive

What the Skill Covers

Everything you need for professional reveal.js presentations

10 Layout Patterns

🎯
Title Slide
📄
Content + Visual
⚖️
Two-Column
🆔
Three-Column Cards
📈
Stat Callouts
💬
Quote / Callout
💻
Code Slide
🌄
Image + Text
Timeline / Flow
Icon + Text Rows

Each layout includes complete, copy-paste HTML/CSS with design guidance

Reveal.js Features Covered

🌐

CDN-Based & Self-Contained

Single HTML file, no build step. Latest reveal.js from cdnjs.

🎨

CSS Custom Properties Theming

Override reveal.js variables + custom design tokens for consistency.

👁

Speaker Notes

<aside class="notes"> — press S for speaker view.

🎲

Fragments & Transitions

Progressive reveals, animation styles, and slide transitions.

🛠

Code Highlighting

highlight.js plugin with line numbers, stepped highlighting.

↕️

Vertical Slides

Nested sections for sub-topics and optional deep dives.

Auto-Animate

Automatic morphing between slides via data-id matching.

📱

Responsive & Accessible

Em-based sizing, semantic HTML, WCAG contrast guidance.

QA Workflow

Adapted from the PPTX skill's rigorous "assume there are problems" philosophy.

1

Content Check

No placeholders, TODOs, or lorem ipsum remaining

2

Visual Check

Consistent palette, contrast, varied layouts, visual elements

3

Technical Check

Valid HTML, CDN versions, plugins loaded, no JS errors

4

Typography Check

Font loaded, size hierarchy clear, body left-aligned, max 6 points/slide

How to Use the Skill

Simply ask Claude Code to create a reveal.js presentation. The skill triggers automatically on keywords like slides, presentation, or deck.

"Create a presentation about our Q4 results"

"Make a reveal.js deck for the team onboarding"

"Build slides explaining our microservices architecture"


Skill location:
~/.claude/skills/
  revealjs-presentation/
    SKILL.md

Output format:
Single self-contained HTML file
  - Inline <style> block
  - CDN-hosted reveal.js 5.2.1
  - Google Fonts (optional)

Deploy to:
/projects/nginx/sites/shared/
  {name}/index.html

Served at:
https://nginx.ai-servicers.com/{name}/
            

Skill at a Glance

10

Layout patterns
with full HTML/CSS

12

Color palettes
matched to topics

8

Reveal.js features
documented

15

Anti-boring rules
& QA checks

Don't create boring slides. Plain bullets on a white background won't impress anyone.

— Anthropic PPTX Skill Design Guide

PPTX Skill vs Reveal.js Skill

PPTX Skill (Anthropic)

📄 Output: .pptx binary files
🛠 Tool: PptxGenJS (Node.js)
🎨 Theming: Slide masters + inline styles
🔍 QA: LibreOffice → PDF → images → subagent review
📦 Deploy: Email, upload, share file
✍️ Edit: Unpack XML → modify → repack

Reveal.js Skill (Ours)

📄 Output: Single .html file
🛠 Tool: HTML + CSS + CDN JS
🎨 Theming: CSS custom properties
🔍 QA: Open in browser (native)
📦 Deploy: Drop in nginx static dir
✍️ Edit: Modify HTML directly

Same design philosophy · Different output format · Simpler workflow

Start Creating

Just ask Claude to make a reveal.js presentation.

Skill: ~/.claude/skills/revealjs-presentation/

Adapted from Anthropic's PPTX Skill · Built for ai-servicers.com · February 2026