Slides Grab Design

slides-grab Design Skill (Codex)

Use this after slide-outline.md is approved.

Goal

Generate high-quality slide-XX.html files in the selected slides workspace (slides/ by default) and support revision loops.

Inputs

• Approved slide-outline.md (must contain style: <id> in meta section — style was approved in Stage 1)
• Requested edits per slide

Outputs

• <slides-dir>/slide-01.html ... slide-XX.html
• Updated <slides-dir>/viewer.html via build script

Workflow

1. Read approved slide-outline.md and extract the style field from its meta section. 2. Load the chosen style's full spec:

• If style is a bundled id (e.g. glassmorphism), load from src/design-styles-data.js — colors, fonts, layout, signature elements, and things to avoid.
• If style ends in .md (e.g. ./DESIGN.slides.md or ./DESIGN.md), or if a design markdown file exists at the project root, parse it with slides-grab show-design <path> and treat the parsed output as the authoritative design system (colors, typography, layout, components, signature, avoid).
• Precedence when both files exist: DESIGN.slides.md takes priority over DESIGN.md. The .slides.md version is the slide-flavored conversion produced by the plan stage and is the only file safe to apply to slide HTML. If only DESIGN.md exists, treat it as web-flavored and follow the slide layout/avoid rules in references/design-rules.md strictly to avoid leaking web-only components (top-nav, CTA buttons, footer-band columns, pricing grids) into slides — or, preferably, switch back to the plan stage and produce a DESIGN.slides.md first.
• If the meta specifies a written custom direction, use that as the design basis.

3. Before generating slides, write a quick visual thesis (mood/material/energy), a content plan (opener → support/proof → detail/story → close/CTA), a system declaration (reused layout patterns, max two background colors, max two typefaces, image-led vs text-led slides, where section dividers reset tempo), and the core design tokens (background, surface, text, muted, accent + display/headline/body/caption roles). Ground these tokens in the chosen style's spec. Follow references/beautiful-slide-defaults.md for the full working model, content discipline, color discipline, and AI slop tropes to avoid. 4. If you need to confirm or revisit the approved bundled style before designing, re-run slides-grab list-styles and open the gallery from slides-grab preview-styles so the Stage 2 deck stays aligned with the Stage 1 direction. 5. Generate slide HTML files with 2-digit numbering in selected --slides-dir. 6. When a slide needs iconography, prefer Lucide as the default icon library. Use clean Lucide icons before falling back to emoji, and only use emoji when the brief explicitly calls for them. 7. When a slide explicitly needs bespoke imagery, when the user asks for an image, or when stronger imagery would materially improve the slide, prefer slides-grab image --prompt "<prompt>" --slides-dir <path> to generate a local asset with the default god-tibo-imagen provider (which reuses the local Codex ChatGPT login — no API key required) and save it under <slides-dir>/assets/. 8. If the deck needs a complex diagram (architecture, workflows, relationship maps, multi-node concepts), create the diagram in tldraw, export it with slides-grab tldraw, and treat the result as a local slide asset under <slides-dir>/assets/. 9. If the slide needs a local video, store the video under <slides-dir>/assets/, reference it as ./assets/<file>, and prefer a poster="./assets/<file>" thumbnail so PDF export uses a stable still image. 10. If the source video starts on YouTube or another supported page, use slides-grab fetch-video --url <youtube-url> --slides-dir <path> (or yt-dlp directly if needed) to download it into <slides-dir>/assets/ before saving the slide HTML. 11. Run slides-grab validate --slides-dir <path> after generation or edits. 12. If validation fails, automatically fix the source slide HTML/CSS and re-run validation until it passes. 13. Run the slide litmus check from references/beautiful-slide-defaults.md before presenting the deck for review. 14. Launch the interactive editor for visual review: slides-grab edit --slides-dir <path> 15. Iterate on user feedback by editing only requested slide files, then re-run validation after each edit round. 16. When the user confirms editing is complete, suggest: build the viewer (slides-grab build-viewer --slides-dir <path>) for a final read-only preview, or proceed to export (PDF/PPTX). 17. Keep revising until user approves conversion stage.

Rules

