11---
22name : mosaic
33description : >-
4- Work on Mosaic UI: styling a component with slot recipes (`defineSlotRecipe` /
5- `useRecipe` / slots / variants ), or building a flow — authoring a state machine
4+ Work on Mosaic UI: styling a component with StyleX (`stylex.create`, `--cl-*`
5+ tokens, `themeProps` ), or building a flow — authoring a state machine
66 (`setup`, states/guards/`invoke`, wiring to React with `useMachine`/`useActor`/
77 `useSelector`), writing the controller (Clerk adapter) or view (rendering) layer,
88 testing any of those layers, or migrating a legacy / pre-Mosaic component into the
@@ -15,9 +15,10 @@ description: >-
1515
1616Two things live under Mosaic, and this skill covers the how-to for both:
1717
18- - ** Styled components** are authored with ** slot recipes** — one recipe owns a
19- part's slot identity (` data-cl-slot ` ), variants, state, and appearance
20- cascade; ` useRecipe ` resolves it and hands back per-slot props to spread.
18+ - ** Styled components** are authored with ** StyleX** — ` stylex.create ` declares
19+ the styles, ` themeProps ` emits the part's public identity (the ` .cl-<slot> `
20+ class plus ` data-<axis> ` attrs), and ` mergeStyleProps ` fuses the two with the
21+ consumer's ` className ` /` style ` .
2122- ** Flows** follow a ** machine → controller → view** split that keeps Clerk
2223 resource logic out of visual components and makes behavior testable without a
2324 running Clerk app:
@@ -35,25 +36,24 @@ view Rendering only: receives a snapshot plus explicit props, renders UI,
3536```
3637
3738` references/mosaic-architecture.md ` (repo root, read by all agents) is the
38- canonical contract for the whole design system — tokens, theme delivery , the
39- ` data- cl-* ` styling API, slot recipes, appearance/cascade/scope , and the "Flow
40- and data architecture" section that defines the split. Read it for the _ what_ ;
41- this skill is the _ how-to_ .
39+ canonical contract for the whole design system — the ` --cl-* ` tokens , the
40+ ` . cl-<slot> ` + ` data-<axis> ` styling API, the CSS build , and the "Flow and data
41+ architecture" section that defines the split. Read it for the _ what_ ; this skill
42+ is the _ how-to_ .
4243
4344## Which reference to read
4445
45- | You are… | Read |
46- | -------------------------------------------------------------------- | ------------------------------------------------------ |
47- | Building on / authoring a headless primitive (` @clerk/headless ` ) | ` references/headless.md ` |
48- | Styling a component with StyleX (tokens, ` stylex.create ` , CSS build) | ` references/stylex.md ` |
49- | Building an enter/exit transition, or any motion that reads as wrong | ` references/motion.md ` |
50- | Styling a component the legacy way (slot recipes, ` useRecipe ` ) | ` references/styling.md ` |
51- | Authoring or debugging a state machine, or wiring one to React | ` references/machines.md ` → in-tree ` machine/README.md ` |
52- | Writing the controller (Clerk adapter, permissions, revalidate) | ` references/controllers.md ` |
53- | Writing the view (rendering a snapshot, sending events) | ` references/views.md ` |
54- | Testing a machine, controller, or view | ` references/testing.md ` |
55- | Migrating a legacy component into Mosaic (the end-to-end workflow) | ` references/migration.md ` |
56- | Running the parity audit that guards a migration | ` references/parity-audit.md ` |
46+ | You are… | Read |
47+ | ---------------------------------------------------------------------- | ------------------------------------------------------ |
48+ | Building on / authoring a headless primitive (` @clerk/headless ` ) | ` references/headless.md ` |
49+ | Styling a component (tokens, ` stylex.create ` , ` themeProps ` , CSS build) | ` references/stylex.md ` |
50+ | Building an enter/exit transition, or any motion that reads as wrong | ` references/motion.md ` |
51+ | Authoring or debugging a state machine, or wiring one to React | ` references/machines.md ` → in-tree ` machine/README.md ` |
52+ | Writing the controller (Clerk adapter, permissions, revalidate) | ` references/controllers.md ` |
53+ | Writing the view (rendering a snapshot, sending events) | ` references/views.md ` |
54+ | Testing a machine, controller, or view | ` references/testing.md ` |
55+ | Migrating a legacy component into Mosaic (the end-to-end workflow) | ` references/migration.md ` |
56+ | Running the parity audit that guards a migration | ` references/parity-audit.md ` |
5757
5858The migration workflow (` migration.md ` ) ties the flow references together: it
5959treats the legacy component as the spec and drives you through the machine,
0 commit comments