What problem does it solve? Setting up and maintaining a consistent, high-quality UI/UX system on a Next.js or Vite project involves dozens of error-prone steps: RTL infrastructure, fonts, design tokens, accessibility gates, Lighthouse budgets, and release checks. This Skill runs that entire loop one verified step at a time, with evidence at every step, so nothing is skipped, assumed, or silently broken. ## Core Features & Use Cases - Seven workflow modes: setup (one-time project foundation: RTL, fonts, tokens, DESIGN.md, PRODUCT.md, DoD gate, CI wiring), plan (feature PRD and mockups), screen (build or redesign one screen with critique and hardening), audit (map every screen), ship (pre-release measurement), retro (process review), and next (gap scan showing where the project stands). - Hard quality gates: DoD score of 100 across every route via Playwright and axe, Lighthouse 100 thresholds, zero lint findings, and a mandatory visual change gate requiring before/after screenshots at 375px and 1440px for any user-visible change. - Hebrew RTL-first enforcement: logical CSS properties only, dir="ltr" islands for numbers and Latin names, Hebrew formatting via Intl he-IL, and multi-brand support through per-vertical token scopes. - Use Case: On an existing React app, run setup to archive legacy design artifacts, migrate to shadcn RTL mode, install a Hebrew font, wire tokens and a styleguide route, and establish a CI gate that fails any pull request below the quality bar. ## Quick Start Ask the assistant to run /ux-setup on this project to configure the complete UI/UX environment step by step.
