# Slide Upgrade

> 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.

- Skill: `lfurze/slide-upgrade` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add lfurze/slide-upgrade`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lfurze/slide-upgrade/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: lfurze (https://skillmd.com/u/lfurze)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/lfurze/slide-upgrade

---


# 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`):

```bash
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:

```bash
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:
```bash
"/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