• Keep slide size 720pt x 405pt.
• Keep semantic text tags (p, h1-h6, ul, ol, li).
• Put local images and videos under <slides-dir>/assets/ and reference them as ./assets/<file>.
• Allow data: URLs when the slide must be fully self-contained.
• Do not leave remote http(s):// image URLs in saved slide HTML; download source images into <slides-dir>/assets/ and reference them as ./assets/<file>.
• Prefer Lucide for default slide iconography. Avoid emoji as the default icon treatment unless the brief explicitly asks for emoji.
• Prefer slides-grab image with the default god-tibo-imagen provider for bespoke slide imagery before reaching for remote URLs.
• The default provider, god-tibo-imagen, reuses the local Codex ChatGPT login (~/.codex/auth.json) — run codex login once to enable it; no API key required. ⚠️ god-tibo-imagen calls an unsupported private Codex backend that may break without notice. Optional alternatives: --provider codex (Codex/OpenAI gpt-image-2 via OPENAI_API_KEY; maps --aspect-ratio to the nearest supported OpenAI image size), or --provider nano-banana (Google Nano Banana / gemini-3-pro-image-preview via GOOGLE_API_KEY or GEMINI_API_KEY; supports --image-size 2K|4K). If image generation credentials are unavailable, fall back to web search + download into <slides-dir>/assets/.
• Prefer local videos with a poster="./assets/<file>" thumbnail so PDF export uses the still image.
• Use slides-grab fetch-video or yt-dlp to pull supported web videos into <slides-dir>/assets/ before saving slide HTML.
• Prefer <img> for slide imagery and data-image-placeholder when no final asset exists.
• Default to one job per slide, one dominant visual anchor, and copy that scans in seconds.
• Treat opening slides and section dividers like posters, not dashboards.
• Default to cardless layouts; only add a card when it improves structure or comprehension.
• Use whitespace, alignment, scale, cropping, and contrast before adding decorative chrome.
• Do not pad slides with filler copy, dummy stats, or decorative iconography — when a slide feels empty, solve it with layout and scale, not invented content.
• Pull every color from the approved style spec or the user's brand tokens; extend only with harmonic oklch() neighbors. Do not invent fresh standalone hex colors mid-slide.
• Keep body copy at 14pt minimum on a 720pt × 405pt slide and never render any text below the 10pt absolute floor.
• Avoid AI slop tropes — aggressive gradient backgrounds, left-border accent cards, SVG-drawn imagery, generic font stacks (Inter/Roboto/Arial), and generic 3×2 icon-plus-blurb grids. See references/beautiful-slide-defaults.md for the full list.
• Prefer tldraw for complex diagrams instead of recreating dense node/edge diagrams directly in HTML/CSS.
• Use slides-grab tldraw plus templates/diagram-tldraw.html when that gives a cleaner, more export-friendly result.
• Do not present slides for review until slides-grab validate --slides-dir <path> passes.
• Do not start conversion before approval.
• Use the packaged CLI and bundled references only; do not depend on unpublished agent-specific files.

Reference

For full constraints and style system, follow:

• references/design-rules.md
• references/detailed-design-rules.md
• references/beautiful-slide-defaults.md — slide-specific art direction defaults adapted from OpenAI's frontend design guidance and Anthropic's Claude design system guidance (content/color discipline, system declaration, AI slop tropes)
• references/design-system-full.md — archived full design system, templates, and advanced pattern guidance

Beautiful Slide Defaults

Slide-specific art direction guidance adapted from OpenAI's frontend design guidance for GPT-5.4, with additional distilled principles from Anthropic's Claude design system guidance. Use it to make HTML slides feel deliberate, premium, and instantly scannable without breaking slides-grab's export constraints.

Working Model

Before building the deck, write three things:

• visual thesis — one sentence describing the mood, material, energy, and imagery treatment
• content plan — opener → support/proof → detail/story → close/CTA or decision
• system declaration — one short paragraph committing to the system you will reuse across the deck

If the style direction is still open, gather visual references or a mood board first. Define the core tokens early: background, surface, primary text, muted text, accent, plus typography roles for display, headline, body, and caption.

Vocalize the System Before Designing

After the visual thesis and tokens are set, write the system declaration out loud so the deck stays consistent and iteration stays cheap. Name:

• the layout patterns you will reuse for titles, section headers, content, quotes, and closing slides
• the two background colors (max) you will use to introduce intentional rhythm between sections and content slides
• the two typefaces max, plus the one accent color that carries focus
• which slides will be image-led, which will be text-led, and where section dividers reset tempo

A deck without a declared system drifts. Committing to the system up front is the single cheapest way to make the deck feel deliberate.

Beautiful Defaults for Slides

