What problem does it solve? React components need interactive documentation and testable stories, but stories frequently break builds due to wrong @storybook/* type imports, inconsistent sidebar title placement, duplicated argTypes controls, or missing accessible names. This Skill enforces the conventions that keep *.stories.tsx files buildable and consistent. ## Core Features & Use Cases - Shape-aware story authoring: Adapts type imports and conventions for React SPA (@storybook/react-webpack5), Next.js (@storybook/nextjs), and component-library (@storybook/react) repository shapes. - Convention enforcement: Colocates kebab-case story files with components, namespaces sidebar title prefixes, names story exports after states, and centralizes shared argTypes builders under .storybook/. - Profile-driven verification: Resolves build, lint, duplication, and format checks through the profile's make target map, recording skips when keys map to null. - Use Case: When adding a new shared UI primitive with disabled, loading, and error states, use this Skill to author the colocated story file with correct framework imports, controls, and accessible-name args, then verify it with the storybook build target. ## Quick Start Ask the agent to create a Storybook story for a React component, documenting its variants and states with proper argTypes controls and verifying it with the storybook build target.
