The agent edits package.json, the lockfile and the Metro or Re.Pack config and creates a .rnstorybook folder
Dependencies install through the project's package manager and pull packages from the registry

This is third-party code. Review the repository files before installing.

What it does

The skills folder of the Storybook for React Native repository holds three skills. setup-react-native-storybook adds Storybook v10 to an existing project: from the project's signals (rspack or webpack with @callstack/repack, expo-router with an app folder, plain Expo, React Native CLI) it picks one of four flows, detects the package manager from the lockfile and runs create storybook with the react_native type. writing-react-native-storybook-stories writes .stories.tsx files in CSF: args, argTypes, decorators, parameters, actions through fn() and portable stories for tests. upgrading-react-native-storybook moves a project one step per run along the chain 5.3, 6.5, 7.6, 8.3, 9, 10, and on the 6.5 to 7.6 step converts leftover storiesOf stories to CSF.

Who it is for. For React Native developers who add, fill or upgrade Storybook with the help of Claude Code, Cursor or Windsurf.

Good fit when

You need Storybook in an Expo project with Expo Router, including its route, and do not want to maintain the config by hand
A Re.Pack project on rspack or webpack needs StorybookPlugin added to the build config
A component has no stories and you need a .stories.tsx with controls, decorators and parameters
A project is stuck on Storybook 6.5 and you want to reach version 10 one step at a time, with a check after each
The code still has stories in the old storiesOf format that must move to CSF

Not a fit when

You need Storybook for a React web app: the skills target @storybook/react-native
You want to jump from 7.6 straight to 10 in one run: the upgrade skill does one step and stops
The agent needs MCP access to Storybook docs and components: this repository ships no MCP server

Example request

Add Storybook to this Expo project with Expo Router and write a story for the Button component with controls for variant and title

Limitations

The skills target @storybook/react-native v10 and its migration chain. The agent detects the package manager from lockfiles, and Expo dependencies go in through expo install. The upgrade skill walks major versions one at a time and asks for the current version when it is unclear. Setup and upgrades change package.json, the Metro config and the .rnstorybook files, so run them on a separate branch. The recipes cover Expo, Expo Router, React Native CLI and Re.Pack, and the repository has no guides for other bundlers.

How to disable. Delete the three skill folders from your agent's skills directory, for Claude Code that is .claude/skills/ in the project. The .rnstorybook files and Storybook dependencies the agent already added stay: remove them by hand or roll back the branch.

FAQ

How do I install the Storybook for React Native skills in Claude Code?

Run npx skills add storybookjs/react-native. It works with Claude Code, Cursor, Windsurf and other agents that support skills. The repository also has a .claude-plugin/marketplace.json with the react-native-storybook plugin.

Which projects does the Storybook setup skill support?

Four flows: Expo without a router, Expo with Expo Router, React Native CLI without Expo, and Re.Pack on rspack or webpack. Each has its own guide under references.

Can I upgrade Storybook from 6.5 to 10 in one command?

No, the skill does one hop per run: 6.5 to 7.6, then 7.6 to 8.3, 8 to 9 and 9 to 10. After a step it verifies the result and reports which hop comes next.

How does the skill install dependencies and which package manager does it use?

It looks for yarn.lock, pnpm-lock.yaml or bun.lockb and works through the one it finds. In Expo projects dependencies go in through expo install, and init runs as create storybook rather than through npx.

How does the skill write stories for components?

It creates a ComponentName.stories.tsx next to the component, imports Meta and StoryObj from @storybook/react-native and exports meta with satisfies Meta. Each story is named in UpperCamelCase and typed as StoryObj<typeof meta>. Hooks inside render need a named function.

Discussion

No questions or reviews yet.

Skills

Callstack agent skills for React Native

Callstack Agent Skills

Callstack's React Native skills: performance, version upgrades, native app migration, testing and CI

SkillMinimal access1.7K

React Native Unistyles v3 skill

react-native-unistyles-v3

A skill for styling React Native with Unistyles v3: setup, themes, responsive layout, variants and v2 migration

SkillMinimal access3K

Uniwind skills

Uniwind

Official

Two skills for React Native with Tailwind v4: Uniwind styling rules and a step-by-step move of a project off NativeWind

SkillBroad access1.7K

Expo Skills

Editors’ pick

Expo's official agent skills: building, deploying, updating and debugging Expo and EAS apps

PluginExtended access3.7K

swift-ios-skills

A set of skills for iOS 26+, Swift 6.3 and SwiftUI that gives the agent knowledge of modern Apple frameworks

SkillMinimal access1.2K

Awesome Android Agent Skills

awesome-android-agent-skills

Skills for modern Android development for Copilot, Claude, Gemini and Cursor: Kotlin, Jetpack Compose, architecture, Hilt, Room

SkillMinimal access993

README in short

The main README covers Storybook for React Native v10: a quick start with Expo and React Native CLI templates, npm create storybook@latest for an existing project, the withStorybook wrapper for Metro and Re.Pack, getStorybookUI options, feature flags, addons and using stories in unit tests. The Agent skills section at the end lists the three skills and gives one install command for Claude Code, Cursor, Windsurf and other agents with skill support.

README badge

Original SKILL.md

---
name: setup-react-native-storybook
description: 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.
---

# React Native Storybook Setup

Add `@storybook/react-native` v10 to a React Native project.

**Important:** Detect the project's package manager (look for `yarn.lock`, `pnpm-lock.yaml`, or `bun.lockb`) and use it for all

Report a problem

Install

Access and checks