← ClaudeAtlas

design-systemlisted

Establish or revise a product-specific design contract after discovery, strategy, interaction design, and design-direction selection. Use for substantial new UI, redesigns, or system changes that need a coherent visual thesis, reference synthesis, component language, motion, accessibility, responsive behavior, and required states.
Gaurav890/everything-agentic-engineering · ★ 1 · Web & Frontend · score 67
Install: claude install-skill Gaurav890/everything-agentic-engineering
# Design system ## Establish the direction Start from approved product intent, user needs, UX strategy, interaction model, `DESIGN_BRIEF.md`, and an explicitly approved direction. If those inputs are missing, return to `product-design-router`; do not hide upstream ambiguity with styling. Synthesize 3–7 appropriate references when the scope warrants research. Record what each reference contributes and explicitly reject wholesale copying. Define: - audience, product personality, visual thesis, and differentiation; - hierarchy, information density, composition, typography, color, geometry; - content voice, interaction principles, signature behaviors, and motion; - responsive, accessibility, platform, and agentic-experience rules; - required normal, edge, failure, recovery, and trust states. Avoid empty adjectives such as “clean, modern, minimal.” Make decisions specific enough that another designer or agent could distinguish this product from a framework demo. ## Resource roles - Refero, real category-leading products, and brand material: visual research. - UI UX Pro Max or equivalent: broad exploration and alternative generation. - 21st.dev, Aceternity, shadcn registries: component/interaction discovery. - Taste Skill or Impeccable: anti-slop critique and refinement. - Emil Kowalski `emil-design-eng`: high-craft implementation/refinement when installed; specialist motion, prototyping, library, and Sonner skills route only when their exact trigger is active. - Motion