react-dev_skill

Overview

This skill provides practical, type-safe patterns for building React components with TypeScript, covering React 18 and React 19 features. It focuses on correct typing for props, events, hooks, generic components, Server Components, and router integration. Use it to eliminate runtime type errors and enable confident refactoring.

How this skill works

The skill inspects component and hook patterns and offers concrete TypeScript typings and code templates. It enforces explicit useState/useRef typing, specific React event types, discriminated unions for variants, and React 19 conventions like ref-as-prop, useActionState, and use(). It also includes typed examples for TanStack Router and React Router v7 loaders and actions.

When to use it

• Building new React components in TypeScript
• Implementing generic or constrained components (tables, lists, selects)
• Typing event handlers, forms, refs, and custom hooks
• Migrating to React 19 features (use(), useActionState, ref as prop)
• Integrating type-safe routing with TanStack Router or React Router v7

Best practices

• Always use specific React event types (MouseEvent, ChangeEvent, FormEvent) instead of any
• Annotate useState for unions or nullable state (e.g., User | null)
• Extend native elements with ComponentPropsWithoutRef for accurate props and intrinsic attributes
• Use discriminated unions for variant props and guarded switches for exhaustive handling
• Return tuples with as const for custom hooks that expose stable tuples
• Follow React 19 rules: ref passed as a prop, avoid forwardRef, useActionState for form actions, and use() to unwrap promises

Example use cases

• Type-safe Button that extends native button props and supports variants with discriminated unions
• Generic Table<T> component using keyof T and render props that infers column types from data
• Typed form with useActionState for server actions and precise FormEvent handling
• Server Component page that passes a promise to a client component and uses use() on the client to unwrap it
• Router integration showing typed loaders and validated search params with TanStack Router or React Router v7