react-typescript

Provide React 19 patterns and TypeScript guidance for type-safe components and stateful applications.

Updated Mar 3, 2026
One-click install
npx skills add https://github.com/jacexh/skills --skill react-typescript-jacexh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-typescript
Source: https://github.com/jacexh/skills/tree/main/skills/react-typescript
Command: npx skills add https://github.com/jacexh/skills --skill react-typescript-jacexh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides concise, modern React 19+ patterns and TypeScript guidance to reduce boilerplate, avoid anti-patterns, and ensure type-safe, performant frontend components and state management.

Core Features & Use Cases

  • Component patterns: Function components, generics, children typing, and compiler-friendly best practices.
  • State & data: Context, Zustand examples, and TanStack Query usage including optimistic updates and cache management.
  • Forms & validation: React Hook Form integration with Zod for typed schema validation and user-friendly error handling.
  • Performance & stability: Memoization, code-splitting, error boundaries, and guidance for React 19 features like use and Actions.
  • Use Case: Build a user profile page with type-safe components, server-driven queries, form-driven edits with optimistic updates, and fallback error handling.

Quick Start

Ask the assistant to "Create a TypeScript React 19 component named UserForm that uses TanStack Query to load user data, React Hook Form with Zod for validation, and includes optimistic updates and memoized child components."

Frequently Asked Questions about react-typescript

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

FAQPage Schema
How do I implement optimistic updates with TanStack Query in TypeScript?

To implement optimistic updates with TanStack Query in TypeScript, apply composable query and mutation workflows that update the cache immediately while managing rollback on error. This pattern ensures type-safe server-driven data synchronization.

What is the best way to validate React 19 forms using Zod and TypeScript?

The best way to validate React 19 forms with Zod and TypeScript is integrating React Hook Form with Zod schemas. This provides typed schema validation and user-friendly error handling directly within your UI components.

How do I create type-safe custom hooks for React 19 components?

Create type-safe custom hooks for React 19 components by defining strict TypeScript signatures and leveraging compiler-friendly patterns. This ensures reliable state management and type-safe data flow throughout your application.

Can I use React 19 Actions and the use hook with TypeScript for state management?

Yes, you can use React 19 Actions and the use hook with TypeScript for state management. These compiler-friendly features integrate seamlessly with type-safe component signatures and modern stateful application patterns.

How do I handle error boundaries and performance optimization in React 19?

Handle error boundaries and performance optimization in React 19 by applying memoization, code-splitting, and fallback error handling. These techniques reduce boilerplate and ensure performant frontend components.

Does this approach support Zustand for state management alongside TanStack Query?

Yes, this approach supports Zustand for state management alongside TanStack Query. You can combine Zustand examples with TanStack Query workflows to build type-safe, performant stateful applications.