react-typescript

Provide TypeScript patterns for React components, hooks, state, and forms.

Updated Dec 26, 2025

Search Tags:#typescript #react #hooks #zod #state-management #tanstack-query #react-hook-form

Ready to run

npx skills add https://github.com/Yoriichi-Dang/dashboard_web_template --skill react-typescript-yoriichi-dang

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-typescript
Source: https://github.com/Yoriichi-Dang/dashboard_web_template/tree/main/.cursor/skills/react-typescript
Command: npx skills add https://github.com/Yoriichi-Dang/dashboard_web_template --skill react-typescript-yoriichi-dang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This React-TypeScript Skill provides structured, reusable patterns to accelerate building modern React apps with strong typing, clean architecture, and scalable state management.

Core Features & Use Cases

Function components with TypeScript props and generics to ensure type safety.
Custom hooks, context/state management patterns, and clean separation of concerns.
TanStack Query integration for data fetching and mutations with optimistic updates.
Form handling with React Hook Form + Zod for strong validation.
Error boundaries and performance optimization patterns like memoization and code-splitting.

Quick Start

Install the necessary dependencies in your project (e.g., react, react-dom, @tanstack/react-query, react-hook-form, zod, zustand). Then copy the provided pattern snippets into your components, create a sample UserCard and a small form to validate the end-to-end flow. For example: create a UserCard that accepts a User prop and displays name and email, and implement a useCounter hook to demonstrate state management.

Frequently Asked Questions about react-typescript

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

FAQPage Schema

How do I build type-safe React function components with TypeScript props and generics?▼

Type-safe React function components use TypeScript props and generics to ensure strict type checking. You define strongly typed component interfaces, enabling scalable React applications with clean architecture and preventing runtime type errors during development.

What's the best way to handle form validation in React using React Hook Form and Zod?▼

Form validation in React using React Hook Form and Zod provides strong schema-based validation. You integrate Zod schemas to parse and validate user inputs, ensuring data integrity and type safety before form submission within your application.

How do I integrate TanStack Query for data fetching and optimistic updates in a React app?▼

Integrating TanStack Query for data fetching involves using its hooks for mutations and optimistic updates. This pattern manages server state cleanly, allowing your React app to update the UI immediately before server confirmation.

Do I need specialized infrastructure to use these React TypeScript patterns?▼

You do not need specialized infrastructure to use these React TypeScript patterns. They rely on standard React and TypeScript tooling, requiring only npm or yarn package installation for common libraries like zustand and react-hook-form.

How does state management work with custom hooks in a scalable React architecture?▼

State management with custom hooks in a scalable React architecture ensures clean separation of concerns. You encapsulate logic within reusable hooks, leveraging context or libraries like zustand to maintain predictable global and local state.