bayes-platform: Skill for Claude Code

Storybook screenshot

Overview

Storybook renders every route and component of apps/web with seeded state and mocked services, and the whole Desk (apps/desk) on its MSW handlers, without the API, a database or a login. The script opens one story in headless Chromium, saves a PNG to read with the Read tool, and lists console errors and warnings, uncaught exceptions, failed requests and content wider than the viewport.

Steps

Run every command from the repository root. Pick a port and use it everywhere below as PORT: in the main checkout 6006 for apps/web, 6007 for apps/web-embed, 6008 for packages/ui, 6009 for apps/desk; in a worktree another one (for example 6016), since those may belong to another checkout's Storybook. In a fresh worktree, run npm ci first.

In a worktree with an environment (infra/worktree/.env exists), never start a Storybook on the host: the environment serves them. Skip steps 1 and 6, start the one you need with bayes wt up --with storybook-web (or storybook-ui, storybook-embed, storybook-desk), and pass its URL, which bayes wt up prints, as --base-url instead of --port: https://<name>-storybook.<domain> for apps/web, https://<name>-desk-storybook.<domain> for the Desk. Use the same URL in place of http://localhost:PORT in step 2.

1. Start Storybook as a background command (Bash run_in_background: true):

   npm --prefix apps/web run storybook -- -p PORT --ci --no-open
   

   For shared components, use --prefix packages/ui; for the embed widget, --prefix apps/web-embed; for the Desk, --prefix apps/desk.

2. Wait until it serves stories, as a background command (a foreground sleep may be blocked), then find the story id with a word of the screen you want:

   until curl -sf http://localhost:PORT/index.json >/dev/null; do sleep 3; done
   curl -s http://localhost:PORT/index.json | grep -o '"id":"[^"]*SEARCH_WORD[^"]*"'
   

   The Desk's stories are in apps/desk/src/stories/, one per state of its mocked world, in three folders: Desk/General (Desk.stories.tsx), Desk/Conversation and Desk/Extraction (desk-general--terms-to-accept, desk-conversation--conversation, desk-extraction--csv-run...): each opens the whole Desk at a page. An id is the story title in kebab case, --, then the export name: title: "routes/studio/project/membership" with export const Default gives routes-studio-project-membership--default. Open the story file (apps/web/src/stories/...) to see its exports and argTypes: the states you can reach come from both, for example a WithData export or a withMemberAgents toggle. Storybook silently ignores an arg the component does not use, so pass names you saw in the story's argTypes or args, or props of its component.