# Component Catalog

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

- Skill: `memi-design/component-catalog` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add memi-design/component-catalog`
- Raw SKILL.md: https://api.skillmd.com/api/skills/memi-design/component-catalog/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: memi-design (https://skillmd.com/u/memi-design)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/memi-design/component-catalog

---


# 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](references/catalog.md).
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.