file-organizationlisted

# Project File Organization ## When to use this skill - **New Projects**: Initial folder structure design - **Project Growth**: Refactoring when complexity increases - **Team Standardization**: Establish consistent structure ## Instructions ### Step 1: React/Next.js Project Structure ``` src/ ├── app/ # Next.js 13+ App Router │ ├── (auth)/ # Route groups │ │ ├── login/ │ │ └── signup/ │ ├── (dashboard)/ │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── settings/ │ ├── api/ # API routes │ │ ├── auth/ │ │ └── users/ │ └── layout.tsx │ ├── components/ # UI Components │ ├── ui/ # Reusable UI (Button, Input) │ │ ├── Button/ │ │ │ ├── Button.tsx │ │ │ ├── Button.test.tsx │ │ │ └── index.ts │ │ └── Input/ │ ├── layout/ # Layout components (Header, Footer) │ ├── features/ # Feature-specific components │ │ ├── auth/ │ │ └── dashboard/ │ └── shared/ # Shared across features │ ├── lib/ # Utilities & helpers │ ├── utils.ts │ ├── hooks/ │ │ ├── useAuth.ts │ │ └── useLocalStorage.ts │ └── api/ │ └── client.ts │ ├── store/ # State management │ ├── slices/ │ │ ├── authSlice.ts │ │ └── userSlice.ts │ └── index.ts │ ├── types/ # TypeScript types │ ├── api.ts │ ├── models.ts │ └── index.ts │ ├── confi