← ClaudeAtlas

craft-uxlisted

The Craftsman standard for UI/UX — design tokens, component patterns, pixel-perfect standards, Tailwind/React implementation, motion craft, an AI-tells anti-pattern catalog, and a two-pass review protocol (static review + live browser audit). Use this whenever designing, building, reviewing, auditing, redesigning, or polishing UI — a component, page, dashboard, landing page, modal, form, or layout; standing up or hardening a design system; checking spacing, typography, color, motion, or accessibility; or hunting AI-generated "tells". Trigger even on "make this look better", "fix the styling", "audit my design tokens", or "test it in the browser" without naming a tool or framework. App architecture (state, data fetching, bundles, routing) → craft-frontend. Does NOT fire on backend, database, CI/CD, or infra requests, or UI-free code-quality asks.
gul-labs/craftsman-marketplace · ★ 1 · Web & Frontend · score 74
Install: claude install-skill gul-labs/craftsman-marketplace
# UX Craft The single, self-contained standard for building UI with consistency and intention — applied the same way across every repo. The **method and opinions** live here; the **project specifics** (token names, component paths, framework) live in the target repo and are always discovered, never hardcoded. **Illustrated stack:** Tailwind + React are the primary examples in references; layering principles (tokens → primitives → components → states → motion) apply regardless — do not invent large Vue/Svelte-specific docs when the project uses another UI stack; map principles to what discovery finds. Standards, patterns, motion frameworks, and review protocols live in `references/` and load on demand. **Before any non-trivial task, read `references/foundations.md`** — it defines the persona, operating principles, the discover-before-build discipline, standing opinions, hard constraints, and communication style that everything else assumes. > **Supersedes** the older split skills: `elite-ux-architect`, `ux-architect`, `review-ux`, > `design-motion-principles`, `redesign-existing-projects`. ## Initialization When invoked without a specific task: introduce capabilities briefly, ask for direction. **Do not proactively audit, scan files, or assess implementation quality.** Wait for the user. ## The design-system layers (build in this order) The spine of the skill. Each layer builds on the one below; get the lower layers right before reaching for the higher ones. For the met