slide-upgrade

name

slide-upgrade

description

Convert PPTX files or Markdown into stunning, Canva-quality HTML slide decks. Use when asked to upgrade a PowerPoint, re-render slides as HTML, convert a presentation, or create modern slides from markdown/text. Triggers on phrases like 'upgrade this pptx', 're-render as html slides', 'convert this presentation', 'make canva-style slides', 'slide-upgrade', 'turn this into html slides', 'redesign these slides', 'beautiful slides'. Produces an .html file (images base64-encoded; videos in a media/ folder) with bold typography, modern layouts, and full presentation navigation.

Slide Upgrade

Convert any input — PPTX, Markdown, or a plain prompt — into a visually stunning, Canva-quality HTML slide deck. Images are base64-encoded into the HTML; videos (too large for inline embedding) are copied to a media/ folder alongside the HTML with relative path references. The output looks like it was designed in Canva or Figma, not PowerPoint.

Design Philosophy

The output should feel like a contemporary creative portfolio or Canva template, not a corporate PowerPoint. Key principles:

• Massive, bold typography — headings should dominate the slide (100-200px, condensed, uppercase)
• Full-colour backgrounds — bold yellow, deep blue, rich black, vibrant red — not just white
• Confident whitespace — don't fill every pixel; let elements breathe
• Photo-forward layouts — images bleed to edges, use geometric crops (circles, arches, diagonals)
• Visual hierarchy through scale — the difference between heading and body should be dramatic (5-10x)
• Slide numbering — prominent slide numbers (01, 02, 03) add editorial structure
• Horizontal rules — use lines to separate and structure content, not boxes
• Type as hero — on many slides, the typography IS the design; no images needed

Inputs

PPTX File

1. Unzip the PPTX and parse the raw XML (see references/pptx-extractor.md) — do not use python-pptx, it misses videos, shape-fill images, and SVGs
2. Read each slide XML to extract text, images, videos, tables, and backgrounds
3. Redesign from scratch — don't try to replicate the PPTX layout; reimagine it with Canva-quality design
4. Base64-encode images for self-contained HTML; copy videos to a media/ folder alongside the HTML with relative path references

Markdown File

1. Read the .md file
2. Split on --- horizontal rules for slide breaks (if present)
3. If no explicit breaks, use heading hierarchy: # H1 = section dividers, ## H2 = individual slides
4. Parse content per slide, then design

Prompt Only

1. Plan the slide structure with the user
2. Generate content and design simultaneously

Workflow

Step 1: Extract & Understand

For PPTX: Unzip and parse the raw XML (see references/pptx-extractor.md):

rm -rf /tmp/pptx-unpacked && mkdir -p /tmp/pptx-unpacked
cd /tmp/pptx-unpacked && unzip -o "path/to/file.pptx" > /dev/null 2>&1

Then:

1. Read ppt/presentation.xml + ppt/_rels/presentation.xml.rels to determine slide order
2. List ppt/media/ to see all images (png/jpeg/svg) and videos (mp4)
3. Check each ppt/slides/_rels/slideN.xml.rels to map media → slides
4. Read each ppt/slides/slideN.xml to extract text, tables, backgrounds, and layout
5. Copy videos to media/ folder next to output HTML; base64-encode images

For Markdown: Read the file and identify slide breaks and content hierarchy.

For prompts: Confirm the slide outline with the user.

Step 2: Plan the Design

1. Choose a theme — pick from presets (see references/canva-aesthetic.md) or create a custom palette based on the content/brand
2. Choose fonts — pick a display font and body font from Google Fonts. For the Canva aesthetic, strongly prefer bold condensed display fonts: Bebas Neue, Anton, Oswald, Archivo Black, Syne
3. Map each slide to a layout type — assign from the patterns in references/canva-aesthetic.md
4. Plan variety — alternate between dark/light backgrounds, image/text-only slides, and layout styles. Never use the same layout twice in a row.

Step 3: Build the HTML

Use the base template from the html-slides skill (~/.claude/skills/html-slides/references/base-template.md), but:

• Override the theme with the chosen palette
• Override the fonts with the chosen display/body pair
• Add the enhanced CSS classes from references/canva-aesthetic.md
• Build each slide using the Canva-style patterns

Critical Rules

1. Minimal files — one .html file with CSS/JS embedded and images base64-encoded. Videos go in a media/ folder alongside the HTML (too large for base64). If no videos, the output is a single self-contained file.
2. 16:9 canvas — 1920x1080 internal resolution, CSS-scaled to viewport.
3. Content density — max 5 bullets, max 30 words per text block, 40%+ whitespace, one idea per slide.
4. Font loading — Google Fonts via <link> in <head>. Always include the display font + body font + fallbacks.
5. Keyboard nav — arrow keys, space, click, touch, F for fullscreen.

Typography Priorities

• Display headings: condensed, uppercase, 120-200px, weight 800-900
• Section headings: 60-96px, weight 700
• Card/table headings: 36-48px, weight 700
• Body text: 26-32px, weight 400, generous line-height — err on the side of very large
• Table cells: 28-32px — tables must be legible from the back of the room
• Labels/tags in diagrams: 24-28px, weight 600
• Captions/sources: 20-22px, weight 500-600, uppercase with letter-spacing
• Stat numbers: 100-160px, weight 300 (light) or 900 (black)
• Absolute minimum 20px for any text on screen — never use 12-18px range
• When in doubt, go larger. Slides are viewed from a distance.

Step 4: Screenshot & QA

Use Playwright to screenshot each slide:

npx playwright install chromium 2>/dev/null
node -e "
const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
  await page.goto('file://FILEPATH');
  await page.waitForLoadState('networkidle');
  const count = await page.evaluate(() => document.querySelectorAll('.slide').length);
  for (let i = 0; i < count; i++) {
    await page.evaluate(n => { window.currentSlide = n; showSlide(n); }, i);
    await page.waitForTimeout(300);
    await page.screenshot({ path: '/tmp/html-slides/slide-' + i + '.png' });
  }
  await browser.close();
})();
"

Or use headless Chrome:

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --screenshot=/tmp/slide.png --window-size=1920,1080 file:///path/to/slides.html

ALWAYS visually inspect screenshots with the Read tool. Check for:

• Text overflow or clipping
• Font fallback (wrong font rendering)
• Colour contrast / readability — especially text over gradients, images, or colour transitions. If a gradient goes light-to-dark, text colour must work against ALL zones, or replace with a solid overlay
• Any text below 20px — if found, increase it
• Layout balance and whitespace
• Image distortion or cropping issues

Step 5: Deliver

1. Save the .html file to the working directory
2. Show screenshots of key slides (at minimum: title, a content slide, closing)
3. Presenting instructions:
   • Open in Chrome/Safari/Firefox
   • Press F for fullscreen
   • Arrow keys or space to navigate
   • Escape to exit fullscreen
   • Cmd+P to export as PDF
4. Ask if adjustments are needed

Reference Files

• references/pptx-extractor.md — XML-based approach for extracting PPTX content, images, and videos
• references/canva-aesthetic.md — Canva-style themes, layout patterns, and CSS techniques
• ~/.claude/skills/html-slides/references/base-template.md — HTML/CSS/JS boilerplate (from html-slides skill)
• ~/.claude/skills/html-slides/references/design-system.md — Base theme presets and typography scale
• ~/.claude/skills/html-slides/references/slide-patterns.md — Standard layout patterns