react-component-dev_skill

Overview

This skill helps you build composable, accessible, and well-structured React components using proven patterns. It focuses on prop design, forwardRef, accessibility, file organization, and testing approaches to produce predictable component APIs. Use it to create new components, refactor existing ones, or review component architecture for maintainability.

How this skill works

The skill inspects component responsibilities and recommends patterns: prefer composition over configuration, forward refs when the component exposes a DOM node, and design props as predictable unions instead of multiple booleans. It enforces accessibility checks (keyboard, ARIA, reduced-motion) and suggests file layout, ref typing, and testing targets. It also provides concrete examples for event handler composition, state strategies, and anti-patterns to avoid.

When to use it

• Creating a new UI component that will be reused across the app
• Refactoring a component with messy props or inconsistent APIs
• Reviewing a component library for accessibility regressions
• Implementing focus management or exposing DOM refs for consumers
• Designing tests to exercise user interactions and ARIA states

Best practices

• Favor composition (slots/render props) over enumerating configuration flags
• Forward refs for single-root components or when consumers need focus/measurement
• Keep APIs predictable: use literal unions for variants and avoid boolean prop explosion
• Always include className, children (when applicable), and spread native HTML props
• Test user interactions and accessibility states, not internal implementation details

Example use cases

• Create a Button component with variant/size unions, forwardRef, and native prop inheritance
• Refactor a Dialog to expose trigger, title, description, and footer slots with correct ARIA attributes
• Implement keyboard navigation and focus traps for menus and modals, honoring reduced-motion preferences
• Split complex state into a custom hook (useDialogState) and keep component implementation focused on rendering
• Design tests that assert role, keyboard behavior, ARIA attributes, and conditional rendering