mcpField
O
organizing-project-files

organizing-project-files

github.com/augmntDevelopment249 installsUpdated 40w ago
Repository

About organizing-project-files

A project-organization skill for React and Next.js codebases. It helps developers place files consistently, favoring feature-based colocation while reserving type-based folders for shared code.

Key features

  1. 01Feature-based file colocation
  2. 02Standard source directory layout
  3. 03File placement guidance
  4. 04Naming conventions
  5. 05Patterns for complex features

Use cases

  1. 01Organizing components, hooks, and utilities
  2. 02Keeping feature code and tests together
  3. 03Choosing locations for API and state files

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/augmnt/webdev-skills --skill organizing-project-files

After installing, type/organizing-project-filesin Claude Code to confirm it loaded.

Bundled filesPATTERNS.md

Details

From the project README

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 definitions

Placement Quick Reference

"I need..."Location
A buttoncomponents/ui/Button.tsx
A login formcomponents/auth/LoginForm.tsx
User data fetchingservices/user.ts or hooks/queries/useUser.ts
Date formatterlib/utils.ts
Auth statestores/auth.ts
Supabase typestypes/supabase.ts (generated)
Custom typetypes/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.ts

Advanced Patterns

For App Router specifics, barrel files, and monorepo structures, see PATTERNS.md.

Comments

Markdown supported