writing-storybook-stories

name	writing-storybook-stories
description	Write or update Storybook stories for Vue components in ComfyUI_frontend. Use when adding, modifying, reviewing, or debugging `.stories.ts` files, Storybook docs, component demos, or visual catalog entries in `src/` or `apps/desktop-ui/`.

Write Storybook Stories for ComfyUI_frontend

Workflow

1. !!!!IMPORTANT Confirm the worktree is on a feat/* or fix/* branch. Base PRs on the local main, not a fork branch.
2. Read the component source first. Understand props, emits, slots, exposed methods, and any supporting types or composables.
3. Read nearby stories before writing anything.
   • Search stories: rg --files src apps | rg '\.stories\.ts$'
   • Inspect title patterns: rg -n "title:\\s*'" src apps --glob '*.stories.ts'
4. If a Figma link is provided, list the states you need to cover before writing stories.
5. Co-locate the story file with the component: ComponentName.stories.ts.
6. Add each variation on separate stories, except hover state. this should be automatically applied by the implementation and not require a separate story.
7. Run Storybook and validation checks before handing off.

Match Local Conventions

• Copy the closest neighboring story instead of forcing one universal template.
• Most repo stories use @storybook/vue3-vite. Some stories under apps/desktop-ui still use @storybook/vue3; keep the local convention for that area.
• Add tags: ['autodocs'] unless the surrounding stories in that area intentionally omit it.
• Use ComponentPropsAndSlots<typeof Component> when it helps with prop and slot typing.
• Keep functions stateful when needed. Use , , and instead of mutating Storybook args directly.