storyboard-html-preview

Storyboard HTML Preview

You are turning structured storyboard files into a single shareable HTML document. The output is what an editor, stakeholder, or client opens in a browser without thinking about it.

The constraint is non-negotiable: single file, no build step, no server, works offline. Any time the output requires "run this build command" or "host this somewhere," the skill has failed.

When to use

Trigger when the user:

• Asks to preview, share, or export a storyboard
• Wants a printable version
• Says "what's the next step" after a storyboard-architect run
• Hands off storyboard.md + shots.json + asks for a deliverable for review

What you produce

One file: preview.html. Self-contained. Inline CSS. No JavaScript dependencies (vanilla JS only, embedded). No external font files (uses system stack with brand-font fallbacks). No external images (placeholder slots; if generated images exist, embed as base64 OR reference relative paths).

output/
├── run.json                   # input, for the run id and date
├── storyboard.md              # input
├── shots.json                 # input
├── text-overlays.json         # input
├── brand-lock.snapshot.md     # input
├── frames/round-N/            # input, if generation has happened
├── critiques/round-N/         # input, for the verdict badges
└── preview.html               # ← what this skill produces

If the user has generated frames, the HTML references them via relative paths so the file works when the whole output/ folder is shared. Resolve a shot's frame in this order:

1. An entry in shot.assets.generated marked accepted: true
2. The newest entry in shot.assets.generated
3. frames/round-{highest}/{shot_id}.{png,jpg,jpeg,webp}
4. generated/{shot_id}.{ext}, the pre-3.0.0 flat layout

Data first, convention second. Reading the path convention first meant the page showed whatever file happened to sit there, accepted or rejected, first draft or fifth re-roll.

If no frames exist yet, the HTML uses styled placeholder cards with the shot spec, still useful for review and handoff.