Skip to content

Buscar habilidades.../

Agent Skill Search Engine

Buscar

Buscar
Categorías
Ocupaciones

About

About
Privacy
Terms

© 2026 Skills Pool. Todos los derechos reservados.

Remix Ui | Skills Pool

Archivo del skill

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.

remix-run32,614 estrellas25 mar 2026

Ocupación
Categorías: Educación

Contenido de la habilidad

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 explicitly.

Skills relacionados

Instalación rápida

Remix Ui

npx skillvault add remix-run/remix-run-remix-skills-remix-ui-skill-md

Descargar Skill Abrir repositorio

Autor: remix-run
estrellas: 32,614
Actualizado: 25 mar 2026
Ocupación

En esta página

handle.update()

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.

When to Use

04Load These References As Needed

Desarrolladores de software

Update Skills

Create or update repository skills and instructions when major learnings are discovered during a session. Use when the user says "learn!", when a significant pattern or pitfall is identified, or when reusable domain knowledge should be captured for future sessions.

microsoft184.0k

Eval Harness

Eval-driven development (EDD) ilkelerini uygulayan Claude Code oturumları için formal değerlendirme çerçevesi

Ecc Tools Cost Audit

Evidence-first ECC Tools burn and billing audit workflow. Use when investigating runaway PR creation, quota bypass, premium-model leakage, duplicate jobs, or GitHub App cost spikes in the ECC Tools repo.

Code Tour

Create CodeTour `.tour` files — persona-targeted, step-by-step walkthroughs with real file and line anchors. Use for onboarding tours, architecture walkthroughs, PR tours, RCA tours, and structured "explain how this works" requests.

Rules Distill

Scan skills to extract cross-cutting principles and distill them into rules — append, revise, or create new rule files

Design System

Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.

Desarrolladores de software