ux-micro-patternslisted

# UX Micro-Patterns Skill ## When to Activate - Implementing any feature that loads, mutates, or can fail - Designing empty list states, zero-data dashboards - Building forms with validation and submission states - Adding confirmation to destructive actions - Onboarding new users to a feature - Deciding between spinner vs. skeleton screen --- ## Pattern 1: Empty States An empty state is not an error — it's an opportunity to guide users. ``` Bad empty state: "No results found." Good empty state: [Illustration] + Headline + Why it's empty + Primary action ``` ```tsx // components/EmptyState.tsx interface EmptyStateProps { icon?: React.ReactNode; title: string; description?: string; action?: { label: string; onClick: () => void }; secondaryAction?: { label: string; onClick: () => void }; } export function EmptyState({ icon, title, description, action, secondaryAction }: EmptyStateProps) { return ( <div className="flex flex-col items-center justify-center py-16 text-center max-w-sm mx-auto gap-4"> {icon && ( <div className="w-12 h-12 rounded-full bg-surface-overlay flex items-center justify-center text-text-secondary"> {icon} </div> )} <div className="space-y-1"> <h3 className="text-base font-semibold text-text-primary">{title}</h3> {description && ( <p className="text-sm text-text-secondary">{description}</p> )} </div> {(action || secondaryAction) && ( <di