[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-storybook-stories":3,"mdc-5t4kkp-key":37,"related-org-storybook-stories":253,"related-repo-storybook-stories":339},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":35,"mdContent":36},"stories","manage UI components and design tokens","Invoke FIRST, before creating, editing, or deleting components, stories, styles, CSS, themes, colors, or design tokens — anything that changes how the UI looks, no exceptions. Also for starting or previewing Storybook to verify UI, requests to show, browse, or list components, stories, or UI states, and docs, props, or usage lookups.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"storybook","Storybook","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fstorybook.png","storybookjs",[13,17,20,23],{"name":14,"slug":15,"type":16},"CSS","css","tag",{"name":18,"slug":19,"type":16},"Themes","themes",{"name":21,"slug":22,"type":16},"UI Components","ui-components",{"name":24,"slug":25,"type":16},"Design","design",262,"https:\u002F\u002Fgithub.com\u002Fstorybookjs\u002Fmcp","2026-07-16T05:59:14.246482",null,36,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":34},[],"🤖","https:\u002F\u002Fgithub.com\u002Fstorybookjs\u002Fmcp\u002Ftree\u002FHEAD\u002Fpackages\u002Fclaude-plugin\u002Fskills\u002Fstories","---\nname: stories\ndescription: Invoke FIRST, before creating, editing, or deleting components, stories, styles, CSS, themes, colors, or design tokens — anything that changes how the UI looks, no exceptions. Also for starting or previewing Storybook to verify UI, requests to show, browse, or list components, stories, or UI states, and docs, props, or usage lookups.\n---\n\nPrerequisites:\n\n1. Storybook must be installed in the project. Invoke the `\u002Fstorybook-init` skill to set up Storybook, but only if the user explicitly invoked this skill and approves a Storybook installation.\n2. Storybook must be at least 10.5 (or `next` while 10.5 is not yet released). Invoke the `\u002Fstorybook-upgrade` skill to upgrade it, but only if the user\n   explicitly approved a Storybook upgrade.\n3. Ensure `@storybook\u002Faddon-mcp` is installed. If it is missing, install it with `npx storybook add @storybook\u002Faddon-mcp`.\n\nRun the Storybook dev server and every `storybook ai` command from the same working directory: the package where Storybook is installed (in a monorepo often a leaf package such as `packages\u002Fui`).\n\nRun `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help` and read the output in its **entirety** to get the **mandatory, ordered workflow** for working on UI changes, writing stories, and keeping stories in sync with every frontend component you create, modify, or delete. This workflow explains how to write stories, preview stories, and display a curated Storybook review.\n\nBefore invoking any `storybook ai` command for the first time in a session, run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai \u003Ccommand> --help` and read it fully. The top-level help only lists the commands; each command's payload shape and usage rules (which fields to include when) live in its own help output. Never guess a `--json` payload from the command name — a validation error only reports missing required fields, not the optional fields the workflow expects you to provide.\n\nSome commands require a running Storybook dev server. When Claude preview tooling is available, start the dev server through that tooling:\n\n1. Ensure there is a Storybook launch entry in `.claude\u002Flaunch.json` (the `preview_start` tool description documents the file format) with `autoPort: true` and `port: 6006`. Use the project's preferred package manager and existing `package.json` Storybook script instead of inventing a new command whenever possible.\n2. Start the Storybook launch entry with the `preview_start` tool.\n",{"data":38,"body":39},{"name":4,"description":6},{"type":40,"children":41},"root",[42,50,111,132,160,188,193],{"type":43,"tag":44,"props":45,"children":46},"element","p",{},[47],{"type":48,"value":49},"text","Prerequisites:",{"type":43,"tag":51,"props":52,"children":53},"ol",{},[54,69,90],{"type":43,"tag":55,"props":56,"children":57},"li",{},[58,60,67],{"type":48,"value":59},"Storybook must be installed in the project. Invoke the ",{"type":43,"tag":61,"props":62,"children":64},"code",{"className":63},[],[65],{"type":48,"value":66},"\u002Fstorybook-init",{"type":48,"value":68}," skill to set up Storybook, but only if the user explicitly invoked this skill and approves a Storybook installation.",{"type":43,"tag":55,"props":70,"children":71},{},[72,74,80,82,88],{"type":48,"value":73},"Storybook must be at least 10.5 (or ",{"type":43,"tag":61,"props":75,"children":77},{"className":76},[],[78],{"type":48,"value":79},"next",{"type":48,"value":81}," while 10.5 is not yet released). Invoke the ",{"type":43,"tag":61,"props":83,"children":85},{"className":84},[],[86],{"type":48,"value":87},"\u002Fstorybook-upgrade",{"type":48,"value":89}," skill to upgrade it, but only if the user\nexplicitly approved a Storybook upgrade.",{"type":43,"tag":55,"props":91,"children":92},{},[93,95,101,103,109],{"type":48,"value":94},"Ensure ",{"type":43,"tag":61,"props":96,"children":98},{"className":97},[],[99],{"type":48,"value":100},"@storybook\u002Faddon-mcp",{"type":48,"value":102}," is installed. If it is missing, install it with ",{"type":43,"tag":61,"props":104,"children":106},{"className":105},[],[107],{"type":48,"value":108},"npx storybook add @storybook\u002Faddon-mcp",{"type":48,"value":110},".",{"type":43,"tag":44,"props":112,"children":113},{},[114,116,122,124,130],{"type":48,"value":115},"Run the Storybook dev server and every ",{"type":43,"tag":61,"props":117,"children":119},{"className":118},[],[120],{"type":48,"value":121},"storybook ai",{"type":48,"value":123}," command from the same working directory: the package where Storybook is installed (in a monorepo often a leaf package such as ",{"type":43,"tag":61,"props":125,"children":127},{"className":126},[],[128],{"type":48,"value":129},"packages\u002Fui",{"type":48,"value":131},").",{"type":43,"tag":44,"props":133,"children":134},{},[135,137,143,145,151,153,158],{"type":48,"value":136},"Run ",{"type":43,"tag":61,"props":138,"children":140},{"className":139},[],[141],{"type":48,"value":142},"STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help",{"type":48,"value":144}," and read the output in its ",{"type":43,"tag":146,"props":147,"children":148},"strong",{},[149],{"type":48,"value":150},"entirety",{"type":48,"value":152}," to get the ",{"type":43,"tag":146,"props":154,"children":155},{},[156],{"type":48,"value":157},"mandatory, ordered workflow",{"type":48,"value":159}," for working on UI changes, writing stories, and keeping stories in sync with every frontend component you create, modify, or delete. This workflow explains how to write stories, preview stories, and display a curated Storybook review.",{"type":43,"tag":44,"props":161,"children":162},{},[163,165,170,172,178,180,186],{"type":48,"value":164},"Before invoking any ",{"type":43,"tag":61,"props":166,"children":168},{"className":167},[],[169],{"type":48,"value":121},{"type":48,"value":171}," command for the first time in a session, run ",{"type":43,"tag":61,"props":173,"children":175},{"className":174},[],[176],{"type":48,"value":177},"STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai \u003Ccommand> --help",{"type":48,"value":179}," and read it fully. The top-level help only lists the commands; each command's payload shape and usage rules (which fields to include when) live in its own help output. Never guess a ",{"type":43,"tag":61,"props":181,"children":183},{"className":182},[],[184],{"type":48,"value":185},"--json",{"type":48,"value":187}," payload from the command name — a validation error only reports missing required fields, not the optional fields the workflow expects you to provide.",{"type":43,"tag":44,"props":189,"children":190},{},[191],{"type":48,"value":192},"Some commands require a running Storybook dev server. When Claude preview tooling is available, start the dev server through that tooling:",{"type":43,"tag":51,"props":194,"children":195},{},[196,241],{"type":43,"tag":55,"props":197,"children":198},{},[199,201,207,209,215,217,223,225,231,233,239],{"type":48,"value":200},"Ensure there is a Storybook launch entry in ",{"type":43,"tag":61,"props":202,"children":204},{"className":203},[],[205],{"type":48,"value":206},".claude\u002Flaunch.json",{"type":48,"value":208}," (the ",{"type":43,"tag":61,"props":210,"children":212},{"className":211},[],[213],{"type":48,"value":214},"preview_start",{"type":48,"value":216}," tool description documents the file format) with ",{"type":43,"tag":61,"props":218,"children":220},{"className":219},[],[221],{"type":48,"value":222},"autoPort: true",{"type":48,"value":224}," and ",{"type":43,"tag":61,"props":226,"children":228},{"className":227},[],[229],{"type":48,"value":230},"port: 6006",{"type":48,"value":232},". Use the project's preferred package manager and existing ",{"type":43,"tag":61,"props":234,"children":236},{"className":235},[],[237],{"type":48,"value":238},"package.json",{"type":48,"value":240}," Storybook script instead of inventing a new command whenever possible.",{"type":43,"tag":55,"props":242,"children":243},{},[244,246,251],{"type":48,"value":245},"Start the Storybook launch entry with the ",{"type":43,"tag":61,"props":247,"children":249},{"className":248},[],[250],{"type":48,"value":214},{"type":48,"value":252}," tool.",{"items":254,"total":338},[255,274,286,299,306,318,328],{"slug":256,"name":256,"fn":257,"description":258,"org":259,"tags":260,"stars":271,"repoUrl":272,"updatedAt":273},"setup-react-native-storybook","configure Storybook for React Native projects","Set up Storybook for React Native in Expo, React Native CLI, or Re.Pack projects. Use when adding Storybook to a project, configuring metro.config.js with withStorybook, creating .rnstorybook configuration files, setting up Storybook routes in Expo Router, configuring getStorybookUI, or adding the StorybookPlugin to a Re.Pack rspack\u002Fwebpack config. Covers Expo, Expo Router, plain React Native CLI, and Re.Pack setups.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[261,264,267,270],{"name":262,"slug":263,"type":16},"Expo","expo",{"name":265,"slug":266,"type":16},"React Native","react-native",{"name":268,"slug":269,"type":16},"Testing","testing",{"name":21,"slug":22,"type":16},1304,"https:\u002F\u002Fgithub.com\u002Fstorybookjs\u002Freact-native","2026-07-16T05:59:11.855468",{"slug":275,"name":275,"fn":276,"description":277,"org":278,"tags":279,"stars":271,"repoUrl":272,"updatedAt":285},"upgrading-react-native-storybook","upgrade React Native Storybook versions","Incrementally upgrade React Native Storybook across the supported migration paths. Use when upgrading `@storybook\u002Freact-native` projects from 5.3.x to 6.5.x, 6.5.x to 7.6.x, 7.6.x to 8.3.x, 8.x to 9.x, or 9.x to 10.x. Detect the currently installed Storybook version, choose only the next migration step, update dependencies and config, regenerate `storybook.requires`, convert remaining `storiesOf` stories to CSF during the `6.5.x -> 7.6.x` upgrade, and stop after a single version hop instead of jumping multiple major versions at once.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[280,283,284],{"name":281,"slug":282,"type":16},"Migration","migration",{"name":265,"slug":266,"type":16},{"name":21,"slug":22,"type":16},"2026-07-16T06:00:45.492255",{"slug":287,"name":287,"fn":288,"description":289,"org":290,"tags":291,"stars":271,"repoUrl":272,"updatedAt":298},"writing-react-native-storybook-stories","write React Native Storybook stories","Create and edit React Native Storybook stories using Component Story Format (CSF). Use when writing .stories.tsx files, adding stories to React Native components, configuring Storybook addons (controls, actions, backgrounds, notes), setting up argTypes, decorators, parameters, or working with portable stories for testing. Applies to any task involving @storybook\u002Freact-native story authoring.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[292,295,296,297],{"name":293,"slug":294,"type":16},"Documentation","documentation",{"name":265,"slug":266,"type":16},{"name":268,"slug":269,"type":16},{"name":21,"slug":22,"type":16},"2026-07-16T05:59:13.908569",{"slug":4,"name":4,"fn":5,"description":6,"org":300,"tags":301,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[302,303,304,305],{"name":14,"slug":15,"type":16},{"name":24,"slug":25,"type":16},{"name":18,"slug":19,"type":16},{"name":21,"slug":22,"type":16},{"slug":307,"name":307,"fn":308,"description":309,"org":310,"tags":311,"stars":26,"repoUrl":27,"updatedAt":317},"storybook-init","initialize Storybook in new projects","Use when adding Storybook to a project that does not have Storybook configured yet.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[312,315,316],{"name":313,"slug":314,"type":16},"Configuration","configuration",{"name":268,"slug":269,"type":16},{"name":21,"slug":22,"type":16},"2026-07-16T06:00:45.823925",{"slug":319,"name":319,"fn":320,"description":321,"org":322,"tags":323,"stars":26,"repoUrl":27,"updatedAt":327},"storybook-setup","configure Storybook preview and stories","Use this skill when Storybook is already installed and the user wants a working `preview` file and stories for real components.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[324,325,326],{"name":313,"slug":314,"type":16},{"name":268,"slug":269,"type":16},{"name":21,"slug":22,"type":16},"2026-07-16T05:59:14.581999",{"slug":329,"name":329,"fn":330,"description":331,"org":332,"tags":333,"stars":26,"repoUrl":27,"updatedAt":337},"storybook-upgrade","upgrade existing Storybook installations","Use this skill when Storybook exists but needs an upgrade.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[334,335,336],{"name":313,"slug":314,"type":16},{"name":281,"slug":282,"type":16},{"name":21,"slug":22,"type":16},"2026-07-16T05:59:14.927035",7,{"items":340,"total":366},[341,348,354,360],{"slug":4,"name":4,"fn":5,"description":6,"org":342,"tags":343,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[344,345,346,347],{"name":14,"slug":15,"type":16},{"name":24,"slug":25,"type":16},{"name":18,"slug":19,"type":16},{"name":21,"slug":22,"type":16},{"slug":307,"name":307,"fn":308,"description":309,"org":349,"tags":350,"stars":26,"repoUrl":27,"updatedAt":317},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[351,352,353],{"name":313,"slug":314,"type":16},{"name":268,"slug":269,"type":16},{"name":21,"slug":22,"type":16},{"slug":319,"name":319,"fn":320,"description":321,"org":355,"tags":356,"stars":26,"repoUrl":27,"updatedAt":327},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[357,358,359],{"name":313,"slug":314,"type":16},{"name":268,"slug":269,"type":16},{"name":21,"slug":22,"type":16},{"slug":329,"name":329,"fn":330,"description":331,"org":361,"tags":362,"stars":26,"repoUrl":27,"updatedAt":337},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[363,364,365],{"name":313,"slug":314,"type":16},{"name":281,"slug":282,"type":16},{"name":21,"slug":22,"type":16},4]