---
name: velin-components-select-compose
description: Browse/select existing VelinStyle components and compose; reuse before invent.
---
# Select & Compose Components

## Purpose
Chooses component set that matches page intent and constraints.

## Domain
B · category `components`

## Capabilities
- `build.components`

## Permission
`plan-only`

## Allowed actions
- READ
- RECOMMEND
- PLAN

## Forbidden actions
- WRITE
- APPLY
- ROLLBACK
- ACCEPT
- DEFER
- NOTE
- ACKNOWLEDGE
- CATALOG
- MANIFEST
- CLASSIFY
- invent-target

## Stop conditions
- SR-12

## Agent role / risk
Selector · risk `low`

## Reuse (mandatory before build)

Follow `velin-reuse-gate` (BP-R01…R04):

1. **SEARCH** existing VelinStyle skills, components/Web Components, utilities, tokens, and patterns.
2. **EXISTING?** If a fit exists, document it.
3. **COMPATIBLE?** If yes → **REUSE** (or EXTEND). If no → document the incompatibility.
4. **NEW** only with evidenced gap — never "create because needed".
5. Skipping reuse on non-greenfield work → **STOP** (SR-12).

## Component inventory (covers browse need)
1. List official components / blocks / WCs available in the project and docs.
2. Match intent → candidate components.
3. Compatibility check (API, a11y, theme).
4. Compose via reuse; NEW only with gap evidence.

## Card discovery (Phase 4.12)
When the user asks for a **Card** (new card, extend card header, card layout):
1. Run **reuse-gate** first — do not invent a custom card.
2. SEARCH existing VelinStyle card/surface patterns, blocks, and recipes.
3. If a compatible card exists → **REUSE** or **EXTEND** (e.g. add header slot/section).
4. If incompatible → document the gap; only then plan NEW.
5. Router intent `build-card` lands on reuse-gate → this skill / recipe.

## Button / Form / Navigation discovery (Phase 4.15)
When the user asks for a **Button**, **Form**, **Navigation**, or **Layout**:
1. Run **reuse-gate** first.
2. SEARCH `.velin-btn`, form-kit / form docs, `.velin-nav` / nav WCs, layout utilities.
3. **REUSE** or **EXTEND** before inventing parallel components.
4. Router intent `build-compose` → reuse-gate → this skill / recipe.

## Workflow
1. Reuse-gate + inventory browse.
2. Select compose path (forms/nav/cards/modals) using existing pieces (BP-C01, BP-F01, BP-N01, BP-TB01).
3. Emit composition notes + HTML; no invent tokens (BP-T01).

## Best practices
- BP-R01–R04, BP-C01, BP-C02, BP-F01, BP-N01, BP-TB01, BP-B03

## Anti-patterns
- Building a custom dropdown when Select exists and is compatible.
- Building a new Card when an existing card/surface pattern matches.

## Inputs / Outputs
- Inputs: prompt, docs
- Outputs: html, checklist