Skill UI

Manages snapshot tests for Jest, Vitest, Playwright, and Storybook by analyzing failures, distinguishing intentional changes from regressions, and selectively updating only the affected snapshots to keep suites accurate.

This guide outlines the architecture and implementation steps for building a robust, production-ready design system. It covers core elements like design tokens, reusable components, and layout patterns. Ideal for teams needing to maintain design consistency, ensure accessibility, and synchronize design (Figma) with implementation (Storybook).

This skill generates a complete React component structure following the industry-standard Container/Presentation pattern. It automatically scaffolds necessary files, including TypeScript, Storybook, and SCSS styles, ensuring adherence to project conventions. Use this when building new, scalable components, allowing you to properly classify whether the component is UI-focused (Presentation) or logic-heavy (Container).