design-system-implementation

This skill acts as a design-system-first implementation assistant, ensuring that all frontend code adheres strictly to established design constraints rather than ad-hoc styling. It is designed to work as a secondary step after a project design system (typically defined in design/design-system.json) has been established, bridging the gap between design tokens and production-quality implementation. The agent interprets design system metadata—including colors, spacing scales, typography, and component recipes—to guide code generation in frameworks like React and Tailwind CSS. It prevents architectural drift by validating that every new component, page, or flow aligns with the authorized pattern library, ensuring accessibility standards and consistent user experiences across the entire repository.

• Automatically ingests design/design-system.json and optional design/design.json for style source of truth.

• Maps complex UI requirements to existing component variants to minimize redundant code.

• Enforces strict adherence to typography hierarchy, color states (primary/success/error/etc.), and layout spacing grids.

• Provides clear feedback on how generated code follows system constraints through token utilization.

• Proposes controlled extensions to the design system if a requirement necessitates a new pattern, ensuring JSON-based configuration integrity.

• Validates component accessibility including ARIA labels, keyboard navigation, and semantic HTML structure.

• Best for teams maintaining long-term frontend scalability where visual consistency is critical.

• Use after the design-system-from-reference skill has successfully bootstrapped the configuration files.

• Requires developers to provide clear requirements for new features, including constraints like framework choice or data layer interactions.

• If the design system is missing, the skill will prompt the user to initialize it first rather than guessing styles.

• Ideal for refactoring existing legacy UI into a coherent, design-system-compliant structure without inventing arbitrary utility classes.

• Supports systematic scaling of UI by proposing JSON patches for the design system when gaps are identified during implementation.