Two Skills for Two Presentation Worlds

Which Skill Should You Choose?

generate-outline-deck: Core Features

Outline Deck: Slide Anatomy

Every slide is a <section class="slide"> with three metadata attributes:

<section class="slide"
         data-deck="v1"        <!-- Deck version group (keep "v1" for single-version) -->
         data-section="Guide"  <!-- Section group heading in left outline -->
         data-title="Install"> <!-- Clickable item title in outline sidebar -->
  <h2>Slide Content</h2>
  <p>Paragraph, lists, or layout grids here.</p>
</section>

Adding, removing, or reordering sections automatically updates the outline tree, counter, and progress bar.

Outline Deck: Keyboard Shortcuts

Install Outline Skill: Local Marketplace

Manage the skill locally via claude-plugins-local git marketplace:

# 1. Local marketplace repository location
cd ~/projects/claude-plugins-local
# Contains: plugins/presentation-skills/skills/generate-outline-deck/

# 2. Register in Claude Code (~/.claude/plugins/known_marketplaces.json)
{
  "claude-plugins-local": {
    "source": "git",
    "url": "file:///Users/wangyong/projects/claude-plugins-local"
  }
}

Crucial Rule: Marketplace source must be "git" + "file://...". Do NOT use "directory" due to known Claude Code relative path resolution bugs (#23978 / #26861).

Run Outline Deck Locally

open deck.html
# Or specify Google Chrome:
open -a "Google Chrome" deck.html

cd ~/projects/github/wangyong1972/docs/
python3 -m http.server 8000
# Visit http://127.0.0.1:8000/presentation-skills/deck.html

pptx Skill: Architecture & Approaches

A PowerPoint .pptx file is a ZIP package containing OpenXML structures.

pptx Skill: Local Environment Setup

Run these once on macOS to equip your machine for PPTX authoring and rendering:

# 1. Node.js environment (for pptxgenjs script execution)
npm install -g pptxgenjs react-icons react react-dom sharp

# 2. Python parsing & validation tools
pip install "markitdown[pptx]" Pillow defusedxml lxml

# 3. Headless PDF & image conversion tools (macOS Homebrew)
brew install poppler           # provides pdftoppm for visual rendering
brew install --cask libreoffice # provides soffice for headless PDF conversion

pptx Skill: Script Toolchain

pptx Skill: Critical Gotchas & Rules

• Colors: Never #, never 8 digits! Use color: "FF0000". Including # or hex alpha corrupts the file.
• Layout sizing: Default LAYOUT_16x9 is 10" × 5.625". For widescreen 16:9 use LAYOUT_WIDE (13.3" × 7.5").
• Shadow offset: Offset MUST be ≥ 0. Negative offset corrupts file. Use angle: 270 for upward shadows.
• Fresh options object: pptxgenjs mutates option objects in place into EMUs — never reuse an options object.
• Charts: Stacked bar charts require dataLabelPosition: "ctr" | "inEnd" | "inBase".

Publish to GitHub Pages (wangyong1972/docs)

# 1. Create remote repository via GitHub CLI
gh repo create wangyong1972/docs --public --description "Docs & Presentations"

# 2. Push repository structure to origin main
git add . && git commit -m "Add presentation-skills deck"
git push -u origin main

# 3. Enable GitHub Pages on main branch
gh repo edit wangyong1972/docs --enable-pages --pages-branch main

# 4. Access live presentation URL
# https://wangyong1972.github.io/docs/presentation-skills/

Multi-Deck Documentation Repository Layout

~/projects/github/wangyong1972/docs/
├── index.html                    # Root portal landing page with links to all decks
├── README.md                     # Repo overview, presentation links & quickstart
└── presentation-skills/          # Specific presentation directory
    ├── deck.html                 # Outline presentation deck (master source)
    ├── index.html                # Entry copy for clean URL access
    ├── SKILL.md                  # generate-outline-deck skill documentation
    ├── PPTX-SKILL.md             # pptx skill documentation
    ├── components.md             # Visual component copy-paste reference
    └── publishing.md             # Multi-target publishing guide

Visual QA & PDF Export

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless=new --disable-gpu --no-sandbox \
  --screenshot=/tmp/deck-slide1.png \
  --window-size=1500,980 \
  "file://$(pwd)/deck.html#1"

python scripts/office/soffice.py --headless \
  --convert-to pdf deck.pptx
pdftoppm -jpeg -r 150 deck.pdf slide

Local Machine Installation Checklist

Common Pitfalls & Troubleshooting

• Fixed 1400×900 Canvas: Slide overflow is hidden, not auto-shrunk. Split crowded content across multiple slides.
• Sandboxed Chrome Hanging: Chrome may appear to time out due to GoogleUpdater background processes, but /tmp/*.png is already generated.
• CSS Color Variables: Always use var(--accent) and var(--bg-card) so light/dark switching works properly.
• Marketplace Source: Never use "directory" in known_marketplaces.json; always use "git" + "file://...".

Repository & Documentation Links

Summary: Two Powerful Skillsets

Ready to Present.

Open the live presentation in your browser, press f for fullscreen, o for outline, or l for laser pointer.