T-YHMF-sdf-storybook-screenshots
State: planning/draft · Impact: medium · Complexity: small
Give every story a repeatable light and dark screenshot at tauriMedium, as a moon task outside
check, so PRs can embed screenshots and review is visual.
There is no tooling to capture Storybook stories; screenshots have been taken by hand. The
playwright dependency is not installed in src-nuxt.
Proposed
Section titled “Proposed”scripts/story-shot.ts drives Playwright against
iframe.html?id=<story>&viewMode=story&globals=theme:dark at the tauriMedium viewport, waits for
the story to settle, and writes docs/screenshots/<slug>/{light,dark}.png. A moon task
sdf:story-shots runs it and is not part of check.
Approach
Section titled “Approach”- Confirm the theme global’s key and values in
.storybook/preview.ts(gotcha: the URL global must match it). - Add
playwrightas the only dependency change. - Write
scripts/story-shot.ts: argument is a story id or slug; sets viewporttauriMedium; renders light and dark; waits for settle. - Add the
sdf:story-shotsmoon task, excluded fromsdf:check. - Document usage in a header comment of the script.
| Area | Note |
|---|---|
solutions/ontological/desktop/src-nuxt/scripts/story-shot.ts | Playwright capture script |
solutions/ontological/desktop/src-nuxt/moon.yml | the sdf:story-shots task |
solutions/ontological/desktop/src-nuxt/package.json | playwright dependency only; this task is the one allowed to edit it |
solutions/ontological/desktop/src-nuxt/.storybook/preview.ts | read only; theme global key |
Acceptance criteria
Section titled “Acceptance criteria”- AC-1:
moon run sdf:story-shots -- <story>writes bothlight.pnganddark.pngunderdocs/screenshots/<slug>/. - AC-2: Running it twice on an unchanged story produces identical images.
- AC-3:
sdf:checkdoes not run the task and stays green. - AC-4:
moon run sdf:checkandmoon run sdf:testpass, run detached one at a time;nuxi typecheckand vue-tsc are never run locally (CI typechecks).
Out of scope
Section titled “Out of scope”- Embedding screenshots in PRs (done by the reviewer) and CI integration.
Dependencies
Section titled “Dependencies”- none
Discovery context
Section titled “Discovery context”- Plan:
/Users/sksizer/.claude/plans/toasty-soaring-ullman.md(the adoption wizard and operator screens, built in SDF) andN-6DUQ. - Control spec:
docs/planning/strategy/wizard-prototype.html; strategy: N-HETB-adopting-a-project. - Rules every agent follows are in the plan and the shared acceptance criteria above; the derive step later replaces fixtures with generated transport.