react-component_skill

Overview

This skill generates production-ready React components in TypeScript with hooks, state management, and accessibility best practices. It supports function components, custom hooks, and Context Providers, producing small, composable building blocks you can drop into modern React apps. The output follows common patterns like memoization, typed props, ARIA attributes, and clear separation of concerns.

How this skill works

Given a request for a component, the skill returns a TypeScript function component with typed props, sensible defaults, and optional memoization. For data needs it can generate custom hooks that handle fetching, loading, error states, and refetching. For app-wide state it can scaffold a Context Provider and a typed useContext hook that enforces correct usage and simple auth patterns.

When to use it

• You need a typed, accessible UI component (buttons, inputs, modals) ready for Tailwind or CSS modules.
• You want a custom hook for data fetching with loading/error/refetch handling.
• You need a lightweight Context Provider for auth or domain state with a typed consumer hook.
• You want consistent patterns: memoized components, ARIA attributes, and clear prop defaults.
• You are migrating JS components to TypeScript and need examples of typed props and hooks.

Best practices

• Export components as named, memoized functions and set displayName for easier debugging.
• Keep hooks side-effect focused: return stable callbacks, expose refetch methods, and handle cancellation if necessary.
• Type context values strictly and throw when useContext is used outside the Provider.
• Add ARIA attributes for dynamic states (aria-busy, aria-disabled) and provide visible focus styles.
• Prefer small focused components and lift state to Context or hooks when shared across the tree.

Example use cases

• Create a reusable Button component with loading spinner and variant/size props for a design system.
• Generate a useFetch<T> hook to encapsulate API calls and reuse across pages.
• Scaffold an AuthProvider that manages user state, login/logout, and a useAuth hook for consumers.
• Build an accessible modal or form input with proper ARIA attributes and keyboard handling.
• Provide TypeScript examples to accelerate migrating a legacy codebase to typed React.