react

Implements scalable React 19+ components, hooks, and TypeScript patterns for frontend projects.

1|Updated Mar 27, 2026

Search Tags:#typescript #testing #frontend #react #hooks #patterns #component-architecture

Ready to run

npx skills add https://github.com/leonanpereirapinto/ai-utils --skill react-leonanpereirapinto

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react
Source: https://github.com/leonanpereirapinto/ai-utils/tree/main/skills/typescript/react
Command: npx skills add https://github.com/leonanpereirapinto/ai-utils --skill react-leonanpereirapinto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guide helps teams implement scalable React components and patterns, reducing boilerplate and improving maintainability.

Core Features & Use Cases

Component Architecture Patterns: functional components, feature-based organization, and clear separation of concerns.
Custom Hooks & TS Integration: guidelines for extracting logic into useX hooks and typing props without React.FC.
State Management & Patterns: recommendations for local state, Zustand, TanStack Query, and URL state.
Testing & Modern Features: guidance on Vitest tests and React 19+ features like use(), Suspense, and concurrent patterns.

Quick Start

Describe the task you want React code for, and I will generate a component, hook, or pattern following the React 19+ guidelines.

Frequently Asked Questions about react

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

FAQPage Schema

How do I build scalable React components with TypeScript?▼

Build scalable React components by using functional components, feature-based organization, and typing props without React.FC. This approach enforces single responsibility and clear separation of concerns across your frontend project.

What is the best way to extract custom hooks in React 19?▼

The best way to extract custom hooks in React 19 is by moving logic into useX hooks. This pattern isolates business logic from rendering, improving maintainability and reducing boilerplate in your functional components.

How do I manage state in React using Zustand and TanStack Query?▼

Manage state in React by using local state for UI, Zustand for global state, TanStack Query for server state, and URL state for routing. This ensures clear separation of concerns across data domains.

Does this React pattern guide support concurrent features and Suspense?▼

This React pattern guide supports concurrent features and Suspense. It provides guidelines for implementing React 19+ features like the use() hook and concurrent patterns for scalable frontend applications.

How do I test React components with Vitest?▼

Test React components with Vitest by following the testing guidelines integrated alongside component architecture patterns. This ensures your functional components and custom hooks maintain robust coverage.