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.