web-framework-react_skill

Overview

This skill teaches building composable React component libraries and patterns tailored for React 19. It documents a tiered component architecture, React 19 ref-as-prop conventions, hooks related to Actions and form state, icon usage, and common patterns for events, variants, and error handling. Practical guidance ensures components are customizable, accessible, and aligned with modern React APIs.

How this skill works

The skill inspects component design and implementation patterns across four tiers: primitives, components, patterns, and templates. It explains how to declare props (including passing ref as a regular prop), expose className for styling, define type-safe variant props, and use React 19 hooks such as use(), useActionState, useFormStatus, and useOptimistic. It also covers icon integration with lucide-react, event handler naming, custom hooks, and error boundary strategies.

When to use it

• Building a reusable component library or design system
• Creating interactive, stateful components that use React 19 Actions
• Implementing type-safe variant and size props for UI controls
• Adding accessible icon-only buttons and icon integrations with lucide-react
• Handling form submissions with automatic pending/error state

Best practices

• Organize components in tiers: primitives → components → patterns → templates
• Pass ref as a regular prop in React 19 and expose className on all reusable components
• Use named exports and named constants for numeric values to avoid magic numbers
• Use useActionState for form actions and useFormStatus in child submit controls to avoid prop drilling
• Only introduce variant abstractions when a component has multiple visual variants; prefer simple APIs otherwise

Example use cases

• A Button component exposing variant, size, className, and ref for broad reuse
• A ProfileForm using useActionState to manage pending and error states during submission
• An Alert component with type-safe variant props and a named ANIMATION_DURATION_MS constant
• An icon-only social links list using lucide-react with title and aria-label for accessibility
• An ErrorBoundary wrapping a feature area with a retry button and error logging