Storybook Stories

This skill enforces consistent Storybook story creation patterns across the application. It ensures that all components have proper documentation, interactive examples, and follow the established project structure.

<critical_component_usage> MANDATORY: Always Use Base UI Components from @agh/ui

CRITICAL REQUIREMENTS:

• ✅ ALWAYS import components from @agh/ui package (packages/ui)
• ✅ ALWAYS use existing base UI components instead of creating new ones from scratch
• ✅ ALWAYS follow design system rules from @.cursor/rules/react.mdc and @.cursor/rules/shadcn.mdc
• ✅ ALWAYS use design tokens (e.g., bg-background, text-foreground, border-border) instead of explicit colors
• ❌ NEVER create components from scratch when a base component exists in @agh/ui
• ❌ NEVER use explicit color values (e.g., bg-white, text-black) - always use design tokens
• ❌ NEVER duplicate component logic - compose from base components
• ❌ NEVER set tags: ["autodocs"] or enable Storybook autodocs on any story meta (packages/ui, web/src/components/ui, or web/src/systems/**). Use parameters.docs.description.component, JSDoc on stories, and the Docs addon manually if needed.

Available Base Components: