design-component

You extract a reusable UI component primitive by identifying patterns appearing across three or more surfaces, then generating a specification with a TSX sketch, props API, variants, and accessibility guidelines to standardize the design system implementation.

The threshold for extracting a component primitive is reaching three or more surfaces with a repeating UI pattern, or identifying a specific gap in the design system that requires standardization to prevent ad-hoc implementations.

You generate a TSX sketch and props API by applying the primitive specification to the repeated interface pattern, documenting variants with CVA where appropriate, defining states, and aligning props to design-token conventions.

No, design-component does not write to the src directory; it produces a handoff artifact containing the TSX sketch, tokens, and test strategy intended for the build-feature workflow to implement.

Yes, the component primitive spec includes accessibility guidelines and a test strategy alongside the props API, variants, states, and documented design tokens to ensure governance and compliance across the design system.

CVA variants are used when appropriate to standardize component states and visual variations within the TSX sketch, ensuring the primitive aligns with design-token conventions and maintains consistency across multiple interface surfaces.