• Start with composition, not components.
• Treat the opening slide like a poster and make the title or brand the loudest text.
• Give each slide one job, one primary takeaway, and one dominant visual anchor.
• Keep copy short enough to scan in seconds.
• Use whitespace, alignment, scale, cropping, and contrast before adding chrome.
• Limit the system by default: two typefaces max and one accent color.
• Default to cardless layouts. Prefer sections, grids, media blocks, dividers, and strong negative space.
• Use real imagery, product views, diagrams, or data as the main visual idea. Decorative gradients and abstract filler do not count.
• Keep the first slide free of secondary clutter such as stat strips, metadata piles, or multiple competing callouts unless the brief explicitly demands them.

Narrative Sequence for Decks

Use a narrative rhythm that feels intentional:

1. Opener — identity, premise, or promise 2. Support / proof — key evidence, context, or concrete value 3. Detail / story — workflow, mechanism, or deeper explanation 4. Close / CTA — decision, recommendation, next step, or final message

Section dividers should reset the visual tempo. Alternate dense proof slides with simpler image-led or statement-led slides so the deck keeps breathing.

Content Discipline

Every element must earn its place. When a slide feels empty, solve it with layout, scale, whitespace, and a stronger visual anchor — never by inventing filler content.

• Do not pad slides with placeholder copy, dummy stats, or decorative iconography just to fill space.
• Avoid data slop: invented numbers, vague percentages, and stat strips whose only purpose is to look informational.
• If you believe a slide needs an extra section, example, page, or call-out beyond the approved outline, ask the user before adding it. The user knows the audience better than you do.
• Say one thousand no's for every yes. Cutting is a design tool.

Color Discipline

