design-validationlisted

# Design Validation ## Purpose Prove that design work is visually accurate, functionally correct, responsive, accessible enough for the scope, and aligned with business behavior. This skill depends on `rldyour-browser`, especially `browser-validation`. ## When To Use Use this skill without waiting for explicit invocation when the task has changed or created: - Frontend UI, layout, styling, responsive behavior, visual states, animations, or interactions. - Figma-to-code implementation, shadcn/ui components, ReactBits components, or design-system tokens. - User-visible page, widget, feature, form, modal, menu, navigation, or stateful component behavior. If browser tools cannot run, state the blocker and perform the strongest available static checks instead. Do not mark meaningful design work as complete without either browser evidence or an explicit validation blocker. ## Required Checks For every meaningful design implementation, validate: - Figma match: visual comparison against the inspected frame or supplied reference. - Pixel-perfect details: spacing, typography, colors, radii, shadows, layout, assets, states. - Design-system consistency: tokens, shared primitives, shadcn variants, no duplicate raw values. - Functionality: interactions, form flows, navigation, modals, menus, state transitions. - Business logic: required fields, permissions, calculations, data visibility, edge cases. - Responsiveness: desktop plus mobile by default, and every provided Figma frame