MCPInstall

upgrading-react-native-storybook

by storybookjsFrontend & Design

Incrementally upgrade React Native Storybook across the supported migration paths. Use when upgrading @storybook/react-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.

Installs
303
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/storybookjs/react-native --skill upgrading-react-native-storybook
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads upgrading-react-native-storybook automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

React Native Storybook Upgrades

Upgrade one supported version step at a time. Do not jump from an older major directly to the latest release in a single pass.

Rules

  • Detect the project's package manager first and use it consistently.
  • Detect the currently installed Storybook version from package.json, lockfiles, and config files before editing anything.
  • Apply exactly one migration step per run. If a project is multiple versions behind, complete the next hop, verify it, and then report the next required hop.
  • During the 6.5.x -> 7.6.x step, convert any remaining storiesOf stories to CSF instead of preserving compatibility mode.
  • Preserve the project's existing app structure. Only make the migration changes required for the current step.

Version Detection

Look at these signals together:

  • package.json versions for @storybook/react-native, storybook, @storybook/react, and @storybook/addon-ondevice-*
  • Whether the config folder is .storybook/ or .rnstorybook/
  • Metro config imports such as metro/withStorybook, metro/withStorybookConfig, or default-vs-named withStorybook
  • Story format usage: CSF vs storiesOf
  • Generated file names such as storybook.requires.js vs storybook.requires.ts

If the version is ambiguous, stop and clarify the current installed version instead of guessing.

Migration Selection

Use exactly one reference file:

  1. 9.x -> 10.x: references/from-9-to-10.md
  2. 8.x -> 9.x: references/from-8-to-9.md
  3. 7.6.x -> 8.3.x: references/from-7-6-to-8-3.md
  4. 6.5.x -> 7.6.x: references/from-6-5-to-7-6.md
  5. 5.3.x -> 6.5.x: references/from-5-3-to-6-5.md

Workflow

  1. Confirm the current Storybook version and whether the repo uses Expo, Expo Router, React Native CLI, or Re.Pack.
  2. Pick the next migration step only. Never bundle multiple major upgrades together.
  3. Apply the dependency, config, and source-file changes from the matching reference.
  4. Regenerate storybook.requires or restart Metro when that step requires it.
  5. Run the smallest useful verification available for the repo, such as the generation script, tests, lint, or the local Storybook app launch path.
  6. If the repo still is not on the user's target version, stop with a clear note describing the next required migration step.

Output Expectations

When you finish a migration step, report:

  • The version hop that was completed
  • The files and config surfaces that changed
  • The verification you ran, or what you could not run
  • The next required migration hop, if the project is still behind

FAQ

What does the upgrading-react-native-storybook skill do?

Incrementally upgrade React Native Storybook across the supported migration paths. Use when upgrading @storybook/react-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.

How do I install upgrading-react-native-storybook?

Run npx skills add https://github.com/storybookjs/react-native --skill upgrading-react-native-storybook in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/upgrading-react-native-storybook/ (personal) or .claude/skills/upgrading-react-native-storybook/ (project).

Which AI agents can use upgrading-react-native-storybook?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is upgrading-react-native-storybook safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains upgrading-react-native-storybook?

It is published by storybookjs in storybookjs/react-native. It has 303 recorded installs.

More from storybookjs/react-native

View all →

writing-react-native-storybook-stories

storybookjs/react-native

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/react-native story authoring.

Frontend & Design683 installs

setup-react-native-storybook

storybookjs/react-native

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/webpack config. Covers Expo, Expo Router, plain React Native CLI, and Re.Pack setups.

Mobile528 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs