react-dev

Provide TypeScript patterns for type-safe React 18 and 19 applications.

9|2|Updated Jan 29, 2026
One-click install
npx skills add https://github.com/stephanj/claude-code-collections --skill react-dev-stephanj
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-dev
Source: https://github.com/stephanj/claude-code-collections/tree/main/skills/react-dev
Command: npx skills add https://github.com/stephanj/claude-code-collections --skill react-dev-stephanj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill eliminates TypeScript guesswork in React development by providing compile-time guarantees, confident refactoring, and production-ready patterns that catch bugs before runtime.

Core Features & Use Cases

  • React 19 Support: Includes patterns for Server Components, useActionState, and the use() hook.
  • Type-Safe Patterns: Provides exact types for event handlers, generic components, and custom hooks.
  • Router Integration: Offers comprehensive type-safe routing patterns for TanStack Router and React Router v7.

Quick Start

Ask the react-dev skill to generate a type-safe generic table component that accepts a data array and column definitions.

Frequently Asked Questions about react-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I type React 19 Server Components and useActionState in TypeScript?

Type React 19 Server Components and useActionState by applying compile-time type safety patterns that provide exact types for server-side integration and modern hooks. This ensures type-safe data fetching and action handling without runtime guesswork.

What's the best way to build type-safe generic React components?

The best way to build type-safe generic React components is to use TypeScript patterns that enforce exact prop types and column definitions at compile time. This approach enables confident refactoring and catches component interface bugs before runtime.

How do I configure type-safe routing with TanStack Router or React Router v7?

Configure type-safe routing by applying comprehensive TypeScript patterns specifically designed for TanStack Router and React Router v7 integration. This provides compile-time route validation and exact parameter typing for your React application navigation.

Can I use these TypeScript patterns to migrate an existing React 18 app to React 19?

Yes, you can use these TypeScript patterns to migrate a React 18 app to React 19 because they explicitly cover React 19 migration alongside backward compatible type-safety. This provides compile-time guarantees during the transition to Server Components and new hooks.

Why does my React TypeScript event handler throw a type mismatch error?

React TypeScript event handler type mismatches occur when event properties lack exact type definitions. Applying precise event handler typing patterns resolves this by providing strict compile-time type safety guarantees that catch incorrect event shapes before runtime.

Do I need specific TypeScript configurations to enable compile-time type safety in React?

You need strict TypeScript configurations to enable compile-time type safety in React, ensuring that component props, custom hooks, and event handlers yield exact types. This provides production-ready guarantees that eliminate runtime type guesswork.