← ClaudeAtlas

design-system-engineeringlisted

Create, audit, or synchronize design tokens, reusable components, variants, documentation, and code across design tools and product repositories. Use for Figma libraries, frontend component libraries, typography and color systems, responsive foundations, theming, governance, design-code parity, or reducing inconsistent UI patterns.
Yaz-inc/yazinc-ai-toolkit · ★ 0 · Web & Frontend · score 60
Install: claude install-skill Yaz-inc/yazinc-ai-toolkit
# Design System Engineering ## Objective Build a governed system of reusable decisions and components that keeps design and production code consistent, accessible, and economical to maintain. ## Workflow 1. Inventory current tokens, styles, components, duplicated patterns, platforms, consumers, ownership, release process, and known accessibility gaps. 2. Define foundations using semantic tokens for color, typography, spacing, sizing, radius, elevation, motion, breakpoints, and focus. Separate raw values from intent-based aliases. 3. Define component anatomy, properties, variants, states, responsive behavior, content constraints, keyboard behavior, semantics, and accessibility acceptance criteria. 4. Map Figma variables and components to code tokens and components with stable names. Record unavoidable differences explicitly. 5. Implement the smallest useful set first. Prioritize frequently reused primitives and high-risk form, navigation, feedback, overlay, and data-display components. 6. Document usage, composition, content guidance, anti-patterns, migration examples, ownership, and deprecation policy near the maintained source. 7. Test visual states, themes, responsive behavior, keyboard operation, contrast, zoom, reduced motion, and API compatibility. 8. Release with versioning, migration notes, consumer verification, and rollback guidance proportionate to the change. ## Governance rules - Add a component or variant only when a recurring product need justifies its mai