react-01-plan

Plan React project architecture with TanStack Query, Zustand, and Nx monorepo.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/tak-bro/claude-code --skill react-01-plan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-01-plan
Source: https://github.com/tak-bro/claude-code/tree/main/skills/react-01-plan
Command: npx skills add https://github.com/tak-bro/claude-code --skill react-01-plan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured plan to design and implement a React project, ensuring consistent architecture, state management, and feature library decisions before coding.

Core Features & Use Cases

  • Phase-based planning: Explore, Rethink, and Boundaries with clear deliverables.
  • Architecture decisions: Component → Hook → API data flow, state management (TanStack Query, Zustand), and monorepo structure.
  • Scope alignment: Map features to feature library, data-flow design, and coding standards.
  • Use Case: A team starting a new React app uses this skill to outline required libs, folder structure, and key hooks before writing code.

Quick Start

Provide a concise plan output for a new React project: determine the feature library placement, data flow design, and state management strategy, then outline the deliverables and milestones.

Frequently Asked Questions about react-01-plan

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

FAQPage Schema
How do I plan React project architecture before writing code?▼

Plan React architecture by defining phase-based deliverables for feature library placement, data flow, and state management strategy to establish consistent structure before implementation.

What is the best way to structure state management in an Nx monorepo?▼

Structure state management in an Nx monorepo by mapping features to specific feature libraries and aligning data flow with TanStack Query for server state and Zustand for client state.

How do I organize feature libraries when starting a new React project?▼

Organize feature libraries by mapping project features to specific boundaries within an Nx monorepo, ensuring clear separation of concerns and defining data flow before coding begins.

Does this React architecture planning approach work with TanStack Query and Zustand?▼

Yes, this React architecture planning approach explicitly integrates TanStack Query and Zustand to design data flow and state management strategies during the initial planning phases.

What are the key phases for designing React application architecture?▼

The key phases for designing React application architecture are Explore, Rethink, and Boundaries, which establish clear deliverables for feature placement and data flow decisions.