1---2name: ui-design-principles3description: Applies UI visual hierarchy, spacing, typography, and interaction clarity for product interfaces. Use this skill when designing or critiquing UI layout and visual design quality. Do not use when/for data-chart encoding choices (use data-visualization) or React state architecture (use react-development).4---56# UI Design Principles78## Critical rules910- Design with distinctive identity — reject generic Bootstrap / AI-aesthetic defaults.11- Context before design: product, users, goals, constraints first.12- Show, don't tell — visual artifacts, not prose-only specs.13- Implementation-ready: every interactive and data state documented.14- Explore completely diverse directions (opposite spectrum ends), not color swaps.15- Accessibility is non-negotiable: contrast, visible focus, keyboard, never color alone.16- Before discovery/exploration examples or state/token catalogs, read the matching resource below.1718## Workflow19201. Research product type, users, strategic goal, and constraints.212. Before proposing directions, read [references/exploration.md](references/exploration.md).223. Produce ≥3 genuinely diverse visual directions; pick with the user.234. Before documenting tokens and states, read [references/states-and-tokens.md](references/states-and-tokens.md).245. Specify tokens (color, type, space, border, shadow, motion) and full state sets.256. Deliver visuals that unblock developers — no "figure it out in code."2627## Resources2829- [references/exploration.md](references/exploration.md) — discovery, diverse directions, anti-patterns. Read before designing.30- [references/states-and-tokens.md](references/states-and-tokens.md) — state specs, tokens, a11y, checklist. Read when documenting.3132## Validation3334- [ ] Context researched before pixels35- [ ] Directions are genuinely diverse36- [ ] All interactive and data states documented37- [ ] Accessibility built in (contrast, focus, keyboard, multi-cue status)38- [ ] Developers can implement without unanswered questions39- [ ] Delivered visual artifacts, not descriptions only4041## Constraints4243- Implementing already-specified UI → `react-development`. Browser verification → `agent-browser`. Charts → `data-visualization`.44- Adjacent: `storybook-journeys`, `design-principles`, `documentation-standards`.
jagreehal