← WI-092 Host-side gamified Host Cards + CRED / trust-rating + event boosts ★ Live Board · Overview

WI-093 · Backlog · storybook-design-sync

Storybook in apps/web for /design-sync (browser-renderable UI for claude.ai/design mockups)

queued P3 low risk   Owner: Paul   Reviewer: Paul   0% · 0/0 tasks complete

Gates: — Requirements: — Updated: 2026-06-22

At a glance

CodeWI-093
Phase—
Order93 of 93
Story points5
Primary surfaceapps/web/.storybook + src/components/**/*.stories.tsx (+ round-2 *View extraction)
Retires—
Depends on—
Blocks—
Evidence
parked — ready-to-paste agent prompt authored + repo-verified in docs/tracking/design/storybook-design-sync-prompt.html (React 19/no-Tailwind/no-next-font; clean round-1 component tier identified).

Goals

Let Claude design mock up our real UI: stand up Storybook (@storybook/react-vite) so /design-sync can import prop-only, browser-renderable components into claude.ai/design. The real work is decoupling presentational UI from the App Router + Supabase, not the tooling.

Spec document

design/storybook-design-sync-prompt → · source ↗

Implementation — what to build

Prompt + plan

  • Ready-to-paste agent prompt: docs/tracking/design/storybook-design-sync-prompt.md. Run the agent in PLAN MODE first (component list, shims, React-19 version pins, round-2 View list).

Setup

  • @storybook/react-vite >= 8.4 (prefer 9.x) with react/react-dom 19 peers; import globals.css + token-padded decorator in preview; shim next/link, next/image, next/navigation via resolve.alias.

Round 1 (no View extraction)

  • AppHeader + SellerShell (next-shim only) + the ~13 fully-decoupled card/badge/chip/panel pieces (trovesnap/ItemCard,SummaryChips,PipelineProgress,…; marketplace/badges,SellerBrandCard,…).

Round 2

  • The ~12 supabase/api-coupled components via sibling *View extraction (original keeps the data wiring). Only after round 1 survives an import.

Fallback

  • packages/trove-ui (prop-only, tsup/esbuild ESM) if a Storybook dep in apps/web is unwanted — more durable (web + mobile/Trove Go) but no screenshot verification.

Checklist

  • No checklist yet.

Gates & testing

No milestone gates linked.

Requirements

No linked requirements.

Verify (done when)

`npm run storybook` boots with zero console errors and `npm run build-storybook` completes; a curated set of components render from PROPS ONLY (no Next runtime, no Supabase, no data fetching), visibly using the Trove tokens; Next-only imports (next/link, next/image, next/navigation) are shimmed via viteFinal; no story imports a live data client or Next server API; /design-sync imports at least the round-1 tier successfully.

Cost triggers

No paid API / infra spend triggered by this item.

Status & editing

queued   Sprint: Backlog

Edit status / sprint on the ★ Live Board → — changes are logged live with who / when / why.

Human-in-the-loop

No human tasks linked.

Findings

None recorded yet.

Concerns

None recorded yet.

Risks

None recorded yet.

Tech debt

None recorded yet.

Tools used

No tool calls recorded.

Files & artifacts

No files / artifacts recorded.

Update log

No log entries yet.