Builds polished, accessible, and responsive user interfaces using modern CSS patterns and atomic design principles.
This skill transforms Claude into a senior UI/UX engineer, providing expert guidance for creating production-grade web interfaces. It leverages Atomic Design principles to build scalable component architectures, ensuring every element from buttons to complex dashboards follows strict visual hierarchy and accessibility standards. By implementing modern CSS techniques like OKLCH color spaces, container queries, and the :has() selector, this skill helps developers create high-performance, visually stunning layouts that work seamlessly across all device sizes and respect user preferences like reduced motion.
主要功能
01Built-in WCAG AA accessibility compliance and semantic HTML structure.
02Atomic Design architecture for modular and scalable component systems.
03Comprehensive interactive state management including hover, active, focus, and disabled.
041 GitHub stars
05Mobile-first responsive strategy using modern CSS and Tailwind patterns.
06Context-aware styling that can integrate with Figma tokens and existing design systems.
使用场景
01Generating production-ready UI components from high-level descriptions or wireframes.
02Developing a custom design system using CSS custom properties and standardized spacing tokens.
03Auditing and refactoring existing interfaces to improve visual hierarchy and accessibility.
