Slide Skill

/code/slides/ is an app. Each {slug}/ is a deck. You are the app's runtime; the user is its user.

Protocol (the contract)

Every deck must satisfy this. Full details + validation script: references/protocol.md.

/code/slides/
  .slide                           # Marker file (triggers gallery in frontend)
  {slug}/
    index.html                     # The deck — sections + nav engine
    outline.md                     # Deck outline (kept for re-generation)
    source.{ext}                   # Original input content
    prompts/                       # Per-slide prompts (IMAGE MODE ONLY)
      01-slide-{slug}.md, ...
    01.png, 02.png, ...            # One image per section (zero-padded, REQUIRED)

Invariants:

index.html has N <section data-page="1..N"> elements
NN.png exists for every section — no missing, no extra
After every change: run scripts/validate-protocol.sh before continuing
Update /code/INDEX.md after every create/update/delete

Style Service — HTML Mode (MANDATORY)

Every HTML deck's aesthetic comes from the live style service. There is no hardcoded list of aesthetics in this skill — styles are discovered at task time. Each style package ships concrete tokens, worked snippets, signature moves, don'ts, and a full reference deck.

Do not list aesthetics from memory. Always fetch the live list and present those options to the user. If memory contradicts the service, the service is correct.

1. Fetch the style list (once, at task start)

RELAY_URL="${REBYTE_RELAY_URL:-https://api.rebyte.ai}"
curl -sf "$RELAY_URL/api/styles" -o /tmp/styles.json
jq '.styles.slide' /tmp/styles.json

Each entry: { id, name, summary, signals, version, bundle_url }.

2. Recommend a style by matching signals

Compare the user's prompt against each style's signals array. The style with the most overlapping signals is the recommendation. If there's a tie, pick the first one. If no signals match any style, don't guess — ask the user to choose explicitly.

3. Confirm with the user — always show the LIVE list

During Step 2 Q2 (Style) below, present only the styles returned by /api/styles. Do not add, remove, or rename entries. Show each style's name and summary verbatim; mark the recommendation with (Recommended).

4. Download the selected style

STYLE_ID=<user-picked id>
BUNDLE_URL=$(jq -r --arg id "$STYLE_ID" '.styles.slide[] | select(.id==$id) | .bundle_url' /tmp/styles.json)
mkdir -p ~/.slide-styles
curl -sfL "$BUNDLE_URL" -o /tmp/style.zip
unzip -q -o /tmp/style.zip -d ~/.slide-styles/
ls ~/.slide-styles/$STYLE_ID/   # manifest.json, snippets/, reference/

Extracted layout is used as the design guideline in Step 7 (HTML generation). Full usage: html/html-slides.md.

5. Record the style in the generated deck

Every deck.html MUST include this meta tag in <head> — it tells follow-up edits which style to keep the deck consistent with:

<meta name="rebyte-style" content="<STYLE_ID>@<VERSION>">

Failure modes

Service unreachable (relay down, network error): stop. Tell the user the slide service is unreachable and ask whether to retry or switch to Image mode. Do NOT silently generate from memory.
No styles returned (empty list): same — tell the user and stop.
Agent's memory conflicts with the service: trust the service. Discard any remembered aesthetic names.

Edit / follow-up workflow

If the deck already exists and declares <meta name="rebyte-style" content="<id>@<version>">, keep using that same style id for edits — no need to fetch or ask again. If the existing deck has no such meta tag, it's a legacy deck: keep its existing data-aesthetic/data-font attributes as-is and edit only the content.

Workflow — New Deck

Copy this checklist and check off items as you complete them:

Slide Deck Progress:
- [ ] Step 1: Setup & Analyze
  - [ ] 1.1 Analyze content
  - [ ] 1.2 Check existing
  - [ ] 1.3 Fetch /api/styles (HTML mode) — see Style Service section
- [ ] Step 2: Confirmation (4-6 questions — Q2 style list comes from fetched /api/styles for HTML)
- [ ] Step 2.5: Download selected style bundle (HTML mode)
- [ ] Step 3: Generate outline
- [ ] Step 4: Review outline (conditional)
- [ ] Step 5: Generate prompts (IMAGE MODE ONLY)
- [ ] Step 6: Review prompts (IMAGE MODE ONLY, conditional)
- [ ] Step 7: Generate slides (BRANCH: html/ or image/)
- [ ] Step 8: Assemble & Validate
- [ ] Step 9: Output

