# Composition patterns — `scaffold-component`

Index of canonical pattern sheets. Each `.md` contains:

- **When to use** — pick the right pattern for a screen type
- **Anatomy** — tree showing the required wrappers + slot points
- **Canonical example** — a full compliant TSX file you can copy-adapt
- **Rules enforced** — which R1–R20 the pattern covers by construction
- **Import contract** — where every name comes from
- **Do NOT** — the recurring anti-patterns that surfaced in past runs

## Rule of thumb for loading

When the `scaffold-component` skill is invoked in the Frontend phase of
`ba-develop`, **only load the pattern(s) relevant to the
screens being generated** — not all five. Check the PRD's screen
specifications:

| Screen type (PRD) | Pattern file |
|---|---|
| "directory", "list", "table view" | [`list-page.md`](list-page.md) |
| "detail", "single-entity view", "profile" | [`detail-page.md`](detail-page.md) |
| "form", "create/edit", "wizard step" | [`form-page.md`](form-page.md) |
| "pipeline", "kanban", "workflow board" | [`kanban-board.md`](kanban-board.md) |
| "gallery", "catalogue", "dashboard cards" | [`entity-card.md`](entity-card.md) |

## Source of truth

All patterns derive from `D:/01 - projets/SmartStack.app/features/customisation-ui/`
baseline pages + the `@atlashub/smartstack` npm package surface (see
`node_modules/@atlashub/smartstack/dist/index.d.ts` for the exact set of
components that SHIP with the platform).

## Cross-references

- **Rule catalogue** — `skills/development/frontend/ui-polish/tokens.json`
  (20 rules) + `SKILL.md`
- **Design tokens** — same `tokens.json` under `cssVariables` (125 CSS vars)
- **Generator CLI** — `skills/development/frontend/component/cli/scaffold-component/`
  emits the 3 "page" patterns (list, detail, form) automatically. kanban-board
  and entity-card patterns are HAND-WRITTEN by the subagent when the PRD
  asks for those screen types — that's why they need a `.md` reference.