# 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 ui-polish hard rules (R1–R30, R23 reserved — `ui-polish/tokens.json`) 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`
  (`hardRules[]` — 29 rules) + `SKILL.md`
- **Design tokens** — same `tokens.json` under `cssVariables` (125 CSS vars)
- **Generator CLI** — `skills/development/frontend/component/cli/scaffold-component/`
  emits EVERY page: list, detail, form, dashboard, reconduction and the hub views.
  `kanban-board` and `entity-card` are NOT standalone pages and are never
  hand-written (a hand-written page fails `validate-page` `cli-generated-marker`):
  the board is the LIST page's `viewModes: ['kanban']` (pagespec `kanban` block,
  `lib/page-spec-kanban`) and cards are `viewModes: ['cards']` — the two sheets
  document the rendered anatomy of those view modes.