Component Catalog

Select and classify interface components when planning a design system, mapping Figma to code, or checking component-library coverage.

memi-design fa215f2 3 files · 7.8 KB Updated

File contents

Component catalog

Use this skill to decide which components a product needs and how each component maps to Atomic Design and shadcn/ui.

Workflow

  1. Inventory the product's workflows, states, and repeated interface patterns.
  2. Read the universal component catalog.
  3. Select only components supported by current product evidence.
  4. Assign each component an Atomic Design level.
  5. Reuse a local or shadcn/ui primitive before proposing a new implementation.
  6. Record required variants, states, accessibility behavior, and composition dependencies.

Treat the catalog as a discovery aid, not a requirement to build every listed component.

memi-design/design-skills/tree/main/skills/component-catalog commit fa215f2733

Frequently asked questions

npx skillmds@latest add memi-design/component-catalog