Скиллы Storybook для React Native

Q: Какие проекты поддерживает скилл подключения Storybook?

Четыре сценария: Expo без роутера, Expo с Expo Router, React Native CLI без Expo и Re.Pack на rspack или webpack. Для каждого в references лежит отдельная инструкция.

Storybook for React Native agent skills

Три скилла для Claude Code и Cursor: подключение Storybook v10 к React Native, написание stories в CSF и обновление версий по одному шагу

1 324 ★ репозитория
Последний коммит 24 окт. 2026
MIT

Скилл Официальный

storybookjs/react-nativeАвтор:Storybook

Установка

Работает в: Claude Code
Cursor
Windsurf
Koda
Coddy

Ручная установка

npx skills add storybookjs/react-native

Универсальная установка из раздела Agent skills. Ставит все три скилла: подключение, написание stories и обновление версий.

Доступ и проверки

Как мы проверяем

Минимальный доступИнструмент ничего не запускает и не ходит в сеть.

Агент меняет package.json, lock-файл, конфиг Metro или Re.Pack и создает папку .rnstorybook
Установка зависимостей идет через менеджер пакетов проекта и тянет пакеты из реестра

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

В папке skills репозитория Storybook for React Native лежат три скилла. Скилл `setup-react-native-storybook` подключает Storybook v10 к существующему проекту: по признакам проекта (`rspack` или webpack с @callstack/repack, `expo-router` с папкой `app`, обычный `Expo`, React Native CLI) он выбирает один из четырех сценариев, определяет менеджер пакетов по lock-файлу и запускает `create storybook` с типом react_native. Скилл `writing-react-native-storybook-stories` пишет файлы .stories.tsx в формате CSF: `args`, `argTypes`, `decorators`, `parameters`, экшены через fn() и `portable stories` для тестов. Скилл `upgrading-react-native-storybook` обновляет проект на одну ступень за запуск по цепочке 5.3, 6.5, 7.6, 8.3, 9, 10, а на шаге с 6.5 на 7.6 переводит оставшиеся истории storiesOf в CSF.

Для кого. Для мобильных разработчиков на React Native, которые подключают, наполняют или обновляют Storybook с помощью Claude Code, Cursor или Windsurf.

Подходит, если

В Expo-проекте с `Expo` `Router` нужно завести Storybook вместе с маршрутом для него и не вести конфиг вручную
В проекте на Re.Pack с `rspack` или webpack нужно добавить StorybookPlugin в конфиг сборки
У компонента нет историй, и нужно написать .stories.tsx с контролами, декораторами и параметрами
Проект застрял на Storybook 6.5, и вы хотите дойти до версии 10 по одному шагу с проверкой после каждого
В коде остались истории в старом формате storiesOf, которые нужно перевести в CSF

Не подходит, если

Нужен Storybook для веб-приложения на React: скиллы написаны под @storybook/react-native
Нужно перескочить с 7.6 сразу на 10 одним запуском: скилл обновления делает один шаг и останавливается
Агенту нужен доступ к документации и компонентам Storybook по MCP: в этом репозитории MCP-сервера нет

Пример запроса к агенту

Подключи Storybook к этому Expo-проекту с Expo Router и напиши историю для компонента Button с контролами для variant и title

Ограничения

Скиллы рассчитаны на @storybook/react-native v10 и цепочку его миграций. Менеджер пакетов агент определяет по lock-файлам, для `Expo` зависимости ставятся через expo install. Скилл обновления проходит мажорные версии по одной и при неясной текущей версии просит ее уточнить. Установка и обновление меняют package.json, конфиг Metro и файлы .rnstorybook, поэтому запускайте их в отдельной ветке. Рецепты рассчитаны на сценарии `Expo`, `Expo` `Router`, React Native CLI и Re.Pack, а для других сборщиков в репозитории инструкций нет.

Как отключить. Удалите папки трех скиллов из каталога скиллов вашего агента, для Claude Code это .claude/skills/ в проекте. Файлы .rnstorybook и зависимости Storybook, которые агент уже добавил, останутся: уберите их вручную или откатите ветку.

Частые вопросы

Как поставить скиллы Storybook для React Native в Claude Code?

Выполните npx skills add storybookjs/react-native. Команда подходит для Claude Code, Cursor, Windsurf и других агентов со скиллами. В репозитории есть и .claude-plugin/marketplace.json с плагином `react-native-storybook`.

Какие проекты поддерживает скилл подключения Storybook?

Четыре сценария: `Expo` без роутера, `Expo` с `Expo` `Router`, React Native CLI без `Expo` и Re.Pack на `rspack` или webpack. Для каждого в `references` лежит отдельная инструкция.

Можно ли обновить Storybook с версии 6.5 до 10 одной командой?

Нет, скилл делает по одному переходу за запуск: 6.5 на 7.6, затем 7.6 на 8.3, 8 на 9 и 9 на 10. После шага он проверяет результат и сообщает, какой переход нужен следующим.

Как скилл ставит зависимости и какой менеджер пакетов выбирает?

Он ищет yarn.lock, pnpm-lock.yaml или bun.lockb и работает через найденный менеджер. В Expo-проектах зависимости ставятся через expo install, а `init` запускается как `create storybook`, не через npx.

Как скилл пишет истории для компонентов?

Он создает рядом с компонентом файл ИмяКомпонента.stories.tsx, импортирует Meta и StoryObj из @storybook/react-native и экспортирует `meta` с `satisfies` Meta. Каждая история называется в UpperCamelCase и получает тип StoryObj<typeof `meta`>. Для хуков в `render` нужна именованная функция.

Обсуждение

Вопросов и отзывов пока нет.

Скиллы

Скиллы Callstack для React Native

Callstack Agent Skills

Скиллы Callstack по React Native: производительность, обновление версий, миграция нативных приложений, тестирование и CI

СкиллМинимальный доступ1,7 тыс.

React Native Unistyles v3 skill

react-native-unistyles-v3

Скилл по стилизации React Native через Unistyles v3: настройка, темы, адаптивная верстка, варианты и миграция с v2

СкиллМинимальный доступ3 тыс.

Uniwind skills

Uniwind

Официальный

Два скилла для React Native с Tailwind v4: правила стилизации через Uniwind и пошаговый перенос проекта с NativeWind

СкиллШирокий доступ1,7 тыс.

Expo Skills

Выбор редакции

Официальные скиллы Expo для агентов: сборка, деплой, обновление и отладка приложений на Expo и EAS

ПлагинРасширенный доступ3,7 тыс.

swift-ios-skills

Набор скиллов по iOS 26+, Swift 6.3 и SwiftUI: агент получает знания по современным фреймворкам Apple

СкиллМинимальный доступ1,2 тыс.

Awesome Android Agent Skills

awesome-android-agent-skills

Скиллы по современной разработке под Android для Copilot, Claude, Gemini и Cursor: Kotlin, Jetpack Compose, архитектура, Hilt, Room

СкиллМинимальный доступ993

Коротко о README

Основной README посвящен Storybook for React Native v10: быстрый старт с шаблонами для `Expo` и React Native CLI, команду npm `create storybook`@latest для готового проекта, обертку withStorybook для Metro и Re.Pack, настройки getStorybookUI, флаги функций, аддоны и использование историй в юнит-тестах. Раздел «Agent skills» в конце перечисляет три скилла и дает одну команду установки для Claude Code, Cursor, Windsurf и других агентов со скиллами.

Бейдж для README

Исходный 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

Сообщить о проблеме