Build UI

Use this skill when building the UI of a Remix app.

This skill uses Remix Component as the UI model behind the app's pages, layouts, interactions, and client behavior.

When to Use

Follow the two-phase component shape:
- setup runs once
- returned render function runs on every update
Keep state in setup scope as plain JavaScript variables and call handle.update() explicitly.
Prefer host-element mixins over legacy host props:
- mix={[on(...)]}
- mix={[css(...)]}
- mix={[ref(...)]}
- mix={[link(href, options)]}
Use addEventListeners(target, handle.signal, listeners) for global listeners.
Use queueTask(...) for post-render DOM work, reactive effects, or hydration-sensitive setup.
Keep <head> explicit in document or layout code.
Test with real interactions and root.flush() when unit tests need synchronous assertions.

./references/component-model.md Use for component shape, state, handle usage, and global listeners.
./references/mixins-styling-events.md Use for host-element events, refs, styling, and built-in behavior helpers. Prefer these helpers over re-implementing keyboard, press, link, or animation behavior yourself.
./references/hydration-frames-navigation.md Use for clientEntry, run, frames, SSR frame context, navigation APIs, and explicit <head> management.
./references/testing-patterns.md Use for component tests, root.flush(), and high-value testing heuristics.
./references/animate-elements.md Use when the task is about enter/exit transitions, FLIP reordering, shared-layout swaps, or animation-heavy interactions in app code.
./references/create-mixins.md Use when authoring or reviewing reusable mixins, touching createMixin(...), using handle.addEventListener('insert' | 'remove', ...), or reasoning about mixin lifecycle semantics and type flow.
packages/ui/docs Use as the general upstream docs directory when the local references here are not enough and you need to choose the most relevant Component docs to open.