` 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) ```bash 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 ```bash STYLE_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 `` — it tells follow-up edits which style to keep the deck consistent with: ```html ``` ### 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 ``, 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** 1. 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}` 2. 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 | 3. 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** ```bash 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: " (Recommended)" description: "" - label: "" description: "" # ... 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`: ```markdown # 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 `` 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: 1. Read `image/base-prompt.md` for the prompt template 2. For each slide: build prompt from STYLE_INSTRUCTIONS + slide content + layout guidance from `image/layouts.md` 3. 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 `

` 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: 1. 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 2. Save as `/code/slides/{slug}/NN.png` 3. Auto-retry once on failure. If second attempt fails, continue remaining slides. 4. 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: ```html

``` **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

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