v0.3.0 — Presentation mode, AI illustrations & richer components

This release turns slides-agent from a "generate + export" template into a full
present-and-iterate toolkit, and widens the component vocabulary so decks hold the
editorial quality bar without bespoke CSS.

Added

• Fullscreen presentation mode — press F (or the ⛶ button) and the slide fills the screen; the nav-rail auto-hides and reappears when the cursor nears the bottom edge. Wired into templates/base.html, so every deck inherits it.
• On-brand AI illustrations (optional) — connect a Google AI Studio key (Gemini Nano Banana Pro) and the new generate-image skill produces heroes, scene illustrations, mascots and metaphors. Every prompt is auto-prefixed with your configured brand style — palette from brand/tokens.css, illustration style + banned tropes from brand/guidelines.md — so the output adapts to whatever brand the template was set up for. Ships with scripts/gen-image.py and .env.example. Without a key, decks rely on assets, inline icons and tokens; nothing breaks.
• Seven new components in templates/components.md — process-flow, comparison-table, item-wall, kanban-board, pricing, three-step and team-grid — plus an inline-SVG iconography section (Lucide-style, stroke: currentColor, no emoji). All token-driven.
• Type-size floor check in scripts/qa.py — --min-font (default 16px, raise to 18-20 for large venues) flags any on-screen content text below the readable floor; mono fonts and chrome/eyebrow labels are exempt.
• scripts/shots.py — capture specific slides for a quick visual review, plus a scripts/README.md that indexes every script.
• Auto-numbered folios — folios renumber from DOM order, robust to slide insertion or removal.

Changed

• README.md, CLAUDE.md and .claude/skills/create-slides.md now document the new techniques (presentation mode, minimum on-screen type size, block-centering, static decorative elements).
• Clarified the PDF pipeline: gradient-text canvas rasterisation is needed only when titles use background-clip: text; with a solid accent, GRADIENT_TEXT_SELECTORS = [] and the PDF prints natively. The --with-pdf QA check exercises the rasterisation path and verifies page weight (a collapsed-page guard).

Notes

• No breaking changes to the deck format. Existing decks keep working — re-run python scripts/qa.py <deck>.html to pick up the new type-floor check.

Full changelog: v0.2.0...v0.3.0

v0.2.0 — Print fidelity & rendering robustness

Highlights

This release hardens the PDF export pipeline based on real production feedback (multi-deck campaigns) and adds brand-agnostic surface variants. Backward-compatible with v0.1 — existing decks keep working; the new features are opt-in.

Bug fixes

• Multi-line gradient text rasterisation — splitTextByLine (Range API char-by-char) replaces the full-text duplication on soft-wrapped lines. Long gradient titles now render correctly in PDF instead of duplicating text on every wrapped line.
• parseGradient colour stops — depth-aware comma walker handles rgb(R, G, B) and rgba(R, G, B, A) whose internal commas previously broke the split. NaN guard added for single-stop gradients.

Print fidelity (the big one)

@media print neutralises the Chromium PDF pipeline pitfalls we hit during multi-deck production:

• All shadows removed — box-shadow, text-shadow, filter: drop-shadow, backdrop-filter. They band, halo, and mis-position blur in PDF.
• Background grids hidden — class allow-list covering .aurora, .dust-grid, .graticule, .grid-bg, .bg-grid, .grid-pattern, .background-grid, .dot-grid-bg, .ambient-grid, .pattern-bg, plus a [data-pdf-hide] escape hatch. 1px gradient lines render thicker in PDF and mask-image radial fades aren't honoured.

New surface variants

• .slide.soft (uses --brand-neutral-light-soft)
• .slide.cream (uses --brand-neutral-light-deep)

Both adapt automatically to whatever the onboarding sets in brand/tokens.css. Use them for editorial "breathing" slides without hard cream↔charcoal toggles.

New full-bleed image layer

.slide-bg — full-bleed atmospheric image layer with documented z-index discipline (0 image, 2 content, 5/10 chrome) and a brand-aware readability overlay that adjusts for dark vs light slides.

QA upgrade

scripts/qa.py gains a --with-pdf flag:

• Generates a PDF via headless Chromium after __enablePrintMode + __rasterizeGradients
• Validates average page weight against --min-kb-per-slide threshold (default 40 KB)
• Catches collapsed-page bugs that the overflow check misses (silent failure mode in v0.1)

CLAUDE.md additions

