How does this skill help with Next.js projects?

The skill provides standardized patterns for the Next.js framework, including proper static directory mapping and next.config.js integration to ensure components render exactly as they do in your app.

Does it support both Vite and Webpack?

Absolutely. It provides distinct configuration patterns for both builders, including how to merge custom Vite or Webpack aliases and environment variables.

Can I use this to set up accessibility testing?

Yes, it includes specific implementation patterns for @storybook/addon-a11y, allowing you to automate WCAG compliance checks within your storybook environment.

What are decorators and how are they configured?

Decorators are used to wrap stories in necessary context providers (like ThemeProvider). This skill helps you set them up globally in preview.ts so your components have access to the correct styles.

Storybook Configuration

Name: Storybook Configuration
Author: TheBushidoCollective

byTheBushidoCollective

•

Design Tools

Configures and optimizes Storybook environments with professional-grade addons, builders, and framework-specific integrations.

The Storybook Configuration skill empowers Claude to architect robust visual development environments by automating the setup of main and preview configuration files. It provides domain-specific guidance for integrating various frameworks like Next.js and Vite, managing essential addons for accessibility and interactions, and implementing advanced patterns like global decorators and theme switching. This skill ensures your design system infrastructure follows industry best practices for type safety, performance, and maintainability.

Key Features

01Tailored setups for Next.js, Vite, and Webpack builders

0272 GitHub stars

03Type-safe TypeScript configuration for .storybook/main.ts and preview.ts

04Automated documentation setup using Autodocs and custom story patterns

05Seamless integration of accessibility (a11y) and interaction testing addons

06Global decorator implementation for theme providers and layout wrappers

Use Cases

01Initializing a standardized Storybook environment in a new React or Next.js project

02Configuring advanced testing tools like code coverage and accessibility audits

03Migrating existing Storybook setups from Webpack to Vite for faster builds

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han storybook-configuration

For use in Claude.ai and ChatGPT

Download Skill