react-component

Build accessible React UI primitives using Radix-style composition and shadcn/ui conventions.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/dungle-scrubs/agent-config --skill react-component-dungle-scrubs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-component
Source: https://github.com/dungle-scrubs/agent-config/tree/main/stow/shared/skills/react-component
Command: npx skills add https://github.com/dungle-scrubs/agent-config --skill react-component-dungle-scrubs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides scalable React component development by applying Radix-style composition and shadcn/ui conventions to create accessible, reusable UI primitives.

Core Features & Use Cases

  • Compound components: Implement context-driven Root/Trigger/Content patterns with forwardRef to ensure composability and accessibility.
  • Architecture guidance: Establish consistent component organization, naming, and state handling for forms, modals, and data displays.
  • Library recommendations: Recommend shadcn/ui as default; offer alternatives like ReactBits or Animate UI for specialized visuals when requested.

Quick Start

Start by creating a Root component with a forwardRef, wrap children with a provider, and expose subcomponents (Root, Trigger, Content). Then export as a Component object with nested properties for reuse in your UI.

Frequently Asked Questions about react-component

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

FAQPage Schema
How do I build accessible React components using Radix-style composition?▼

To build accessible React components using Radix-style composition, create a Root component with forwardRef, wrap children with a context provider, and expose subcomponents like Trigger and Content as nested properties for reuse.

What is the best way to structure reusable React UI primitives for forms and modals?▼

The best way to structure reusable React UI primitives for forms and modals is by applying context-based composition, enforcing forwardRef usage, and establishing consistent naming and state handling conventions across your project architecture.

Does this approach work with shadcn/ui guidelines for scalable React development?▼

Yes, this approach works directly with shadcn/ui guidelines by enforcing forwardRef usage, context-based composition, and clear prop and state conventions to ensure component reusability and accessibility across scalable React projects.

Can I use ReactBits or Animate UI instead of shadcn/ui for specialized visual components?▼

Yes, you can use ReactBits or Animate UI instead of shadcn/ui for specialized visual components, with shadcn/ui recommended as the default library and alternatives suggested for specialized visual requirements when requested.

How do compound components in React ensure composability and accessibility?▼

Compound components in React ensure composability and accessibility by implementing context-driven Root, Trigger, and Content patterns with forwardRef, allowing modular assembly while maintaining consistent state management and accessible DOM structures.