Build production-ready, accessible UI components

A skill for building production-quality user interfaces that look design-aware, not AI-generated - accessible, performant, and visually polished. Component architecture co-locates a component's implementation, tests, Storybook stories, custom hook, and types in one folder, favors composition (<Card><CardHeader>... ) over configuration props, keeps components focused on one job, and separates data-fetching containers from presentational components. State management picks the simplest tool for the job: useState for component-local UI state, lifted state for 2-3 sibling components, Context for read-heavy/write-rare values like theme or auth, URL searchParams for shareable filters/pagination, a query library (React Query/SWR) for server state, and a global store (Zustand/Redux) only for complex app-wide client state - avoiding prop drilling deeper than 3 levels. Design-system adherence centers on an explicit "AI aesthetic" table to avoid: purple/indigo-everything palettes (use the project's actual colors), excessive gradients, maximally-rounded corners ignoring real hierarchy, generic template hero sections, lorem-ipsum copy that hides real layout problems, oversized uniform padding, stock card grids ignoring information priority, and shadow-heavy design competing with content. Spacing must follow a consistent scale (no invented values like 13px or 2.3rem), typography must respect heading hierarchy (h1 once per page, no skipped levels, no heading styles on non-headings), and color must use semantic tokens (text-primary, bg-surface) rather than raw hex, with WCAG contrast minimums (4.5:1 normal text, 3:1 large text) and never relying on color alone to convey information. Accessibility to WCAG 2.1 AA is mandatory: every interactive element must be keyboard-focusable (prefer real <button> over a div with role="button" plus manual key handlers), interactive elements without visible text need aria-label, form inputs need associated labels, focus must move deliberately when content changes (e.g. into a newly-opened dialog) and be trapped inside modal dialogs, and empty/error states must be meaningful rather than blank screens.

Use it when building new UI components or pages, modifying existing user-facing interfaces, implementing responsive layouts, adding interactivity or state management, or fixing visual/UX issues.

Given a UI requirement, it produces component code following the co-located file structure, an appropriate state-management choice from the decision ladder, design-system-compliant spacing/typography/color, and WCAG 2.1 AA-compliant keyboard navigation, ARIA labeling, and focus management.

Works with any component framework (the examples use React/JSX with Tailwind-style utility classes) and any state-management stack (useState/Context, React Query/SWR, Zustand/Redux) - framework conventions, not a specific library, are the point.

Frontend engineers who want production-quality, accessible UI that avoids recognizable AI-generated patterns - real design-system adherence, deliberate state-management choices, and WCAG-compliant interaction patterns instead of generic purple-gradient, over-rounded, shadow-heavy default output.