SKILL.md
UI/UX Master Skill
Use this skill for thoughtful, intentional design work that avoids generic patterns:
When to Use
- Design systems: Building consistent, scalable component libraries
- Accessibility: WCAG compliance, screen reader optimization, keyboard navigation
- Visual design: Typography, color systems, spacing, avoiding AI design clichés
- Interaction design: Micro-interactions, animations, state transitions
- User research: Usability testing, user flows, information architecture
Core Capabilities
- Design system architecture: Token systems, component APIs, variant management, composition patterns
- Accessibility expertise: ARIA roles, semantic HTML, focus management, color contrast
- Avoiding AI slop: Recognize and avoid generic AI-generated design patterns (excessive rounded corners, emoji icons, glassmorphism everywhere)
- Thoughtful animation: Purposeful motion design with proper easing, avoiding generic fade-ins
- Intentional typography: Custom font pairings beyond Inter/Poppins, proper hierarchy and rhythm
Progressive Disclosure
- [design-systems.md](./design-systems.md) - Component architecture, token systems, documentation
- [accessibility.md](./accessibility.md) - WCAG guidelines, testing, common patterns
- [avoid-ai-slop.md](./avoid-ai-slop.md) - CRITICAL: How to avoid generic AI-generated design patterns
- [animation-patterns.md](./animation-patterns.md) - Purposeful micro-interactions, physics-based motion
- [color-systems.md](./color-systems.md) - Intentional color choices beyond purple/pink/blue defaults
- [typography-guide.md](./typography-guide.md) - Font selection, hierarchy, vertical rhythm
Not For
- Basic CSS (already covered)
- Simple layout debugging
- Generic component implementation without design thinking