• Pull every color from the approved style spec in src/design-styles-data.js (or the user's brand tokens when they override the bundled style). Do not invent fresh standalone hex colors mid-slide.
• If the approved palette is too restrictive for a specific slide, extend it harmonically with oklch() — derive neighbors from the existing accent or surface — rather than picking a fresh hex from scratch.
• Keep one accent color per deck. Two background colors max across the entire deck; use them to introduce rhythm between section dividers and content slides, not to decorate individual slides.
• Every color must trace back to the approved palette or a documented harmonic extension of it.

AI Slop Tropes to Avoid

Common AI-generated patterns that cheapen a deck instantly. Treat these as anti-patterns unless the brief explicitly asks for them.

• Aggressive full-slide gradient backgrounds used as the primary surface treatment.
• Rounded-rectangle containers with a solid left-border accent stripe (the AI "accent card" default).
• Drawing iconography or product imagery with inline SVG shapes — use a real asset or a data-image-placeholder box instead.
• Overused, generic font families: Inter, Roboto, Arial, Fraunces, and OS system stacks. Prefer Pretendard or the style-specified typeface.
• Emoji as default iconography. Prefer Lucide; emoji is only for briefs that explicitly call for a playful, native-emoji tone.
• "Feature card grid" 3×2 layouts of icon + heading + two-line blurb used as the generic answer to any content slide.
• Faux chrome: drop shadows, subtle gradients, and card borders added to decorate empty space instead of carrying meaning.
• Placeholder-looking real imagery: stock photos that obviously do not match the topic, or AI-generated images with visible artifacts. Prefer a well-composed data-image-placeholder over a bad real image.

Review Litmus

Before showing the deck, ask:

• Can the audience grasp the main point of each slide in 3–5 seconds?
• Does each slide have one dominant idea instead of multiple competing blocks?
• Is there one real visual anchor, not just decoration?
• Would this still feel premium without shadows, cards, or extra chrome?
• Can any line of copy, badge, or callout be removed without losing meaning?
• Does every color on the slide trace back to the approved style spec or a documented oklch harmonic extension of it?
• Does any slide lean on an AI slop trope? If so, replace it with composition, typography, or real imagery before review.

slides-grab Design Reference

These are the packaged design rules for installable slides-grab skills.

Package-first commands

• Validate slides: slides-grab validate --slides-dir <path>
• Build review viewer: slides-grab build-viewer --slides-dir <path>
• Launch editor: slides-grab edit --slides-dir <path>
• Generate a bespoke image asset: slides-grab image --prompt "<prompt>" --slides-dir <path> (default provider: god-tibo-imagen via codex login — no API key required)
• Download a web video into slide assets: slides-grab fetch-video --url <youtube-url> --slides-dir <path>
• Render tldraw diagrams: slides-grab tldraw --input <path> --output <path>
• List bundled design collections: slides-grab list-styles
• Open the visual style gallery in browser: slides-grab preview-styles

Slide spec

• Slide size: 720pt x 405pt (16:9)
• Font: Pretendard
• Semantic text tags only: p, h1-h6, ul, ol, li
• CSS colors must include #
• Avoid CSS gradients for PPTX-targeted decks

Icon guidance

• Prefer Lucide as the default icon library when a slide needs iconography.
• Avoid emoji as the default icon treatment; only use emoji when the brief explicitly calls for them.
• Keep icons visually consistent within a deck (stroke weight, size, and color should follow the slide's design tokens).

Asset rules

• Store deck-local assets in <slides-dir>/assets/
• Reference deck-local assets as ./assets/<file>
• Use slides-grab image --prompt "<prompt>" --slides-dir <path> with the default god-tibo-imagen provider (Codex CLI ChatGPT login) for bespoke generated images when helpful
• If an image comes from the web, download it into <slides-dir>/assets/ before referencing it
• If a video comes from YouTube or another supported page, use slides-grab fetch-video (or yt-dlp directly) to download it into <slides-dir>/assets/ before referencing it
• Keep local videos and their poster thumbnails together under <slides-dir>/assets/
• Default provider god-tibo-imagen reuses the local Codex ChatGPT login (~/.codex/auth.json) — run codex login once; no API key required. ⚠️ god-tibo-imagen uses an unsupported private Codex backend that may break without notice. Optional fallbacks: --provider codex (Codex/OpenAI gpt-image-2 via OPENAI_API_KEY; maps --aspect-ratio to the nearest supported OpenAI image size; --image-size 2K|4K is Nano Banana-only) or --provider nano-banana (Google gemini-3-pro-image-preview via GOOGLE_API_KEY / GEMINI_API_KEY; supports --image-size 2K|4K). If credentials are unavailable, fall back to web search + download
• Use tldraw-generated local assets for complex diagrams when possible
• Allow data: URLs only when the slide must be fully self-contained
• Do not leave remote http(s):// image URLs in saved slide HTML
• Never use absolute filesystem paths

Package-published template references

• templates/cover.html
• templates/contents.html
• templates/section-divider.html
• templates/content.html
• templates/statistics.html
• templates/split-layout.html
• templates/team.html
• templates/quote.html
• templates/timeline.html
• templates/closing.html
• templates/chart.html
• templates/diagram.html
• templates/diagram-tldraw.html
• templates/custom/
• templates/design-styles/README.md — bundled design collection reference derived from corazzon/pptx-design-styles
• templates/design-styles/preview.html — visual gallery of all 35 styles (open with slides-grab preview-styles)
• src/design-styles-data.js — full style specs (colors, fonts, layout, signature elements, things to avoid) for all 35 bundled styles; read this after the user picks a style to ground your design tokens

Review loop

• The design style is chosen in Stage 1 (Plan) and recorded in slide-outline.md's meta section (style: <id>). Do not re-open style selection in Stage 2 — read and apply the already-approved style.
• Generate or edit only the needed slide files.
• Prefer slides-grab image before remote image sourcing when the slide needs bespoke imagery.
• Prefer tldraw for complex diagrams instead of hand-building dense diagram geometry in HTML/CSS.
• Re-run validation after every generation/edit pass.
• Rebuild the viewer only after validation passes.
• Do not move to export until the user approves the reviewed deck.

Design Skill - Professional Presentation Design System

A skill for designing HTML slides for top-tier business presentations. Delivers minimal, refined design with professional typography and precise layouts.

---

Core Design Philosophy

1. Less is More

• Remove unnecessary decorative elements
• Content takes center stage
• Leverage whitespace aggressively
• Clear visual hierarchy

2. Typography-Driven Design

• Pretendard as the default font
• Font size contrast creates visual impact
• Fine-tuned letter-spacing and line-height
• Weight variations for emphasis

3. Strategic Color Usage

• Limited color palette (2-3 colors)
• Monotone base + accent color
• Background color sets the mood
• High contrast for readability

---

Base Settings

Slide Size (16:9 default)

<body style="width: 720pt; height: 405pt;">

Supported Aspect Ratios

Default Font Stack

font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Pretendard Webfont CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">

---

Typography System

Font Size Scale

Letter Spacing

/* Large titles: tight */
letter-spacing: -0.02em;

/* Medium titles */
letter-spacing: -0.01em;

/* Body: default */
letter-spacing: 0;

/* Captions, labels: slightly wider */
letter-spacing: 0.02em;

Line Height

/* Titles */
line-height: 1.2;

/* Body text */
line-height: 1.6 - 1.8;

/* Single-line text */
line-height: 1;

---

Color Palette System

All color palettes are now bundled as design styles accessible via slides-grab list-styles. The five original palettes are styles 31–35:

• executive-minimal — Refined business (warm white + black accent)
• sage-professional — Calm and trustworthy (sage green tones)
• modern-dark — High-impact dark (pure dark + white text)
• corporate-blue — Traditional business (white + blue accent)
• warm-neutral — Warm and approachable (cream + terracotta)

Run slides-grab list-styles to browse all 35 bundled styles, or design a fully custom palette when none fit.

---

Layout System

Spacing Standards (padding/margin)

/* Full slide padding */
padding: 48pt;

/* Section spacing */
gap: 32pt;

/* Element spacing */
gap: 16pt;

/* Text block internal spacing */
gap: 8pt;

Grid System

/* 2-column layout */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32pt;

/* 3-column layout */
grid-template-columns: repeat(3, 1fr);

/* Asymmetric layout (40:60) */
grid-template-columns: 2fr 3fr;

/* Asymmetric layout (30:70) */
grid-template-columns: 1fr 2.3fr;

---

Design Components

1. Badge/Tag

<p style="
  display: inline-block;
  padding: 6pt 14pt;
  border: 1px solid #1a1a1a;
  border-radius: 20pt;
  font-size: 10pt;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
">PRESENTATION</p>

2. Section Number

<p style="
  display: inline-block;
  padding: 4pt 12pt;
  background: #1a1a1a;
  color: #ffffff;
  border-radius: 4pt;
  font-size: 10pt;
  font-weight: 600;
">SECTION 1</p>

3. Logo Area

<div style="display: flex; align-items: center; gap: 8pt;">
  <div style="
    width: 20pt;
    height: 20pt;
    background: #1a1a1a;
    border-radius: 4pt;
    display: flex;
    align-items: center;
    justify-content: center;
  ">
    <p style="color: #fff; font-size: 12pt;">*</p>
  </div>
  <p style="font-size: 12pt; font-weight: 600;">LogoName</p>
</div>

4. Icon Button

<div style="
  width: 32pt;
  height: 32pt;
  border: 1px solid #1a1a1a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
">
  <p style="font-size: 14pt;">&#x2197;</p>
</div>

5. Divider Line

<div style="
  width: 100%;
  height: 1pt;
  background: #d4d4d0;
"></div>

6. Info Grid

<div style="display: flex; gap: 48pt;">
  <div>
    <p style="font-size: 10pt; color: #999; margin-bottom: 4pt;">Contact</p>
    <p style="font-size: 12pt; font-weight: 500;">334556774</p>
  </div>
  <div>
    <p style="font-size: 10pt; color: #999; margin-bottom: 4pt;">Date</p>
    <p style="font-size: 12pt; font-weight: 500;">March 2025</p>
  </div>
</div>

---

Slide Templates

1. Cover Slide

• Template file: templates/cover.html

2. Table of Contents (Contents)

• Template file: templates/contents.html

3. Section Divider

• Template file: templates/section-divider.html

4. Content Slide

• Template file: templates/content.html

5. Statistics/Data Slide

• Template file: templates/statistics.html

6. Image + Text (Split Layout)

• Template file: templates/split-layout.html

7. Team Introduction

• Template file: templates/team.html

8. Quote Slide

• Template file: templates/quote.html

9. Timeline Slide

• Template file: templates/timeline.html

10. Closing Slide

• Template file: templates/closing.html

11. Chart Slide

• Template file: templates/chart.html

12. Diagram Slide

• Template file: templates/diagram.html

13. Tldraw Diagram Slide

• Template file: templates/diagram-tldraw.html
• Use this when the slide needs a complex diagram that will be easier to author in tldraw and safer to export as a local image asset.

Custom Templates

• Custom template directory: templates/custom/
• Users can add template files as drop-in for reuse.

---

Advanced Design Patterns

Asymmetric Layout

Eye-catching compositions

/* Golden ratio */
grid-template-columns: 1fr 1.618fr;

/* Extreme asymmetry */
grid-template-columns: 1fr 3fr;

Overlay Text

Text placed over images

<div style="position: relative;">
  <div style="position: absolute; inset: 0; background: rgba(0,0,0,0.5);"></div>
  <div style="position: relative; z-index: 1;">
    <h2 style="color: #fff;">Overlay Text</h2>
  </div>
</div>

Gradient Overlay

<div style="
  background: linear-gradient(to right, #1a1a1a 0%, transparent 60%);
  position: absolute;
  inset: 0;
"></div>

Card Style

<div style="
  background: #ffffff;
  border-radius: 12pt;
  padding: 24pt;
  box-shadow: 0 2pt 8pt rgba(0,0,0,0.08);
"></div>

---

Chart / Diagram / Image Library Guide

1. Chart.js (Bar / Line / Pie)

CDN Link

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Usage Example

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16pt;">
  <div style="border: 1px solid #e5e5e0; border-radius: 10pt; padding: 10pt;">
    <p style="font-size: 10pt; margin-bottom: 6pt;">Bar Chart</p>
    <canvas id="barChart" style="width: 100%; height: 120pt;"></canvas>
  </div>
  <div style="border: 1px solid #e5e5e0; border-radius: 10pt; padding: 10pt;">
    <p style="font-size: 10pt; margin-bottom: 6pt;">Line Chart</p>
    <canvas id="lineChart" style="width: 100%; height: 120pt;"></canvas>
  </div>
  <div style="border: 1px solid #e5e5e0; border-radius: 10pt; padding: 10pt;">
    <p style="font-size: 10pt; margin-bottom: 6pt;">Pie Chart</p>
    <canvas id="pieChart" style="width: 100%; height: 120pt;"></canvas>
  </div>
</div>

<script>
  const labels = ['Q1', 'Q2', 'Q3', 'Q4'];
  const values = [12, 19, 15, 23];

  new Chart(document.getElementById('barChart'), {
    type: 'bar',
    data: { labels, datasets: [{ data: values, backgroundColor: ['#1f2937', '#2563eb', '#10b981', '#f59e0b'] }] },
    options: { animation: false, responsive: true, maintainAspectRatio: false }
  });

  new Chart(document.getElementById('lineChart'), {
    type: 'line',
    data: { labels, datasets: [{ data: values, borderColor: '#2563eb', backgroundColor: '#93c5fd', fill: true }] },
    options: { animation: false, responsive: true, maintainAspectRatio: false }
  });

  new Chart(document.getElementById('pieChart'), {
    type: 'pie',
    data: { labels, datasets: [{ data: [35, 28, 22, 15], backgroundColor: ['#2563eb', '#10b981', '#f59e0b', '#ef4444'] }] },
    options: { animation: false, responsive: true, maintainAspectRatio: false }
  });
</script>

Recommendations:

• Use options.animation: false for stable PPTX conversion.
• Set explicit width/height on canvas elements.

2. Mermaid (Flowchart / Sequence Diagram)

CDN Link

<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>

Usage Example

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20pt;">
  <div style="border: 1px solid #e5e5e0; border-radius: 10pt; padding: 10pt;">
    <p style="font-size: 10pt; margin-bottom: 6pt;">Flowchart</p>
    <pre class="mermaid">
flowchart LR
  A[Plan] --> B[Design]
  B --> C[Review]
  C --> D[Convert]
    </pre>
  </div>
  <div style="border: 1px solid #e5e5e0; border-radius: 10pt; padding: 10pt;">
    <p style="font-size: 10pt; margin-bottom: 6pt;">Sequence Diagram</p>
    <pre class="mermaid">
sequenceDiagram
  participant U as User
  participant A as Agent
  U->>A: Request slide
  A->>U: Return HTML
    </pre>
  </div>
</div>

<script>
  mermaid.initialize({ startOnLoad: true, securityLevel: 'loose' });
</script>

Recommendations:

• Write Mermaid DSL inside <pre class="mermaid">.
• Fix the diagram container size for stable layout.

3. Inline SVG Icon Guide

<div style="display: flex; align-items: center; gap: 8pt;">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M5 12h14M12 5l7 7-7 7" stroke="#1f2937" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
  </svg>
  <p style="font-size: 12pt; color: #1f2937;">Next step</p>
</div>

Rules:

• Always specify viewBox.
• Set explicit size via width/height.
• Use HEX values with # prefix for stroke/fill colors.
• Place text outside SVG using <p>, <h1>-<h6> tags.

4. Image Usage Rules (Local Asset / Data URL / Remote URL / Placeholder)

Canonical Local Asset Image

<img src="./assets/team-photo.png" alt="Team photo" style="width: 220pt; height: 140pt; object-fit: cover;">

Store the image at <slides-dir>/assets/team-photo.png.

Self-Contained Fallback (data: URL)

<img src="data:image/svg+xml;base64,..." alt="Illustration" style="width: 220pt; height: 140pt; object-fit: cover;">

Remote URL Source (Download Before Saving)

<img src="https://images.example.com/hero.png" alt="Hero image" style="width: 220pt; height: 140pt; object-fit: cover;">

If the image source starts on the web, download it into <slides-dir>/assets/ and change the saved slide HTML to ./assets/<file>.

Placeholder (Image Stand-In)

<div data-image-placeholder style="width: 220pt; height: 140pt; border: 1px dashed #c7c7c7; background: #f3f4f6; display: flex; align-items: center; justify-content: center;">
  <p style="font-size: 10pt; color: #6b7280; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;">Image Placeholder</p>
</div>

Rules:

• Always include alt on img tags.
• Use ./assets/<file> as the default image contract for slide HTML.
• Keep slide assets in <slides-dir>/assets/.
• data: URLs are allowed for fully self-contained slides.
• Do not leave remote http(s):// image URLs in saved slide HTML; download source images into <slides-dir>/assets/ and reference them as ./assets/<file>.
• Do not use absolute filesystem paths in slide HTML.
• Do not use non-body background-image for content imagery; use <img> instead.
• Use data-image-placeholder to reserve space when no image is available yet.
• Use high-resolution originals and fit with object-fit.

---

Text Usage Rules

Required Tags

<!-- All text MUST be inside these tags -->
<p>, <h1>-<h6>, <ul>, <ol>, <li>

<!-- Forbidden - ignored in PowerPoint conversion -->
<div>text here</div>
<span>text here</span>

Recommended Usage

<!-- Good -->
<h1 style="...">Title</h1>
<p style="...">Body text</p>

<!-- Bad -->
<div style="...">Text directly in div</div>

---

Output and File Structure

File Save Rules

<slides-dir>/   (default: slides/)
├── slide-01.html  (Cover)
├── slide-02.html  (Contents)
├── slide-03.html  (Section Divider)
├── slide-04.html  (Content)
├── ...
└── slide-XX.html  (Closing)

File Naming Rules

• Use 2-digit numbers: slide-01.html, slide-02.html
• Name sequentially
• No special characters or spaces

---

Workflow (Stage 2: Design + Human Review)

This skill is Stage 2. It works from the slide-outline.md approved by the user in Stage 1 (plan-skill).

Prerequisites

• slide-outline.md must exist and be approved by the user.

Steps

1. Analyze + Design: Read slide-outline.md, decide theme/layout, generate HTML slides 2. Diagram choice: If a slide needs a complex diagram (architecture, workflows, relationship maps, multi-node concepts), prefer tldraw. Export the diagram with slides-grab tldraw and reference the generated local asset from the slide HTML. 3. Validate slides: After slide generation or edits, automatically run:

   slides-grab validate --slides-dir <path>

4. Auto-fix validation issues: If validation fails, fix the source HTML/CSS and re-run validation until it passes 5. Auto-build viewer: After validation passes, automatically run:

   node scripts/build-viewer.js --slides-dir <path>

6. Guide user to review: Tell the user to check slides in the browser:

   open <slides-dir>/viewer.html

7. Revision loop: When the user requests changes to specific slides:

• Edit only the relevant HTML file
• Re-run slides-grab validate --slides-dir <path> and fix any failures
• Re-run node scripts/build-viewer.js --slides-dir <path> to rebuild the viewer
• Guide user to review again

8. Completion: Repeat the revision loop until the user signals approval for PPTX conversion

Absolute Rules

• Never start PPTX conversion without approval — PPTX conversion is the responsibility of pptx-skill and requires explicit user approval.
• Prefer tldraw for complex diagrams — Use slides-grab tldraw when the slide needs a non-trivial diagram instead of forcing dense diagram geometry into HTML/CSS.
• Never skip validation — Run slides-grab validate --slides-dir <path> after generation or edits and fix failures before review.
• Never forget to build the viewer — Run node scripts/build-viewer.js --slides-dir <path> every time slides are generated or modified.

---

Important Notes

1. CSS gradients: Not supported in PowerPoint conversion — replace with background images 2. Webfonts: Always include the Pretendard CDN link 3. Image paths: Use ./assets/<file> from each slide-XX.html; avoid absolute filesystem paths and do not leave remote http(s):// image URLs in saved slide HTML 4. Colors: Always include # prefix in CSS 5. Text rules: Never place text directly in div/span

Base Settings

Slide Size (16:9 default)

• Keep slide body at 720pt x 405pt.
• Use Pretendard as the default font stack.
• Include the Pretendard webfont CDN link when needed.

4. Image Usage Rules (Local Asset / Data URL / Remote URL / Placeholder)

• Always include alt on img tags.
• Use ./assets/<file> as the default image and video contract for slide HTML.
• Keep slide assets in <slides-dir>/assets/.
• Use tldraw-generated assets for complex diagrams whenever possible.
• Use slides-grab image --prompt "<prompt>" --slides-dir <path> with the default god-tibo-imagen provider (reuses Codex CLI ChatGPT login; no API key required) when a slide needs bespoke generated imagery.
• data: URLs are allowed for fully self-contained slides.
• Do not leave remote http(s):// image URLs in saved slide HTML; download source images into <slides-dir>/assets/ and reference them as ./assets/<file>.
• Store local videos under <slides-dir>/assets/, reference them as ./assets/<file>, and prefer poster="./assets/<file>" for export-friendly thumbnails.
• If a video starts on YouTube or another supported page, use slides-grab fetch-video --url <youtube-url> --slides-dir <path> (or yt-dlp directly if needed) before saving the slide HTML.
• Default provider god-tibo-imagen reuses the local Codex ChatGPT login (~/.codex/auth.json) — run codex login once; no API key required. ⚠️ god-tibo-imagen uses an unsupported private Codex backend that may break without notice. Optional alternatives: --provider codex (Codex/OpenAI gpt-image-2 via OPENAI_API_KEY; maps --aspect-ratio to the nearest supported OpenAI image size; --image-size 2K|4K is Nano Banana-only) or --provider nano-banana (Google gemini-3-pro-image-preview via GOOGLE_API_KEY or GEMINI_API_KEY; supports --image-size 2K|4K). If credentials are unavailable, fall back to web search + download into <slides-dir>/assets/.
• Do not use absolute filesystem paths in slide HTML.
• Do not use non-body background-image for content imagery; use <img> instead.
• Use data-image-placeholder to reserve space when no image is available yet.

Text Usage Rules

• All text must be inside <p>, <h1>-<h6>, <ul>, <ol>, or <li>.
• Never place text directly in <div> or <span>.

Typography Scale Rules

• Body copy minimum is 14pt on a 720pt × 405pt slide; prefer 16-20pt so copy reads cleanly at presentation distance and on PDF export.
• Absolute floor for captions, labels, footnotes, and meta text is 10pt. Never render any text below 10pt.
• Display and title text should scale well above body copy — prefer 36pt or larger so the slide's main takeaway reads in 3-5 seconds.
• If content does not fit at the minimum scale, cut content. Do not shrink type to accommodate more.
• Keep at most two typefaces across the deck. One display/headline face plus one body face is enough.

Color Usage Rules

• Pull every color from the approved style spec in src/design-styles-data.js or the user-provided brand tokens. Do not invent fresh standalone hex colors mid-slide.
• If the approved palette cannot cover a specific slide, extend it harmonically with oklch() — derive the new color from the existing accent, surface, or background — rather than picking a fresh hex from scratch.
• Keep one accent color per deck. Two background colors max across the entire deck, used to introduce rhythm between section dividers and content slides.
• Every CSS color must keep the # prefix and survive raster export to PPTX/PDF; avoid non-sRGB values that will flatten unexpectedly.

Icon Usage Rules

• Prefer Lucide as the default icon library for slide UI elements, callouts, and supporting visuals.
• Do not default to emoji for iconography; reserve emoji for cases where the brief explicitly wants a playful or native-emoji tone.
• Keep icon sizing, stroke weight, and color aligned with the deck's approved design tokens.

Workflow (Stage 2: Design + Human Review)

• After slide generation or edits, run slides-grab validate --slides-dir <path>.
• After validation passes, run slides-grab build-viewer --slides-dir <path>.
• Edit only the relevant HTML file during revision loops.
• When the brief explicitly calls for an image, the user requests one, or the slide clearly benefits from it, prefer slides-grab image before falling back to remote image sourcing.
• Prefer slides-grab tldraw + local exported assets for architecture, workflow, relationship, and other complex diagrams.
• Keep local videos and their poster thumbnails together under <slides-dir>/assets/.
• Never start PPTX conversion without explicit approval.
• Never forget to build the viewer after slide changes.
• Do not persist runtime-only editor/viewer injections in saved slide HTML.

Important Notes

• CSS gradients may not export cleanly to all formats; prefer solid colors or background images when possible.
• Always include the Pretendard CDN link.
• Use ./assets/<file> from each slide-XX.html for local images and videos, and avoid absolute filesystem paths.
• Always include # prefix in CSS colors.
• Never place text directly in div/span.