Design & UX

> Documenting design decisions — design rationale, spec handoff, annotating designs, living documentation, decision logs, the DESIGN.md format

> Structured feedback — critique frameworks (like/wish/wonder, what/why/improve), separating subjective preference from objective assessment, avoiding "I don't like it"

> Data visualization principles — chart type selection, color encoding, annotation strategy, Tufte's data-ink ratio, accessible charts, avoiding chartjunk, and small multiples for comparison

> Color adaptation for dark themes — inverted hierarchy, reduced saturation, elevation through lightness, surface layering, and maintaining brand identity in dark contexts

> Luminance contrast for readability and visual weight — WCAG ratios, contrast as a hierarchy tool, contrast beyond accessibility

> Internal vs. external consistency — maintaining coherent patterns within a product, adhering to platform conventions, and knowing when to break consistency deliberately

> Anatomy of reusable components covering slots, variants, states, sizes, composition vs configuration, compound components, and when to split vs merge.

> Emotional and cultural associations of color — warmth/coolness, trust, urgency, industry conventions, and cultural variance for global product design

> Color wheel relationships — complementary, analogous, triadic, split-complementary, tetradic schemes with usage guidance for building cohesive palettes

> Color independence — conveying information without relying on color alone, building colorblind-safe palettes, and ensuring perceptual uniformity across all vision types

> Visual coherence across every touchpoint — mapping brand attributes to design decisions, voice-to-visual translation, consistency vs. monotony, brand flex zones, and multi-platform coherence

> 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