react

Develop React frontend applications with TypeScript, Vite, and TanStack Query.

3|Updated Feb 21, 2026
One-click install
npx skills add https://github.com/endorphin-ai/claude-code-teams --skill react-endorphin-ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/endorphin-ai/claude-code-teams/tree/main/go-react-team/.claude/skills/react
Command: npx skills add https://github.com/endorphin-ai/claude-code-teams --skill react-endorphin-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive framework and best practices for developing modern React frontend applications, enabling efficient creation of user interfaces and seamless integration with backend services.

Core Features & Use Cases

  • Component-Driven Development: Build reusable UI components using functional components and TypeScript.
  • State Management: Implement robust server state management with TanStack Query and global client state with React Context.
  • API Integration: Define typed API client functions and integrate with backend services using Axios.
  • Routing & Navigation: Set up client-side routing with lazy loading using React Router.
  • Form Handling: Create forms with validation using React Hook Form and Zod.
  • Styling: Apply consistent styling with Tailwind CSS using a mobile-first approach.
  • Use Case: Develop a complete user management interface, including lists, detail views, forms for creation/editing, and API interactions, all while adhering to best practices for maintainability and performance.

Quick Start

Use the react skill to implement a new user profile page with a form for editing user details.

Frequently Asked Questions about react

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

FAQPage Schema
How do I build a React UI with TypeScript and manage both server and client state?

To build a React UI with TypeScript, use functional components for architecture, TanStack Query for server state management, and React Context for global client state. This approach ensures strict type safety, reusability, and maintainability across your dynamic user interfaces.

What's the best way to set up routing and API integration in a React frontend application?

The best way to set up routing and API integration in a React frontend is using React Router with lazy loading for navigation and Axios for typed API client functions. This combination enables seamless backend service interactions and efficient client-side routing.

How do I handle form validation in React using TypeScript?

To handle form validation in React using TypeScript, implement React Hook Form combined with Zod. This pattern enforces strict type safety and maintainability while creating dynamic forms for creation and editing workflows.

Can I use Tailwind CSS for styling React components in a TypeScript project?

Yes, you can use Tailwind CSS for styling React components in a TypeScript project. It applies consistent styling using a mobile-first approach, ensuring reusable UI components maintain strict design patterns across the application.

Does this React development approach require Vite for building dynamic user interfaces?

Yes, this React development approach uses Vite to facilitate building dynamic user interfaces. Combined with TypeScript, Vite provides the foundational environment for component-driven development and API integration while adhering to strict type safety patterns.

Why use TanStack Query instead of React Context for API data fetching?

You use TanStack Query instead of React Context for API data fetching because it provides robust server state management. React Context is reserved for global client state, ensuring clear separation of concerns and optimal maintainability in your React application.