mosaic

name

mosaic

description

Work on Mosaic UI: styling a component with StyleX (`stylex.create`, `--cl-*` tokens, `themeProps`), or building a flow — writing the model (the Clerk adapter), the controller (local state, in React state or a state machine: `setup`, states/guards/`invoke`, wired to React with `useMachine`/`useActor`/ `useSelector`), or the view (rendering), testing any of those layers, or migrating a legacy / pre-Mosaic component into the model / controller / view split. Use when building, styling, debugging, testing, or migrating anything Mosaic. `references/mosaic-architecture.md` (repo root) holds the design-system contract; this skill is the how-to layer.

Mosaic UI

Two things live under Mosaic, and this skill covers the how-to for both:

• Styled components are authored with StyleX — stylex.create declares the styles, themeProps emits the part's public identity (the .cl-<slot> class plus data-<axis> attrs), and mergeStyleProps fuses the two with the consumer's className/style.
• Flows follow a model → controller → view split — where the data comes from → what the user is doing to it → what that looks like. What crosses each boundary is plain data: no Clerk resource reaches the controller, no machine snapshot reaches the view.

model       Clerk adapter: reads Clerk hooks and resources, resolves the
            environment, gates permissions, and answers with plain data plus
            plain callbacks under an explicit `status`. The only layer that may
            import Clerk hooks or call Clerk resource methods.

controller  Local state: what is open, what is in flight, what the view may do
            next — held in React state or a state machine, whichever the
            interaction's complexity calls for. Wraps the model's callbacks so
            an action can report pending, hold the surface still while it runs,
            and close on success. No Clerk imports.

view        Rendering: takes plain props and callbacks, renders UI, calls them
            back. No Clerk imports. No data-fetching. No machine snapshot.