name: project-structure
description: 项目目录结构详解。Use when understanding project structure, creating new modules, or deciding where to place files. Triggers on: file placement questions, creating new features, directory organization.
Project Structure Guide
项目目录结构与文件组织规范。
Core Directories
| Directory |
Purpose |
app/ |
Routes, layouts, pages (App Router) |
components/ui/ |
shadcn/ui primitives |
components/layout/ |
Layout components |
components/common/ |
Business components |
lib/services/ |
API service layer |
lib/utils.ts |
Utility functions |
types/ |
Type declarations |
hooks/ |
Custom hooks |
contexts/ |
React contexts |
Route Groups
app/
├── (auth)/ # Login, register
├── (main)/ # Dashboard, settings
├── (marketing)/ # Landing, pricing
└── (admin)/ # Admin panel
Forbidden Directories
src/ - Conflicts with App Router
shared/ - Use components/common
helpers/ - Use lib/utils
services/ (root) - Must be in lib/services
File Naming
- Directories:
kebab-case (user-profile/)
- Components:
kebab-case.tsx (user-card.tsx)
- Services:
[name].service.ts
- Types:
types.ts
Example: Add User Feature
app/(main)/users/
├── page.tsx
└── [id]/page.tsx
components/common/users/
├── user-table.tsx
└── user-filters.tsx
lib/services/user/
├── user.service.ts
├── types.ts
└── index.ts
Modularization Rules
| Condition |
Action |
| Component > 150 lines |
Split into subcomponents |
| Page > 200 lines |
Extract to components |
| Repeated code 2+ times |
Create reusable component |
| Sample data > 20 lines |
Extract to data.ts |