organizing-project-files
Provides file organization conventions for React and Next.js projects. Use when creating new files, components, hooks, utilities, or services. Triggers on questions like "where should this go?", "where do I put this?", or when deciding between colocating vs grouping files.
Resources
1Install
npx skillscat add augmnt/webdev-skills/organizing-project-files Install via the SkillsCat registry.
We need to produce a 2-3 sentence plain-text summary, objective, factual, no marketing language, no superlatives, no calls to action. No bullet points, no headings, no markdown. At most 60 words. Provide only the summary text. Let's craft: "This skill offers file‑organization conventions for React and Next.js projects, guiding where to place components, hooks, utilities, services, and types. It solves the uncertainty of where new code should go by recommending colocation by feature and grouping by type for shared code.
Organizing Project Files
Colocate by feature when possible. Group by type only for truly shared code.
Standard Layout
src/
├── app/ # Next.js App Router (or pages/)
├── components/
│ ├── ui/ # Reusable primitives (Button, Modal)
│ └── [feature]/ # Feature-specific (auth/, dashboard/)
├── hooks/ # Custom React hooks
├── lib/ # Core utilities, clients, constants
├── services/ # API calls, external integrations
├── stores/ # State management
└── types/ # TypeScript definitionsPlacement Quick Reference
| "I need..." | Location |
|---|---|
| A button | components/ui/Button.tsx |
| A login form | components/auth/LoginForm.tsx |
| User data fetching | services/user.ts or hooks/queries/useUser.ts |
| Date formatter | lib/utils.ts |
| Auth state | stores/auth.ts |
| Supabase types | types/supabase.ts (generated) |
| Custom type | types/index.ts or colocate |
Naming
- Components:
PascalCase.tsx - Hooks:
useCamelCase.ts - Utilities:
camelCase.ts - Types:
camelCase.ts
Colocation Pattern
For complex features, keep related files together:
components/auth/
├── LoginForm.tsx
├── LoginForm.test.tsx
├── useLoginForm.ts
└── login-schema.tsAdvanced Patterns
For App Router specifics, barrel files, and monorepo structures, see PATTERNS.md.
Categories
Install
npx skillscat add augmnt/webdev-skills/organizing-project-files Install via the SkillsCat registry.