Agent skill · software engineering · aiskillstore
react-dev
This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router, React Router).
Why this skill is useful
Provides type-safe patterns and specific React 19 migration commands that the AI wouldn't reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
React TypeScript Type-safe React = compile-time guarantees = confident refactoring. <whentouse> Building typed React components Implementing generic components Typing event handlers, forms, refs Using React 19 features (Actions, Server Components, use()) Router integration (TanStack Router, React Router) Custom hooks with proper typing NOT for: non-React TypeScript, vanilla JS React </whentouse> <react19changes> React 19 breaking changes require migration. Key patterns: ref as prop - forwardRef deprecated: useActionState - replaces useFormState: use() - unwraps promises/context: See react-19-patterns.md for useOptimistic, useTransition, migration checklist. </react19changes> <componentpatterns> Props - extend native elements: Children typing: Discriminated unions for variant props: </componentpatterns> <eventhandlers> Use specific event types for accurate target typing: See event-handlers.md for focus, drag, clipboard, touch, wheel events. </eventhandlers> <hookstyping> useState - explicit for unions/null: useRef - null for DOM, value for mutable: useReducer - discriminated unions for actions: Custom hooks - tuple returns with as const: useContext - null guard pattern: See hooks.md for useCallback, useMemo, useImperativeHandle, useSyncExternalStore. </hookstyping> <genericcomponents> Generic components infer types from props - no manual annotations at call site. Pattern - keyof T for column keys, render props for custom rendering: Constrained generics for required properties: See generic-components.md for Select, List, Modal, FormField patterns. </genericcomponents> <servercomponents> React 19 Server Components run on server, can be async. Async data fetching: Server Actions - 'use server' for mutations: Client + Server Action: use() for promise handoff: See server-components.md for parallel fetching, streaming, error boundaries. </servercomponents> <routing> Both TanStack Router and React Router v7 provide type-safe routing solutions. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/react-dev