remix-run/remix-ui
skills/remix-ui/SKILL.md
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 --global
skillsauthnpx skillsauth add remix-run/remix remix-uiInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 11, 2026, 10:37 PM37.0s7 files scanned
SKILL.md
- name:
- remix-ui
- description:
- 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.
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,
handleusage, 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(...), usinghandle.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.
Related Skills
remix-run/remix-project-layout
development
VerifiedTrustedCommunity
Describe the ideal layout of a Remix application, including canonical directories, route ownership, naming conventions, and file locations on disk. When asked to bootstrap that layout in a new directory, run the bundled TypeScript script.
32,605SKILL.mdUpdated Apr 11, 2026
remix-run/write-readme
documentation
VerifiedTrustedCommunity
Write or rewrite package README files in the style used by the Remix repository. Use when drafting a new package README, revising an existing README, or reviewing README structure, examples, installation instructions, and section ordering for Remix packages.
32,605SKILL.mdUpdated Apr 11, 2026
remix-run/write-api-docs
development
VerifiedTrustedCommunity
Write or audit public API docs for Remix packages. Use when adding or tightening JSDoc on exported functions, classes, interfaces, type aliases, or option objects.
32,605SKILL.mdUpdated Apr 11, 2026
remix-run/update-pr
documentation
VerifiedTrustedCommunity
Update an existing GitHub pull request title and description so they accurately describe the pull request as it exists now. Use when the user asks to update, rewrite, refresh, fix, or tighten a PR title/body, or when the PR scope has changed and the metadata needs to be brought back in sync.
32,605SKILL.mdUpdated Apr 11, 2026