# Component Composition

> Use before building UI with local components, Storybook, shadcn, Radix, a private registry, or another component library; verifies available components, props, states, and composition choices.

- Skill: `seemseam/component-composition` (Agent Skill)
- Install (CLI): `npx skillmds@latest add seemseam/component-composition`
- Raw SKILL.md: https://api.skillmd.com/api/skills/seemseam/component-composition/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: seemseam (https://skillmd.com/u/seemseam)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/seemseam/component-composition

---


# Component Composition

Use this skill before introducing new UI primitives or composing a page from an
existing component system.

## Workflow

1. Inspect project-local components, Storybook stories, docs, exports, and
   examples.
2. Identify the smallest set of components needed for the surface and states.
3. Verify props, variants, accessibility behavior, and styling conventions from
   source or docs.
4. Use shadcn or registry components only when the project stack and ownership
   model support them.
5. Use Radix-like primitives as behavior references when local components need
   accessible interaction patterns.
6. Avoid broad new UI-library recommendations when the target project already
   has a component system.

## Output

Return:

- component inventory used
- composition plan
- missing component or state gaps
- prop/API assumptions verified from source
- implementation notes

Do not invent props or import paths from component names.