Prototype

Make a small number of different, clickable directions for one feature in Storybook. Show them to the user. The user chooses the direction. Do not implement the feature in product code before the user chooses.

The usual call is short, for example $prototype new pricing page. Get the missing details from the issue and the code. Ask only when you cannot continue without the user.

Inputs

• Subject: the text after $prototype, an issue number, or an issue URL.
• Count: 3 variants, unless the user gives a different number.
• Style: follow the repository style and reuse its components, unless the user says otherwise (for example "go wild", "new visual style", "ignore the current design"). When the user sets the style aside, say which parts you changed.

Step 1, Understand the subject

1. When the subject is an issue, read it: gh issue view <n> --comments. Otherwise search open issues for the subject: gh issue list --search "<subject>" --state open. Use a match only when it is clearly the same feature.

2. Find the current code for the feature, when it exists. Read it and its existing stories. Note what the user can do now, and the states it has (empty, loading, error, long data, narrow width).

3. Find the surface:

   Surface	Story location	Stylesheet
   Desktop renderer, shared UI	src/renderer/stories/	Global; .storybook/preview.tsx loads it
   Public web (apps/auth-api)	Beside the page, in apps/auth-api/src/components/<area>/. For a new page, use landing/	Import apps/auth-api/src/styles.css in the story, as DiscordConnectPage.stories.tsx does

   A pricing page, landing page, or article is public web. A dialog, panel, sidebar, or settings screen is desktop.