skills.rest
mamamou
mamamouCOMMUNITY
Explore all skills by this author →
GitHub

react-structure

Define a scalable React architecture blueprint for enterprise projects using TypeScript, Vite, and TanStack Router.

16|2|Updated Apr 11, 2026
Search Tags:#typescript#architecture#react#routing#enterprise#state-management
One-click install
npx skills add https://github.com/mamamou/ai-coding-skills --skill react-structure
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-structure
Source: https://github.com/mamamou/ai-coding-skills/tree/main/react-structure
Command: npx skills add https://github.com/mamamou/ai-coding-skills --skill react-structure

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a scalable, enterprise-grade blueprint for structuring React applications to support large teams and long-lived codebases, enabling consistent organization, predictable builds, and maintainable collaboration.

Core Features & Use Cases

  • Feature-first architecture: Organizes code by domain/feature (e.g., users) with co-located tests, styles, and logic.
  • Routing and data boundaries: Guidance for TanStack Router, React Router v7, and Next.js App Router, with clear separation between UI and data access inside each feature.
  • Tooling, performance, and governance: Recommendations for TypeScript strict mode, Vite 6, TanStack Query v5, Zustand, React Compiler, Playwright, and server components to enable scalable, high-quality apps.
  • Use Case: When starting a new React project across teams, apply this structure to support parallel workstreams and consistent conventions from day one.

Quick Start

Scaffold a new React project using the feature-first structure and configure TanStack Router, TanStack Query, Zustand, and server components as described.

Frequently Asked Questions about react-structure

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

FAQPage Schema
How do I structure a large React application for enterprise scale?▼

Structure large React applications using a feature-first architecture that organizes code by domain with co-located tests, styles, and logic. This enables consistent organization, predictable builds, and maintainable collaboration across large teams.

What is the best way to organize React routing and data fetching boundaries?▼

Organize React routing and data fetching by applying clear separation between UI and data access inside each feature. The blueprint provides specific guidance for TanStack Router, React Router v7, and Next.js App Router setups.

Can I use this React architecture blueprint with TypeScript and Vite?▼

Yes, you can apply this React architecture blueprint with TypeScript and Vite. It includes specific tooling recommendations for TypeScript strict mode and Vite 6 to ensure scalable, high-quality application builds.

How do I configure state management in an enterprise React project?▼

Configure state management in enterprise React projects using Zustand for client state and TanStack Query v5 for server state. This combination integrates directly into the feature-first folder structure.

Does this React structure support Next.js server components and app router?▼

Yes, this React structure fully supports Next.js server components and the app router. The architecture blueprint explicitly includes configurations for both SPA setups and Next.js app router environments.

Related Skills

Explore More Software Engineering Skills→
OpenAEC-FoundationOpenAEC-Foundation
6

react-agents-project-scaffolder

Scaffold a React project with Vite, TypeScript, routing, linting, and testing.

Official
Advanced
alexisg24alexisg24

redis-expert

Implement Redis caching, Pub/Sub, streams, and Lua scripting with Bun.redis.

Community
Advanced
aussiegingersnapaussiegingersnap
9

state-tanstack

Orchestrate React server and client state with Tanstack Query and Zustand.

Community
Intermediate
DesquaredDesquared
3

compose-architecture-review

Analyze Jetpack Compose UI architectures and propose MVVM/MVI patterns.

Official
Advanced