writing-storybook-stories

Read the component source to understand its props, emits, and slots, then create a co-located `ComponentName.stories.ts` file using `@storybook/vue3-vite`. Match the nearest sibling story's title pattern and add `tags: ['autodocs']`.

Use a stateful render function with `ref()` and `toRefs(args)` instead of mutating Storybook args directly. Bind the local ref with `v-model` in the template and pass other args as props.

Match the closest sibling story in the same folder tree rather than inventing a new pattern. In ComfyUI_frontend, common patterns include `Components/Button/Button`, `Components/Input/SearchInput`, and `Widgets/<WidgetName>`.

Yes, extract the named states from the Figma design first, then create explicit prop-driven stories such as `Disabled`, `Loading`, or `AllSizes`. Add an aggregate story like `AllVariants` when side-by-side comparison is useful.

Hardcoded `dark:` variants break theme consistency across the app. Use semantic tokens such as `bg-base-background` and `bg-node-component-surface` so stories render correctly under the project's theming system.