The Component Design Critique skill enables Claude to evaluate and iterate on interactive UI patterns such as buttons, forms, cards, and tables. By generating side-by-side HTML wireframe comparisons, it helps developers visualize component inventories, interaction states (hover, focus, active, etc.), and platform-specific conventions. This skill is essential for maintaining a cohesive design system, ensuring accessibility through state diagrams, and making informed trade-offs between custom and native UI controls during the development process.
Key Features
01Creates interactive state diagrams for desktop and mobile patterns
02Evaluates components against platform-specific conventions (iOS, Android, Web)
030 GitHub stars
04Generates comprehensive component inventories for design systems
05Produces side-by-side HTML wireframe artifacts for visual review
06Audits UI consistency and interactive affordance across features
