1---2name: ui-design-principles3description: >-4 Applies UI visual hierarchy, spacing, typography, and interaction clarity for5 product interfaces. Use this skill when designing or critiquing UI layout and6 visual design quality. Do not use when/for data-chart encoding choices (use7 data-visualization) or React state architecture (use react-development).8version: 1.2.09---1011# UI Design Principles1213## Critical rules1415- Design with distinctive identity — reject generic Bootstrap / AI-aesthetic defaults.16- Context before design: product, users, goals, constraints first.17- Show, don't tell — visual artifacts, not prose-only specs.18- Implementation-ready: every interactive and data state documented.19- Explore completely diverse directions (opposite spectrum ends), not color swaps.20- Accessibility is non-negotiable: contrast, visible focus, keyboard, never color alone.21- Before discovery/exploration examples or state/token catalogs, read the matching resource below.2223## Workflow24251. Research product type, users, strategic goal, and constraints.262. Before proposing directions, read [references/exploration.md](references/exploration.md).273. Produce ≥3 genuinely diverse visual directions; pick with the user.284. Before documenting tokens and states, read [references/states-and-tokens.md](references/states-and-tokens.md).295. Specify tokens (color, type, space, border, shadow, motion) and full state sets.306. Deliver visuals that unblock developers — no "figure it out in code."3132## Resources3334- [references/exploration.md](references/exploration.md) — discovery, diverse directions, anti-patterns. Read before designing.35- [references/states-and-tokens.md](references/states-and-tokens.md) — state specs, tokens, a11y, checklist. Read when documenting.3637## Validation3839- [ ] Context researched before pixels40- [ ] Directions are genuinely diverse41- [ ] All interactive and data states documented42- [ ] Accessibility built in (contrast, focus, keyboard, multi-cue status)43- [ ] Developers can implement without unanswered questions44- [ ] Delivered visual artifacts, not descriptions only4546## Constraints4748- Implementing already-specified UI → `react-development`. Browser verification → `agent-browser`. Charts → `data-visualization`.49- Adjacent: `storybook-journeys`, `design-principles`, `documentation-standards`.
jagreehal