Design & UX

> Composition methodology for building design systems using five distinct levels of abstraction: atoms, molecules, organisms, templates, and pages.

> Apple's design philosophy covering clarity/deference/depth, vibrancy and material effects, SF Symbols integration, semantic color system, safe area management, and platform-specific navigation patterns across iOS, iPadOS, macOS, watchOS, and visionOS.

> Visual order through edge alignment, center alignment, optical alignment, and the invisible structure that consistent alignment creates across a page

> Perceived actionability — signifiers, constraints, mappings (Don Norman), flat design's affordance problem, touch targets, hover states as affordance

> Apply Tailwind CSS utility-first patterns for consistent, maintainable component styling

> Style accessible headless components from Radix UI and Headless UI with Tailwind data-attribute selectors

> Define and manage design tokens for colors, spacing, typography, and effects in Tailwind CSS

> Build reusable styled components with Tailwind, CVA variants, and polymorphic prop patterns

> Build type-safe component variants with class-variance-authority for consistent, composable styling APIs

> Create performant CSS animations with Tailwind transitions, keyframe utilities, and motion-safe considerations

> Detect missing required anatomy parts in component definitions and missing-anatomy-component patterns in composition. First programmatic enforcer of component-anatomy rules — finds what design-component-anatomy reference content prescribes.

> Implement animations that respect user motion preferences, avoid seizure triggers, and provide pause controls

> Ensure sufficient color contrast ratios and never use color as the sole means of conveying information

> Apply ARIA roles, states, and properties correctly to enhance assistive technology support for custom widgets

> Voice and tone in UI writing — defining voice (constant) vs tone (contextual), formality calibration, and emotional register

> Tooltip and contextual help writing — when to use tooltips, what to put in them, and progressive disclosure patterns that educate without interrupting

> Search copy — placeholder text, zero-results messaging, autocomplete hints, search scope indicators, saved search patterns

> Loading state copy — progress transparency, expectation setting, and writing text that reduces perceived wait time and prevents users from abandoning

> Inclusive language in UI — gender-neutral, ability-neutral, culture-aware writing, avoiding idioms that exclude

> Form labels and helper text — label clarity, placeholder anti-patterns, required-field indication, and writing forms that users complete without confusion

> Data table copy — column headers, empty cells, truncation patterns, filter and sort labels, bulk action copy

> Confirmation dialogs — destructive action writing, consequence clarity, and specific button labels that make irreversibility unmistakable

> Master SVG optimization — automated minification with SVGO, inline versus external delivery trade-offs, SVG sprite sheet systems, accessibility patterns, rendering performance for complex vector graphics, and icon system architecture.

> Measure and optimize INP — the worst-case interaction latency across the entire page session — by decomposing each interaction into input delay, processing time, and presentation delay, then targeting each phase with yielding, scheduling, and rendering strategies.