Step 1: Setup & Analyze

1.1 Analyze Content

Save source content as /code/slides/{slug}/source.{ext}
- If pasted, save as source.md
- If uploaded to /code/raw/, copy from there (never modify raw/)
- Backup rule: If source.{ext} exists, rename to source-backup-YYYYMMDD-HHMMSS.{ext}
Determine:
- Topic and slug (2-4 words, kebab-case, max 40 chars, ASCII only)
- Audience (general, beginners, experts, executives)
- Language (from user's input language)
- Slide count:

Content	Slides
< 1000 words	5-10
1000-3000 words	10-18
3000-5000 words	15-25
> 5000 words	20-30

Analyze content signals for style recommendation:
- HTML mode: match the prompt against signals from /api/styles (see Style Service section above). Do this fetch now so the picked style is ready by Step 2.
- Image mode: use the Auto Style Selection tables below (preset mapping).

1.2 Check Existing Content

test -d "/code/slides/{slug}" && echo "exists"

If exists, ask user:

header: "Existing"
question: "Existing content found. How to proceed?"
options:
  - label: "Regenerate all"
    description: "Backup existing, regenerate from scratch"
  - label: "Regenerate images only"
    description: "Keep outline, regenerate slides"
  - label: "Exit"
    description: "Cancel, keep existing"

Step 2: Confirmation

Language: Use user's input language for all questions and responses.

Display summary before asking:

Content type + topic identified
Recommended style + slide count

Q1: Render Mode

header: "Mode"
question: "How should slides be rendered?"
options:
  - label: "HTML (Recommended)"
    description: "Rich HTML with pixel-perfect text, editable elements"
  - label: "Image"
    description: "Each slide is a generated image — artistic styles, visual storytelling"

Q2: Style

If HTML selected:

Present the styles returned by /api/styles (fetched in Step 1). Build the options list from jq '.styles.slide' output — one option per style, label = name (or id), description = summary. Mark the top signal-match as (Recommended).

Example (generated from live data, not hardcoded — your concrete list will differ):

header: "Style"
question: "Which style?"
options:
  - label: "<name of best-match style> (Recommended)"
    description: "<its summary from /api/styles>"
  - label: "<name of next style>"
    description: "<its summary>"
  # ... one entry per style returned by the service

If the service returned zero styles or is unreachable, follow the failure-mode guidance in the Style Service section — do not invent options.

After the user picks, immediately download the selected style bundle (see Style Service section, step 4).

If Image selected:

header: "Style"
question: "Which visual style?"
options:
  - label: "{recommended_preset} (Recommended)"
    description: "Best match based on content analysis"
  - label: "{alternative_preset}"
    description: "[description]"
  - label: "Custom dimensions"
    description: "Choose texture, mood, typography, density separately"

Auto Style Selection (Image mode):

Content Signals	Preset
tutorial, learn, education, guide	`sketch-notes`
hand-drawn, infographic, diagram	`hand-drawn-edu`
architecture, system, technical	`blueprint`
investor, business, corporate	`corporate`
executive, minimal, clean	`minimal`
launch, marketing, keynote	`bold-editorial`
entertainment, gaming	`dark-atmospheric`
explainer, science communication	`editorial-infographic`
gaming, retro, pixel	`pixel-art`
biology, chemistry, medical	`scientific`
history, heritage, vintage	`vintage`
lifestyle, wellness, artistic	`watercolor`
Default	`blueprint`

Full preset specs: image/styles/*.md. Dimensions: image/dimensions/*.md.

If "Custom dimensions" selected → Round 2 (4 questions for texture, mood, typography, density). See image/how-to.md for the full custom dimension question templates.

Q3: Audience

header: "Audience"
question: "Who is the primary reader?"
options:
  - label: "General readers (Recommended)"
  - label: "Beginners/learners"
  - label: "Experts/professionals"
  - label: "Executives"

Q4: Slide Count

header: "Slides"
question: "How many slides?"
options:
  - label: "{N} slides (Recommended)"
  - label: "Fewer ({N-3} slides)"
  - label: "More ({N+3} slides)"

Q5: Review Outline

header: "Outline"
question: "Review outline before generation?"
options:
  - label: "Yes, review outline (Recommended)"
  - label: "No, skip outline review"

Q6: Review Prompts (IMAGE MODE ONLY — skip for HTML)

header: "Prompts"
question: "Review prompts before generating images?"
options:
  - label: "Yes, review prompts (Recommended)"
  - label: "No, skip prompt review"

After confirmation: Store render mode, style, audience, slide count, review flags.

Step 3: Generate Outline

Save as /code/slides/{slug}/outline.md:

# Deck Outline: {Title}

**Slug**: {slug}
**Render**: html | image
**Style**: {aesthetic or preset name}
**Slides**: N
**Audience**: {audience}
**Language**: {language}

---

## Slide 1 of N
**Type**: cover
**Headline**: {main title}
**Sub-headline**: {tagline}
**Visual**: {description of imagery}

---

## Slide 2 of N
**Type**: content
**Headline**: {slide heading}
**Points**:
- {point 1}
- {point 2}
- {point 3}
**Visual**: {description}
**Layout**: bullets | two-col | stat | quote | code

Image mode: also build <STYLE_INSTRUCTIONS> block from style/dimensions. See image/how-to.md for STYLE_INSTRUCTIONS format and image/outline-template.md for the full template.

After generation: If skip_outline_review → skip Step 4.

Step 4: Review Outline (conditional)

Show slide-by-slide summary table. Ask:

header: "Confirm"
question: "Ready to proceed?"
options:
  - label: "Yes, proceed (Recommended)"
  - label: "Edit outline first"
  - label: "Regenerate outline"

Step 5: Generate Prompts (IMAGE MODE ONLY)

HTML mode skips this step — the outline is the spec, HTML itself is the artifact.

For image mode:

Read image/base-prompt.md for the prompt template
For each slide: build prompt from STYLE_INSTRUCTIONS + slide content + layout guidance from image/layouts.md
Save to /code/slides/{slug}/prompts/01-slide-{slug}.md, etc.

After generation: If skip_prompt_review → skip Step 6.

Step 6: Review Prompts (IMAGE MODE ONLY, conditional)

Show prompt list. Ask same confirm/edit/regenerate question.

Step 7: Generate Slides — THE BRANCH POINT

IF HTML → Read html/html-slides.md. Generate <section> elements with:

Correct aesthetic + font (from html/html-slides.md)
CSS variables (never hardcode colors)
data-page and data-bp-id attributes
Slide types: slide--title, slide--content, slide--stat, slide--quote, etc.
Run DOM Lint Pass after generation (see html/html-slides.md)

IF Image → Read image/how-to.md. For each slide:

Generate image via nano-banana (see references/nano-banana.md)
- aspectRatio: "16:9" (always)
- model: "flash" for iteration/previews, "pro" for final output
- imageSize: "1K" default, "2K" for high-res final exports
Save as /code/slides/{slug}/NN.png
Auto-retry once on failure. If second attempt fails, continue remaining slides.
Report progress: "Generated X/N"

Step 8: Assemble & Validate

Both modes: Build index.html using shared template (references/slide-template.md) and nav engine (references/css-patterns.md).

HTML mode: Sections already contain rich HTML. Run scripts/export-pages.sh to screenshot each section as NN.png.

Image mode: Wrap each image in a thin section:

<section class="slide slide--image" data-page="N">
  <img data-bp-id="img-N" crossorigin="anonymous"
       src="data:image/png;base64,{base64}"
       alt="Slide N: {headline}"
       style="width:100%;height:100%;object-fit:contain;display:block;" />
</section>

Cleanup: If deck went from M to N slides (N < M), delete stale (N+1).png through M.png.

Validate: Run scripts/validate-protocol.sh /code/slides/{slug}/index.html. MUST pass before you tell the user the deck is done.

Step 9: Finalize

Update /code/INDEX.md with deck info and last-updated date.

Summary in user's language:

Deck complete: "{Title}" — {N} slides ({render mode})
Location: /code/slides/{slug}/

Workflow — Edit Existing Deck

Skip the outline. Go straight to surgical edit.

├── [editing ...] anchor present     → User is viewing a deck, edit it
├── [selected ... bp=X page=N]       → Edit that specific element
├── "add a slide about X"            → Append a <section> to the open deck
├── "regenerate slide 3"             → Re-render that page
└── Ambiguous + multiple decks       → Ask with a numbered list (see editing.md)

Mode detection: Check index.html for slide--image class → image mode. Otherwise → HTML. If outline.md has Render: field, use that. Fallback: HTML.

HTML edits: by data-bp-id, preserve all attributes. See references/editing.md. Image edits: update prompt in prompts/, regenerate via nano-banana, replace NN.png. See image/how-to.md "Slide Modification" section. Image partial workflows: --regenerate N, --images-only. See image/how-to.md.

After ANY edit: run scripts/export-pages.sh (HTML) or replace PNG (image) → run scripts/validate-protocol.sh.

Language Handling

ALL responses use user's preferred language (questions, confirmations, progress, errors, summaries). Technical terms (style names, file paths, code) remain in English.

Detection priority: user's conversation language > outline language field > source content language.

All Files (complete reference)

Every file in this skill, with path from this SKILL.md:

Shared (`references/`)

Path	What
`references/protocol.md`	The contract: file layout, invariants, validation script
`references/css-patterns.md`	Slide engine CSS, transitions, controls, nav JS — every index.html
`references/slide-template.md`	Base HTML template for index.html
`references/nano-banana.md`	Image generation API: auth, models, parameters, saving
`references/editing.md`	Selection anchors, bp-id editing, visual magic layer
`references/gallery-engine.md`	Gallery view engine (spring physics)
`references/deploy.md`	How to deploy as standalone URL

Scripts (`scripts/`)

Path	What
`scripts/validate-protocol.sh`	Protocol enforcement — run after every generation
`scripts/export-pages.sh`	HTML → PNG screenshots (Chrome CDP)
`scripts/build-viewer.sh`	Build standalone viewer

HTML path (`html/`)

Path	What
`html/html-slides.md`	Aesthetics, fonts, CSS variables, slide types, typography, design rules, quality gates, DOM Lint Pass, blueprint attributes, images (CDN upload)

Image path (`image/`)

Path	What
`image/how-to.md`	Image generation guide: style system, presets, auto-selection, design philosophy, prompt engineering, partial workflows, slide modification
`image/base-prompt.md`	Base prompt template for nano-banana slide generation
`image/outline-template.md`	Outline structure with STYLE_INSTRUCTIONS block
`image/layouts.md`	Layout options and selection tips for image slides
`image/design-guidelines.md`	Audience, typography, color, visual element guidelines
`image/content-rules.md`	Content and style guidelines
`image/analysis-framework.md`	Content analysis for presentations
`image/modification-guide.md`	Edit, add, delete slide workflows
`image/config/preferences-schema.md`	EXTEND.md structure (optional user preferences)
`image/dimensions/presets.md`	Preset → dimension mapping (17 presets)
`image/dimensions/density.md`	Density dimension spec
`image/dimensions/mood.md`	Mood dimension spec
`image/dimensions/texture.md`	Texture dimension spec
`image/dimensions/typography.md`	Typography dimension spec
`image/styles/blueprint.md`	Blueprint preset spec
`image/styles/bold-editorial.md`	Bold Editorial preset spec
`image/styles/chalkboard.md`	Chalkboard preset spec
`image/styles/corporate.md`	Corporate preset spec
`image/styles/dark-atmospheric.md`	Dark Atmospheric preset spec
`image/styles/editorial-infographic.md`	Editorial Infographic preset spec
`image/styles/fantasy-animation.md`	Fantasy Animation preset spec
`image/styles/hand-drawn-edu.md`	Hand-Drawn Edu preset spec
`image/styles/intuition-machine.md`	Intuition Machine preset spec
`image/styles/minimal.md`	Minimal preset spec
`image/styles/notion.md`	Notion preset spec
`image/styles/pixel-art.md`	Pixel Art preset spec
`image/styles/scientific.md`	Scientific preset spec
`image/styles/sketch-notes.md`	Sketch Notes preset spec
`image/styles/vector-illustration.md`	Vector Illustration preset spec
`image/styles/vintage.md`	Vintage preset spec
`image/styles/watercolor.md`	Watercolor preset spec
`image/merge-to-pptx.ts`	Merge slides into PowerPoint (bun script)
`image/merge-to-pdf.ts`	Merge slides into PDF (bun script)

Publish

When the user is satisfied:

Deploy: rebyte deploy from /code/slides/{slug}/ → shareable URL
Download: user grabs the file directly
Fullscreen: open in new browser tab

Record published URLs in /code/output/.

Slide

Cloud-native skill

Documentation