Does this skill support the latest version of Storybook?

Yes, it is specifically optimized for Storybook for React Native v10 and utilizes the modern Component Story Format (CSF).

Does it support TypeScript?

Yes, it enforces type-safe story creation by utilizing Meta and StoryObj types from the @storybook/react-native package.

How does it handle Storybook addons?

The skill provides patterns for configuring common addons including Controls, Actions, Backgrounds, and Notes through parameters and argTypes.

Can I use these stories for automated testing?

Absolutely. The skill includes patterns for 'Portable Stories,' which allow you to import and reuse your story definitions within Jest and React Native Testing Library.

React Native Storybook Authoring

Name: React Native Storybook Authoring
Author: storybookjs

bystorybookjs

•

1,256

•

Mobile Development

Generates and maintains React Native Storybook stories using Component Story Format (CSF) for enhanced component development and testing.

Streamline your React Native development by automating the creation and management of Storybook stories using Component Story Format (CSF). This skill provides specialized guidance for Storybook v10, enabling you to build type-safe documentation, interactive component sandboxes, and reusable UI states for testing. It covers everything from basic story setups and argTypes to advanced decorators and portable stories, ensuring your mobile design system is consistent, well-documented, and integrated with your testing suite.

Key Features

01Component Story Format (CSF) 3.0 support for React Native

02Custom decorators and render functions for complex layouts

03Portable stories setup for cross-utilization in Jest tests

041,256 GitHub stars

05Type-safe Meta and StoryObj configuration for TypeScript

06Interactive control and action configuration via argTypes

Use Cases

01Implementing unit tests by reusing story definitions with Portable Stories

02Building and documenting a comprehensive mobile design system

03Debugging React Native components in isolation with interactive controls

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add storybookjs/react-native writing-react-native-storybook-stories

For use in Claude.ai and ChatGPT

Download Skill