organizing-project-files

SKILL.md

Colocate by feature when possible. Group by type only for truly shared code.

| 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 |

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

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. Source: augmnt/webdev-skills.

View raw