author-ui-modules

Build idiomatic Remix UI modules with provider/context and role mixins.

33.3k|2.8k|Updated Oct 26, 2020
One-click install
npx skills add https://github.com/remix-run/remix --skill author-ui-modules
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: author-ui-modules
Source: https://github.com/remix-run/remix/tree/main/.agents/skills/author-ui-modules
Command: npx skills add https://github.com/remix-run/remix --skill author-ui-modules

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Remix UI development often requires repeating patterns across multiple roles; this skill provides a disciplined approach to building idiomatic packages/ui modules that can be composed into reusable primitives and cohesive controls.

Core Features & Use Cases

  • Build small headless modules with a provider/context and a few focused mixins.
  • Assemble composed controls by combining modules like popover, listbox, and select with wrapper components that own state when appropriate.
  • Use case: implement a shared UI primitive (e.g., a custom dropdown) that can be reused across Remix apps.

Quick Start

Set up a small UI module with a provider/context and a couple of mixins to expose a stable API.

Frequently Asked Questions about author-ui-modules

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build reusable UI modules in Remix that span multiple component roles?▼

You build reusable Remix UI modules by establishing a provider/context shape with focused role mixins and wrapper components. This approach enforces plain context coordination and modular composition for cohesive controls.

What is the best way to structure a custom dropdown using Remix context and wrapper components?▼

Structuring a custom dropdown involves combining popover, listbox, and select modules with wrapper components that own state. This creates a shared UI primitive reusable across Remix apps.

Can I use headless UI primitives to manage state for popover, listbox, and select patterns in Remix?▼

Yes, you can assemble composed controls by combining headless UI modules like popover, listbox, and select with wrapper components. These wrappers own state when appropriate, exposing a lightweight API surface.

Does building idiomatic Remix UI modules require external component libraries or dependencies?▼

Building idiomatic Remix UI modules does not require external dependencies. It relies on plain context coordination and modular composition to provide a lightweight API surface suitable for first-party UI development.

How do I expose a stable API for a small headless UI module in a Remix packages/ui directory?▼

You expose a stable API by setting up a small headless module with a provider/context and a couple of focused mixins. This disciplined approach ensures modular composition and a lightweight API surface.

When should I use role mixins instead of wrapper components for Remix UI controls?▼

Use role mixins to distribute behavior across multiple component roles within a headless module, and use wrapper components when you need to assemble composed controls like popover, listbox, and select that own state.