Remix remix-ui

Build the UI of a Remix app. Use when creating pages, layouts, client entries, interactions, stateful UI, navigation, hydration, styling, animations, reusable mixins, or UI tests.

install

source · Clone the upstream repo

git clone https://github.com/remix-run/remix

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/remix-run/remix "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/remix-ui" ~/.claude/skills/remix-run-remix-remix-ui && rm -rf "$T"

manifest: skills/remix-ui/SKILL.md

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

Creating or updating pages, layouts, and presentational components
Adding interactivity, state, event handling, or reactive DOM work
Styling with
```
css(...)
```
,
```
style
```
, refs, keyboard helpers, or press helpers
Adding or refactoring
```
clientEntry(...)
```
,
```
run(...)
```
, frames, or UI navigation
Implementing enter/exit/layout animations
Authoring reusable mixins with
```
createMixin(...)
```
Writing or updating UI-focused component tests

Procedure

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={[keysEvents()]}
```
```
mix={[pressEvents()]}
```
```
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.

Load These References As Needed

./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/component/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.