# Reveal Ppt > Reveal.js PPT Skill - Skill: `tsaol/reveal-ppt` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add tsaol/reveal-ppt` - Raw SKILL.md: https://api.skillmd.com/api/skills/tsaol/reveal-ppt/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tsaol (https://skillmd.com/u/tsaol) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tsaol/reveal-ppt --- # Reveal.js PPT Skill > Invoke with `#reveal-ppt` + your topic. Generates a reveal.js presentation with Amazon brand theme. > > Reference: `GlobalOperation/growth/framework-comparison/reveal-demo/index.html` --- ## Positioning reveal.js is the most mature HTML presentation framework. **Single HTML file + reveal.js from CDN**. **When to use this over `#html-ppt`**: - Need fancy transitions (slide / fade / zoom / convex) - Need vertical sub-slides for deep-dive structure - Need PDF export (`?print-pdf` built-in) - Need code highlighting (highlight.js built-in) - Need presenter mode (press S for separate speaker window) - Tech talk audience expects "professional slides" feel **When NOT to use** (use `#html-ppt` instead): - Must work offline / no network - Client site with restricted network - One-shot disposable deck - Need rehearsal timer + notes inline --- ## Core Principles 1. **Viewport Fitting** — Content must fit within viewport. Never allow slide scrolling. 2. **Distinctive Design** — Avoid generic reveal.js defaults. Apply Amazon brand or custom style. 3. **Content Density** — Max 5 bullets per slide, max 10 lines of code per code slide. ### Content Density Limits | Slide Type | Maximum Content | |---|---| | Title | 1 heading + 1 subtitle | | Content | 1 heading + 4-5 points | | Code | 1 heading + 8-10 lines | | Comparison | 2 columns, 4 items each | | Quote | 1 quote (3 lines max) + attribution | **Overflows? Split into sub-slides (vertical sections).** --- ## Your Task When user invokes `#reveal-ppt`: ### Step 1: Confirm 1. **Topic / content outline** 2. **Slide count** (default 8-12) 3. **Code snippets?** (determines highlight plugin) 4. **PDF export needed?** (determines export instructions) 5. **Style** — Amazon Brand (default) or Custom mood ### Step 2: Generate Single HTML File Structure: ```html
...
...
``` ### Step 3: Amazon Brand Theme (default) Same color palette as `#html-ppt`: - Orange `#FF9900` / Deep orange `#c45500` - Dark blue `#232F3E` / Light orange `#FFF8EE` / Border `#FFE0B2` - Font: `-apple-system, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif` Override reveal.js defaults: ```css :root { --r-main-color: #1a1a1a; --r-heading-color: #232F3E; --r-link-color: #FF9900; --r-background-color: #fff; } .reveal { font-family: ...; color: #1a1a1a; } .reveal h1, .reveal h2 { color: #232F3E; text-transform: none; } .reveal .accent { color: #FF9900; } ``` ### Step 4: reveal.js Features (use as needed) **Speaker notes**: ```html

...

``` Press `S` for presenter mode (separate window with notes + timer + next slide). **Vertical sub-slides** (drill-down): ```html

Main Topic

Detail 1

Detail 2

``` **Fragments** (incremental reveal): ```html ``` Max 5 fragments per slide. **Code blocks**: ```html 

def hello():
    print("world")
``` ### Step 5: Standard Init Config ```javascript Reveal.initialize({ hash: true, controls: true, progress: true, center: true, transition: 'slide', slideNumber: 'c/t', plugins: [ RevealNotes ] }); ``` If code highlighting needed, add: ```javascript plugins: [ RevealNotes, RevealHighlight ] ``` ```html ``` ### Step 6: Output Generate `-reveal.html`, give `open` command, list shortcuts: - Arrow keys: navigate - `S`: speaker mode - `F`: fullscreen - `O`: overview - `B`: blackout - `?`: all shortcuts PDF export: append `?print-pdf` to URL, then browser Print > Save as PDF. --- ## PPT Conversion When user provides a .pptx: 1. Run `python scripts/extract-pptx.py ` 2. Show extracted slides for confirmation 3. Convert to reveal.js format preserving text, images, notes --- ## PDF Export (Screenshot-based) For higher quality PDF than browser print: ```bash bash scripts/export-pdf.sh [output.pdf] [--compact] ``` --- ## Layout Blocks Same CSS classes as `#html-ppt` (layers, stats, quote, punch, compare) can be used inside reveal `
` elements. --- ## Red Lines - Do NOT change reveal.js base theme colors without CSS override (always override) - Do NOT use reveal.js default uppercase headings (`text-transform: none` in CSS) - Do NOT use fragment as main expression method (max 5 per slide) - Do NOT use green / purple / blue accent colors in Amazon brand mode - Do NOT allow horizontal scrolling in any slide - Do NOT exceed content density limits --- ## Skeleton ```html __TITLE__

__TITLE__
__SUBTITLE__

__TAGLINE__

__HEADING__

...

``` --- ## When to Use Which Skill | Scenario | Choose | |----------|--------| | Offline / client site / no network | `#html-ppt` | | Rehearsal with inline notes + timer | `#html-ppt` rehearsal | | Scrollable document (no pagination) | `#html-ppt` walkthrough | | Formal talk with transitions | `#reveal-ppt` | | PDF export needed | `#reveal-ppt` | | Tech talk with code highlighting | `#reveal-ppt` | | Vertical sub-slide drill-down | `#reveal-ppt` | | Not sure | `#html-ppt` (default) | --- ## Usage Examples - `#reveal-ppt Make a tech talk about MCP integration, 12 slides with code` - `#reveal-ppt Convert quarterly-plan.pptx to web slides` - `#reveal-ppt Internal demo of our RAG pipeline, need PDF export`