claude-design-skills

Design system infrastructure: create, maintain, audit, and document design systems with shadcn/ui + Tailwind CSS 4 + Next.js. Activates when creating design systems, adding components to a design system, auditing token consistency, documenting components, syncing with Figma, building pages from a design system, or generating a system context briefing for AI. Triggers on: 'design system', 'design tokens', 'styleguide', 'token drift', 'sync figma', 'showcase', 'audit DS', 'add component', 'context doc', 'design system briefing'. Also activates on: 'shadcn setup', 'globals.css tokens', 'CSS variables', 'create styleguide', 'check consistency', 'AI-ready design system'. Handles the infrastructure layer -- tokens, components, consistency, documentation. Hands off to ui-designer for visual craft and polish. Hands off to ux-designer for experience strategy and psychology. Do NOT activate for purely visual styling decisions, user research, backend logic, or DevOps.

Expert visual design craft, UI systems, and pixel-perfect implementation. Activates when building, styling, reviewing, or polishing any interface -- websites, apps, dashboards, component libraries, design systems, landing pages, or any screen needing visual polish. Triggers on: CSS styling, component design, layout, spacing, typography, color, dark mode, responsive design, design tokens, Figma, UI audits, visual hierarchy, icons, shadows, border-radius, animations. Also activates on: 'make it look good', 'improve the design', 'it looks off', 'spacing', 'colors', 'typography', 'design system', 'component library', 'pixel perfect', 'modern design', 'layout', 'responsive', 'dark mode', 'style this', 'polish', 'improve visual'. Applies whenever a visual interface is created or refined, even without saying 'UI'. Hands off to ux-designer for flow strategy and psychology. Hands off to design-system for tokens, component infrastructure, and DS audits. Do NOT activate for: user research methodology, psychology theory,

Expert UX design thinking, user psychology, and experience strategy. Activates when building, reviewing, or discussing any user-facing interface -- websites, apps, dashboards, forms, onboarding, checkout, sign-up, settings, landing pages, modals, navigation. Triggers on: user flows, wireframes, prototypes, usability, information architecture, content strategy, error handling, accessibility, interaction design, user testing, conversion. Also activates on: 'how should this flow', 'user experience', 'make it easier', 'onboarding', 'conversion', 'drop-off', 'friction', 'confusing', 'intuitive', 'usability', 'user journey', 'review screen', 'review interface', 'UX audit'. Applies whenever a human uses an interface, even without saying 'UX'. Hands off to ui-designer for visual styling and craft. Hands off to ux-research for evidence gathering and discovery. Hands off to design-system for component infrastructure. Do NOT activate for: purely visual styling, backend logic, database schemas, API design without UI, Dev

UX Research strategist for evidence-based product decisions. Activates when planning research, preparing user interviews, synthesizing findings, or generating design specs from insights. Triggers on: 'research', 'discovery', 'user interview', 'validate assumption', 'what should we build', 'do users need this', 'test this assumption', 'opportunity', 'synthesize findings', 'interview script', 'research plan', 'analyze data'. Also activates on: 'what method', 'sample size', 'interview guide', 'survey', 'usability test', 'atomic research', 'insight', 'ready to dev'. Hands off to ux-designer when design specs are ready. Do NOT activate for visual styling, component design, design tokens, backend logic, or DevOps.