React feature-based architecture rules

No description provided.

Install via CLI

$ npx @airuleshub/cli@latest add react-feature-based-architecture-rules

Rule Content

🎯 RULE: FEATURE-BASED STRUCTURE IS MANDATORY

All code MUST be organized by feature. Each feature MUST be self-contained and isolated.

📁 FOLDER STRUCTURE (REACT)

src/│├── app/                          # App entry (providers, routing setup)│   ├── App.tsx│   ├── providers.tsx│   └── routes.tsx│├── features/│   ├── auth/│   │   ├── components/│   │   │   ├── LoginForm.tsx│   │   │   └── RegisterForm.tsx│   │   ││   │   ├── hooks/│   │   │   ├── useLogin.ts│   │   │   └── useRegister.ts│   │   ││   │   ├── queries/│   │   │   ├── auth.queries.ts│   │   │   └── auth.mutations.ts│   │   ││   │   ├── services/│   │   │   └── auth.api.ts│   │   ││   │   ├── types/│   │   │   └── auth.types.ts│   │   ││   │   ├── utils/│   │   │   └── auth.utils.ts│   │   ││   │   ├── constants/│   │   │   └── auth.constants.ts│   │   ││   │   └── index.ts│   ││   ├── products/│   │   ├── components/│   │   ├── hooks/│   │   ├── queries/│   │   ├── services/│   │   ├── types/│   │   ├── utils/│   │   ├── constants/│   │   └── index.ts│├── shared/│   ├── components/               # reusable UI (Button, Modal)│   ├── hooks/                    # generic hooks│   ├── lib/                      # api client, query client│   │   ├── api.ts│   │   └── query-client.ts│   ├── utils/│   ├── constants/│   └── types/│├── providers/│   └── QueryProvider.tsx         # TanStack setup│├── styles/│   └── globals.css│├── assets/│   ├── images/│   └── icons/│├── config/│   └── env.ts│├── types/                        # global types (rare)│└── main.tsx

⚡ REACT RULES

Features MUST NOT import from other features
Components MUST NOT call APIs directly
All server state MUST use TanStack Query
Hooks MUST encapsulate all business logic
Shared layer MUST remain generic (no domain logic)
Query keys MUST be structured and typed

🚫 COMMON FORBIDDEN

API calls inside components
Cross-feature imports
Global business logic
useEffect for fetching
Monolithic folders

React feature-based architecture rules

Rule Content

🎯 RULE: FEATURE-BASED STRUCTURE IS MANDATORY

📁 FOLDER STRUCTURE (REACT)

⚡ REACT RULES

🚫 COMMON FORBIDDEN

Command Palette