react-web

Develop React web apps with TypeScript, hooks, React Query, and Zustand using test-first methods.

705|56|Updated Dec 26, 2025

Search Tags:#typescript #tdd #web development #state management #frontend #react #hooks

Ready to run

npx skills add https://github.com/alinaqi/claude-bootstrap --skill react-web-alinaqi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-web
Source: https://github.com/alinaqi/claude-bootstrap/tree/main/skills/react-web
Command: npx skills add https://github.com/alinaqi/claude-bootstrap --skill react-web-alinaqi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a robust framework and best practices for developing React web applications, emphasizing test-first development, component reusability, and efficient state management.

Core Features & Use Cases

Test-Driven Development (TDD): Enforces writing tests before implementation for components and hooks.
Component Architecture: Guides the creation of well-structured, reusable UI components.
State Management: Integrates local state, Zustand for global state, and React Query for server state.
Use Case: Develop a new user authentication flow, ensuring all components are tested and logic is encapsulated in hooks before rendering.

Quick Start

Use the react-web skill to create a new Button component, starting with its test file.

Frequently Asked Questions about react-web

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

FAQPage Schema

How do I build React components using test-driven development?▼

To build React components with test-driven development (TDD), you write unit tests defining expected behavior before implementation, then create the UI component to pass those tests. This approach ensures logic correctness and component reliability.

What is the best way to manage state in a React web application using hooks?▼

The best way to manage state with hooks involves separating concerns: use local state for component-specific data, Zustand for global state, and React Query for server state. This structured approach ensures efficient data flow across your application.

How do I handle form validation in React with Zod and React Hook Form?▼

Form handling in React with Zod and React Hook Form involves defining schema validation rules with Zod, then integrating them into React Hook Form to manage input state and capture validation errors automatically during user submission.

Does this React development approach support styling with CSS Modules and Tailwind?▼

Yes, this React development approach supports styling with both CSS Modules and Tailwind. You can utilize either method to scope styles locally to your components and build responsive, maintainable user interfaces.

Can I use TypeScript with React Query and Zustand for frontend development?▼

Yes, you can use TypeScript with React Query and Zustand for frontend development. This combination provides type-safe state management, robust component architecture, and reliable server data synchronization for scalable applications.