← ClaudeAtlas

ui-ux-designlisted

Expert UI/UX design workflow and standards — token-first design systems, the shadcn/ui + Tailwind + Radix build stack, accessibility (WCAG AA), and self-contained HTML mockups. Use when designing interfaces, building front-end components, creating mockups/prototypes, or reviewing UI for quality and accessibility. The project's existing design system always wins.
vinaygiri/fleetmind · ★ 2 · Web & Frontend · score 73
Install: claude install-skill vinaygiri/fleetmind
# UI/UX Design (expert) Produce interfaces that look considered and behave correctly — restraint, hierarchy, and consistency over flourish. **If the project already has a design system, it wins** — read its tokens/components and match them; this is the baseline when the project is greenfield. ## Design intelligence If the **`ui-ux-pro-max`** skill is installed, use it first to derive the design system for the brief (industry-aware palette from 192, typography pairing from 74, landing/dashboard patterns, key animations, industry anti-patterns, and its accessibility checklist) — e.g. `python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "<brief>" --design-system`. Otherwise derive tokens yourself from brand/mood. Either way, **lock the token set before building anything.** ## Build stack (default; MIT) - **shadcn/ui + Tailwind (v4) + Radix + lucide-react + motion**, themed with **CSS-variable design tokens** (tweakcn for deterministic theme export). Components are copied into the repo — read, own, and edit real code; pull them via the shadcn CLI/MCP (`add button card dialog …`), compose, don't reinvent. - **Reach for alternatives by need:** daisyUI (vanilla/non-React/static), React Aria or HeroUI (strict-WCAG widgets Radix lacks), Mantine/MUI (enterprise, dense data-grids), Magic UI/Aceternity (marketing polish only — never core app UI). ## Token-first workflow (brief → tokens → components → screens) 1. **Design system first.** Emit semantic tokens as CSS vars *before*