Slides Grab Plan

slides-grab Plan Skill (Codex)

Use this when the user asks to start a new presentation from scratch.

Goal

Produce an approved slide-outline.md before any slide HTML generation.

Inputs

• Topic and intent
• Audience
• Tone and constraints
• Optional research findings

Output

• slide-outline.md (must include style: <id> in meta section)

Workflow

1. Analyze user goal and audience. 2. Style selection (mandatory, before outline): Three paths are accepted, in priority order: a. Bundled style — run slides-grab list-styles, shortlist 2–3 styles, and get explicit user approval. Optionally offer slides-grab preview-styles for visual preview. Record as style: <id>. b. Custom DESIGN.md path — if a local DESIGN.md exists (e.g. provided directly or fetched via slides-grab import-design <https-url>), inspect it with slides-grab show-design ./DESIGN.md and confirm with the user. c. Free-form custom direction — if neither bundled nor DESIGN.md fits, propose a written custom direction and get approval. 3. DESIGN.md → DESIGN.slides.md conversion (mandatory when path 2b was chosen):

• A DESIGN.md imported from voltagent/awesome-design-md or similar sources describes a marketing website (top-nav, hero-band, CTA buttons, pricing cards, footer-band). Slides are single 720pt × 405pt frames with no scroll, no nav, no clicks — copying web components into slides produces deck pages that look like landing pages.
• Read references/design-md-to-slides-conversion.md for the canonical conversion guide.
• Translate the imported ./DESIGN.md into a sibling ./DESIGN.slides.md next to it. Leave the original DESIGN.md untouched. The DESIGN.slides.md MUST follow the Output Contract in the reference and apply every row of the web → slide mapping table (top-nav → eyebrow strip, hero-band → cover layout, CTA buttons → kicker text, footer-band → thin footer strip, pricing grids → dropped, etc.).
• Present a 5–10 line summary of the conversion to the user (kept tokens + dropped web sections + new slide layouts inferred) and wait for explicit approval before continuing.
• After approval, run slides-grab show-design ./DESIGN.slides.md to confirm the parser reads it cleanly.

4. Create or revise slide-outline.md with ordered slides and key messages. Record the approved style reference in the meta section:

• bundled style → style: <id>
• converted DESIGN.slides.md → style: ./DESIGN.slides.md
• free-form custom direction → leave a one-paragraph style: block describing it

5. Present a concise summary to user. 6. Repeat revisions until explicit approval.

Rules

• Do not write the outline before the user approves a style. Style selection comes first.
• Do not generate slide HTML (<slides-dir>/slide-*.html) in this stage.
• Keep scope to structure, narrative, and style selection.
• Ask for approval before moving to design.
• Assume later stages run through the packaged slides-grab CLI.
• Use the packaged CLI and bundled references only; do not depend on unpublished agent-specific files.

Reference

If needed, use the bundled outline reference:

• references/outline-format.md
• references/plan-workflow-reference.md — archived detailed planning workflow and organizer-agent guidance
• references/design-md-to-slides-conversion.md — DESIGN.md (web) → DESIGN.slides.md (slide) translation guide, including the structured output template and the web → slide mapping table

DESIGN.md → DESIGN.slides.md Conversion

Web-flavored DESIGN.md files (Google Stitch / voltagent/awesome-design-md convention) describe marketing websites: top-nav, hero-band, CTA buttons, pricing cards, footer-band, multi-section scrolling pages.

A slide is a 720pt × 405pt single frame, no scroll, no clicks, no nav. Pasting a web design system into slides produces deck pages that look like landing pages — wrong slot.

This document is the canonical reference the agent uses to translate a DESIGN.md into a sibling DESIGN.slides.md that fits the slide medium.

Output contract

The agent MUST produce a file named DESIGN.slides.md next to the source DESIGN.md at the deck root. The original DESIGN.md MUST be left untouched.

DESIGN.slides.md MUST contain the following sections, in this order:

