Generate Storybook stories with real rendering, CSS classes, and mocked data.
npx skills add https://github.com/luxury-yacht/app --skill new-story
Please help me install this Agent Skill. Skill: new-story Source: https://github.com/luxury-yacht/app/tree/main/.agents/skills/new-story Command: npx skills add https://github.com/luxury-yacht/app --skill new-story
Generate accurate Storybook stories for UI components without relying on approximations, so developers can preview states confidently and catch integration issues early.
Use /new-story frontend/src/ui/modals/MyModal.tsx to generate a .stories.tsx file that renders MyModal using the project’s real decorators, mocks, and CSS classes.
High-intent search queries and answers about installing and using this skill.
To generate Storybook stories, you import the actual React component and render it using real CSS classes and realistic mocked data while matching hook and provider dependencies for accurate previews.
You mock backend data in Storybook stories by using existing frontend mocks for backend calls while preserving real component rendering, ensuring deterministic previews for various prop and state variations.
The best way to cover loading and error states in Storybook is to generate comprehensive stories for default, loading, error, empty, and variant states using realistic mocked data and correct decorators.
Yes, generating Storybook stories requires verifying the result by running TypeScript compilation with noEmit to ensure the .stories.tsx file integrates correctly without type errors.
Yes, you can use existing decorators when creating Storybook stories, as the process traces all hook dependencies to select the correct Storybook decorators and providers for the React component.
You should place the .stories.tsx file beside the actual component file to maintain placement discipline and ensure the Storybook stories correctly import and render the real component.
IgniteUIAdds a reactive property to an existing Lit web component with decorators and tests.
tonone-aiCreate reusable UI components with typed props and accessibility states.
alekspetrovAutomate visual-regression testing setup for Storybook components with CI workflows.
JimmyTranDevCoordinate Storybook MCP workflows to query docs, generate stories, preview components, and run tests.
