Review UI Code Against Design Tokens

UI Review is part of StyleSeed and audits UI code against the Toss seed's design conventions rather than reviewing it as generic frontend work. It checks five areas: Design Tokens (no hardcoded hex colors when semantic tokens exist, no improvised shadow values, no arbitrary radius choices outside the system scale, no spacing values that break the seed rhythm), Component Conventions (uses the project's class-merge helper, supports className extension when appropriate, follows the agreed typing pattern, avoids wrapper components that only forward one class string, reuses existing primitives before inventing new ones), Accessibility (touch targets large enough for mobile, visible keyboard focus states, labels and aria-* attributes where needed, adequate color contrast, reduced-motion respect for animation), Mobile UX (no horizontal overflow, safe-area handling, readable text sizes, thumb-friendly interaction spacing, bottom nav or sticky actions that don't obscure content), and Typography and Spacing (system type hierarchy, headings that aren't overly loose, readable body text, spacing following the seed grid instead of arbitrary values).

Use it when a component or page should follow the StyleSeed Toss design language, when reviewing a UI-heavy PR for consistency and design-system violations, when output looks "mostly fine" but feels subtly off, or when you need a structured review with concrete fixes rather than vague criticism. It reviews against the seed's own conventions, not personal taste - it is a design-system conformance check, not a general code review.

Output is a structured verdict - Pass, Needs Improvement, or Fail - followed by a prioritized list of issues with file and line references where available, concrete fixes for each issue, and any open questions where design intent is ambiguous. Best practice guidance built into the skill: separate stylistic drift from real usability or accessibility bugs, prefer actionable diffs over abstract criticism, and call out duplication when an existing component already solves the problem being reinvented.

Built specifically for the StyleSeed design system's Toss seed (bitjaru/styleseed), assuming its semantic design tokens, class-merge helper, and component primitive conventions. It is not a generic accessibility or UX audit tool - its checklist is scoped to how the Toss seed expects components to be built, styled, and typed.

Frontend developers and reviewers working in a StyleSeed Toss-based codebase who need a consistent, criteria-driven way to catch design-system drift in PRs - flagging hardcoded values, inconsistent spacing, or accessibility gaps before merge, with fixes attached rather than just flagged.