Does it provide patterns for generic components?

Yes, it includes detailed patterns for creating generic components that infer types from props, such as type-safe Tables and Lists.

How does it handle event typing in React?

It enforces specific event types such as MouseEvent, ChangeEvent, and FormEvent to ensure accurate target typing and avoid the use of 'any'.

Can it help with TanStack Router integration?

Absolutely, it provides patterns for type-safe routing, Zod-validated search params, and typed loader hooks for seamless integration.

Does this skill support React 19 features?

Yes, it includes specific patterns for React 19 features like useActionState, the use() hook, and using ref as a standard prop instead of forwardRef.

Is it useful for Server Components and Server Actions?

Yes, it provides best practices for async data fetching in server components, implementing server actions with useActionState, and streaming data.

React TypeScript Fieldguide

Name: React TypeScript Fieldguide
Author: outfitter-dev

byoutfitter-dev

•

Design Tools

Implements type-safe React patterns and React 19 features to ensure compile-time guarantees and robust component architecture.

The React TypeScript Fieldguide provides specialized patterns for building modern React applications using TypeScript, with a heavy focus on React 19's latest features. It offers precise guidance on migrating from legacy patterns—such as replacing forwardRef with ref props—and implementing complex types for hooks, event handlers, and generic components. By integrating best practices for Server Components and TanStack Router, this skill enables developers to maintain strict type safety across the entire frontend stack, reducing runtime errors and improving refactoring confidence.

Key Features

01Type-safe event handler and hook implementation guides

02Generic component patterns with inferred type support

03Full TanStack Router integration with Zod validation

04React 19 migration patterns including ref as prop and useActionState

05Strict Server Component and Server Action implementation rules

062 GitHub stars

Use Cases

01Migrating existing React 18 applications to React 19 with strict TypeScript

02Building complex, reusable UI libraries with generic component types

03Implementing type-safe routing and search parameter validation in web apps

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add outfitter-dev/outfitter react-fieldguide

For use in Claude.ai and ChatGPT

Download Skill