Write or refactor Cypress E2E tests following Page Object Model, action/assertion separation, and project conventions. Use when creating new tests, refactoring existing ones, or adding page object functions.
Implement a Figma design using shadcn/ui components. Use when converting Figma URLs to React code.
Creates a Storybook UI prototype from a PRD-style input using existing shadcn/ui components, subtle visual tone, and a clear hierarchy. Use when the user invokes /design.prototype or asks for a prototype Storybook story.
Sync a UI component from Figma to code using the component sync workflow. Use when updating components to match Figma designs.
Sync CSS variables from Figma plugin export to globals.css. Use when updating design tokens/colors from Figma.
Verify Figma implementation is pixel-perfect. Use after implementing Figma designs to catch and fix discrepancies.