← ClaudeAtlas

design-system-auditlisted

Use when reviewing UI tokens, components, layout density, accessibility, visual consistency, or design handoff constraints.
Leo-maomao/pm-copilot · ★ 4 · Web & Frontend · score 77
Install: claude install-skill Leo-maomao/pm-copilot
# Design System Audit ## Goal Extract and enforce the current product's design system so UI deliverables and PRDs extend the real UI instead of inventing a generic visual language. ## Workflow 1. Inspect available design evidence: Figma, screenshots, Storybook, routes, component files, token files, CSS variables, Tailwind config, theme files, icon libraries, and previous UI deliverables or portable prototypes. 2. Capture tokens: colors, typography, spacing, radius, shadows, borders, density, breakpoints, motion, and semantic states. 3. Capture component patterns: navigation, tables, filters, forms, empty states, modals, toasts, cards, tabs, status chips, and permission states. 4. Check accessibility basics: contrast, focus style, keyboard reachability, label association, touch target size, reduced-motion expectation, and error text. 5. Identify drift: one-off colors, inconsistent spacing, mismatched icon styles, duplicate components, unclear state naming, and inaccessible variants. 6. When the request needs a new visual direction, state the intended audience, the artifact's single review goal, the evidence-backed token choices, and one deliberate distinguishing choice. Do not substitute generic dashboard styling for product evidence. 7. Audit the review artifact for visible hierarchy, readable typography, semantic labels, contrast, keyboard and focus guidance, touch targets, reduced-motion expectations, loading/error/empty states, and form feedback when applicable. 8. Def