component-extract

Component extraction walks the design block by block, checking whether each visual pattern repeats, could recur elsewhere, has variants, or has states. Qualifying patterns are classified as atoms, molecules, organisms, or templates and documented in a component-inventory.md file.

Each component entry records its name, purpose, variants and sizes, interaction states, referenced design tokens, composition from other components, accessibility notes, and at least one Do and one Don't guideline.

No, it was marked deprecated in v5.0 and will be physically deleted after six months without usage. The maintainers recommend Storybook or Figma Code Connect for inventories and the 5-dim-review route for reviewing existing component libraries.

It flags inconsistencies such as multiple near-identical button styles, missing states like focus or disabled, missing variants such as a destructive button, and spacing or sizing values that fall outside the established token scale.

Use design-system-extract when you need token-level details such as colors, spacing, typography, radii, shadows, and motion values. Component-extract focuses on identifying and documenting reusable UI components rather than foundational tokens.