---
version: alpha
name: <inherited from DESIGN.md `name`>
description: <one-sentence slide-flavored mood — not a marketing paragraph>
derived-from: <relative path to source DESIGN.md, e.g. ./DESIGN.md>
medium: slides-16x9
colors:
  <token-name>: <#hex>
---

## Overview
One short paragraph describing the slide deck's atmosphere — material, energy,
typographic voice. No mention of pages, scroll, nav, CTA, pricing, or routes.

## Background
Solid fills only. List 1-3 canvas modes that alternate across slides.

## Colors
Markdown table of the slide-active palette. Drop any role that exists only
for hover/focus/disabled states (those don't apply to static slides).

## Typography
Two faces: a display face for headlines and a body face for everything else.
Optionally a mono face for eyebrows / IDs / code motifs. Include working
font-stack fallbacks (Google Fonts that render in Playwright capture).

## Slide Layouts
Enumerate the slide archetypes this design system supports. ALWAYS include
at least these five:
- **Cover** — single dominant headline, no nav, no CTA buttons
- **Section divider** — short anchor headline, optional eyebrow
- **Content** — copy + single supporting visual (60/40 or 50/50 split)
- **Statistic** — one oversized number, one short caption
- **Closing** — final thesis line, footer/page-number strip

For each layout, describe the dominant rhythm in 1-3 bullets — what scale
carries the slide, what's allowed in the corners, what's NOT allowed.

## Signature Motifs
Two-to-five small visual elements that make the deck recognizably this brand.
Examples: a colored underline, a strike-through wordmark, a dot cluster,
a serif italic accent on one word per slide. Each motif MUST be reproducible
purely with inline HTML + CSS on a single slide.

## Avoid
Explicit list of web-only patterns the slides MUST NOT carry. ALWAYS include:
- top-nav bars, sticky headers, menu rows
- clickable CTA buttons ("Sign up", "Start free trial", "Read docs")
- multi-column footer-bands beyond a single thin strip with attribution + page number
- pricing tier grids
- hover/focus/active state styling
- atmospheric multi-stop gradients (unless the source spec mandates them)
Plus any AVOID rules carried over from the source DESIGN.md.

## Source mapping (for traceability)
A short bullet list showing how each web concept was mapped. Format:
- `<web concept from DESIGN.md>` → `<slide concept in DESIGN.slides.md>` OR `dropped`

Web → slide mapping rules

Apply these mappings while converting. The left column is what DESIGN.md contains; the right column is the slide-appropriate replacement.

Preservation rules (do NOT translate away)

The conversion MUST carry over from DESIGN.md unchanged:

• The color palette (canvas, surface, ink, primary accent, secondary accents)
• The type pairing — display face vs body face vs mono face
• The mood / atmosphere — warm-editorial vs dark-product vs pastel-pop is the

whole reason the user imported this DESIGN.md; the slide deck must still feel like the source brand

• Brand-specific signature motifs (spike-mark, hard offset shadow, slab-serif italic

accent, etc.) — translate the surface, not the identity

Process checklist for the agent

1. Read ./DESIGN.md in full. 2. Identify which sections are web-only and slot them through the mapping table. 3. Identify the design tokens (colors, type, spacing) that survive unchanged. 4. Draft ./DESIGN.slides.md using the Output Contract template. 5. Show the user a short summary: 5–10 lines covering kept tokens + dropped web sections + new slide layouts inferred. 6. Wait for explicit user approval ("looks good" or specific edits) before moving to outline / slide generation. 7. Once approved, record style: ./DESIGN.slides.md in slide-outline.md.

When DESIGN.slides.md should be re-converted

Suggest a re-conversion when:

• The source DESIGN.md is replaced / re-imported with a different brand
• The user explicitly asks for a different deck flavor (e.g. "more editorial",

"less code-heavy")

• A slide deck visibly carries web-only artifacts (nav bars, CTAs, footers

with link columns) that the current DESIGN.slides.md doesn't forbid

A DESIGN.slides.md is never regenerated automatically. It is the agent's job, in conversation with the user.

slides-grab Plan Reference

Use this bundled reference when planning a new deck.

Stage boundary

• Planning stops at an approved slide-outline.md.
• Do not generate slide-*.html in this stage.
• Do not start design until the user explicitly approves the outline.

Expected slide-outline.md shape

# [Presentation Title]

## Meta
- **Topic**: ...
- **Target Audience**: ...
- **Tone/Mood**: ...
- **Slide Count**: N slides
- **Aspect Ratio**: 16:9

## Slide Composition

### Slide 1 - Cover
- **Type**: Cover
- **Title**: ...
- **Subtitle**: ...

### Slide 2 - Table of Contents
- **Type**: Contents
- **Items**: ...

### Slide 3 - [Title]
- **Type**: Section Divider / Content / Statistics / Quote / Timeline / ...
- **Key Message**: ...
- **Details**:
  - ...

### Slide N - Closing
- **Type**: Closing
- **Message**: ...

Planning reminders

• Keep the outline concise and reviewable.
• Present total slides, slide order, and each slide's role to the user.
• Revise until explicit approval.

Plan Skill - Presentation Outline Planning

A supervisor skill that takes a user topic, generates a slide-outline.md outline, and manages a revision loop until the user approves.

Does not write the outline directly — delegates the work to organizer-agent.

---

Role Assignment

---

Input

• User topic (required)
• Research results (optional — research-agent output)
• Reference materials, tone/mood requests, etc.

Output

• User-approved slide-outline.md

---

Workflow

1. Delegate Draft Creation to organizer-agent

Use the Task tool to call organizer-agent and generate a slide-outline.md draft.

Include in the prompt:

• User topic and requirements
• Research results (if available)
• Tone/mood requests
• Expected format for slide-outline.md (see format below)

2. Present Outline to User

Read the generated slide-outline.md and present to the user:

• Total number of slides
• Slide order and each slide's role
• Key message summary
• Design tone/mood

3. Feedback Revision Loop

When user provides feedback: 1. Organize the feedback 2. Call organizer-agent again with the existing slide-outline.md and feedback 3. Present the revised outline to the user 4. Repeat until user approves

4. Approval Confirmation

Complete the outline stage when the user explicitly approves.

---

Absolute Rules

1. Never proceed to the next stage without approval — Maintain the revision loop until the user explicitly signals approval ("looks good", "approved", "OK", "proceed", etc.). 2. Never write the outline directly — Always delegate to organizer-agent. 3. Never start HTML generation — This skill's scope ends at slide-outline.md approval. HTML generation is the responsibility of design-skill.

---

Expected slide-outline.md Format

# [Presentation Title]

## Meta
- **Topic**: ...
- **Target Audience**: ...
- **Tone/Mood**: ...
- **Slide Count**: N slides
- **Aspect Ratio**: 16:9

## Slide Composition

### Slide 1 - Cover
- **Type**: Cover
- **Title**: ...
- **Subtitle**: ...

### Slide 2 - Table of Contents
- **Type**: Contents
- **Items**: ...

### Slide 3 - [Title]
- **Type**: Section Divider / Content / Statistics / Quote / Timeline / ...
- **Key Message**: ...
- **Details**:
  - ...
  - ...

...

### Slide N - Closing
- **Type**: Closing
- **Message**: ...

---

organizer-agent Call Examples

Task tool call:
- subagent_type: "organizer-agent"
- prompt: |
    Create a presentation outline for the following topic.

    Topic: [user topic]
    Requirements: [user requirements]
    Research results: [if available]

    Save as slide-outline.md.
    [include expected format]

For feedback revisions:

Task tool call:
- subagent_type: "organizer-agent"
- prompt: |
    Revise the existing outline.

    Current outline: [slide-outline.md content]
    User feedback: [feedback content]

    Save the revised slide-outline.md.