• "Never cite a previous deck as reference" rule under "What this template never does" — real production feedback: naming a past deck as a reference, even as "gold standard", contaminates new productions because Claude re-reads it and duplicates its arc, components, and metaphor.
• Pre-delivery checklist — 7 mandatory items (QA, PDF size, GRADIENT_TEXT_SELECTORS coverage, em-dash check, tag-folio, manual nav test, data-attributes).
• Section 4b: Print rendering pitfalls — documents shadows / grids / filters / animations and the print-mode neutralisation patterns.

README additions

• Credits section — explicit attribution to ui-ux-pro-max (design intelligence) and 21st.dev MCP tools (UI component inspiration). The agent invokes these during art direction (Phase 2) and component design (Phase 3).
• Example output — presentations/examples/qiplim-launch.pdf, a real public-launch deck for Qiplim generated end-to-end with this template.

GRADIENT_TEXT_SELECTORS — visual upgrade

The array is now visually flagged as critical with a verification procedure (grep -c 'background-clip: *text' should equal the array length). Missing entries silently produce blank text in PDF — easy to forget without the warning.

---

🤖 Generated with Claude Code

v0.1.0 — initial template

First public release of slides-agent — a Claude Code template for generating editorial-grade HTML presentations that are tightly aligned to a brand, exportable to clean PDF, and shareable as a single standalone .html file.

What's in the box

• Brand-aware onboarding — On first open in Claude Code, the agent asks for your brand's website URL, analyses it, and auto-fills brand/tokens.css and brand/guidelines.md. It then explicitly invites you to populate assets/ (logos, illustrations, photos, icons) before generating any slide.
• Editorial component library — 19 paste-ready slide patterns in templates/components.md: hero, breathing number, big quote, section head, origin grid, dot-grid saturation, animated pipeline, stack grid, funnel, roadmap, budget, decision, solo portrait, cadence calendar, chapters timeline, lead magnets, KPI strata, engagement, date hero.
• Standalone deck skeleton — templates/base.html ships with a 1920×1080 frame scaled to viewport, top/bottom chrome rows, brand mark, triple navigation (drag bar + overview panel + quick-jump + classic shortcuts), reveal/stagger animation system, and an offline-ready PDF export pipeline.
• Clean PDF export — Works around the Chromium PDF pipeline bug with background-clip: text + linear-gradient by rasterising gradient text to canvas before window.print(). Driven by scripts/export-pdf.sh (headless) or the P key in the deck.
• Playwright QA — python scripts/qa.py presentations/your-deck.html advances every slide, verifies no element overflows the 1920×1080 frame, and enforces a ≥16px gap between bottom-most content and the chrome row.
• Multiple delivery modes — Local server (./scripts/serve.sh), PDF export, or any static host (Netlify Drop, GitHub Pages, S3, Cloudflare Pages — see docs/hosting.md).
• Built-in skill — .claude/skills/create-slides.md codifies the 8-phase production method (preparation → art direction → components → assets → content → navigation → QA → delivery).

Quality bar

The visual reference is Monocle × Bloomberg viz × MIT Tech Review print — hairlines, generous whitespace, monospace captions in lowercase, slow animations, restraint everywhere. Anti-patterns (bento grids, glassmorphism, em-dashes, stock photography, fake-bold marketing copy) are explicitly forbidden in docs/design-system.md and the agent skill.

How to use

1. Click Use this template at the top of the repo.
2. Clone the new repo locally.
3. Open it in Claude Code.
4. Follow onboarding: paste your brand URL, drop assets into assets/, then ask for a deck.

Requirements

• Claude Code (or another agent that respects CLAUDE.md)
• Node.js ≥ 18 (for the local server and headless export, both via npx)
• Python ≥ 3.10 with Playwright (pip install playwright && playwright install chromium) for QA and PDF export
• A modern browser for presenting

Known limitations

• Decks load fonts from Google Fonts CDN by default. For air-gapped use, self-host the fonts (see docs/hosting.md).
• The PDF export requires the deck to expose window.__enablePrintMode and window.__rasterizeGradients (already wired in templates/base.html). Custom decks that strip these will fall back to plain window.print() and may show gradient artefacts.
• mailto: does not support attachments — that's a standard, not a bug. Host the deck or attach the PDF manually.

What's next

Future improvements under consideration:

• An optional slides-edit-overlay.js for in-browser inline editing.
• More component variants (data charts via Chart.js, comparison tables, testimonial walls).
• A vercel-deploy.md companion to hosting.md for one-click deployment.

Open issues and PRs are welcome.