skills.rest
mcj-coder
mcj-coderCOMMUNITY
Explore all skills by this author →
GitHub

scoped-colocation

Group related files by feature or domain within a single directory.

1|1|Updated Jan 3, 2026
Search Tags:#refactoring#developer experience#code organization#code structure#colocation#feature-driven development
One-click install
npx skills add https://github.com/mcj-coder/development-skills --skill scoped-colocation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scoped-colocation
Source: https://github.com/mcj-coder/development-skills/tree/main/skills/scoped-colocation
Command: npx skills add https://github.com/mcj-coder/development-skills --skill scoped-colocation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the cognitive load and maintenance challenges caused by poorly organized codebases, where related files are scattered across technical layers, making features hard to find, understand, and modify.

Core Features & Use Cases

  • Feature-Scoped Directories: Organizes code by feature or domain, keeping all related files (implementation, tests, assets) together.
  • Test Colocation: Ensures tests live alongside the code they verify.
  • Asset Colocation: Keeps styles, types, and fixtures with their respective components or features.
  • Use Case: When building a new "user authentication" feature, this Skill ensures all related files (e.g., LoginForm.tsx, useAuth.ts, auth.types.ts, LoginForm.test.tsx, LoginForm.module.css) are placed within a single src/features/authentication/ directory, rather than being spread across src/components/, src/hooks/, src/types/, and tests/components/.

Quick Start

Use the scoped-colocation skill to organize the code for a new user profile feature.

Frequently Asked Questions about scoped-colocation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is feature-driven code organization and how does it improve developer experience?▼

Feature-driven code organization groups related files by domain rather than technical layer. It improves developer experience by keeping implementation, tests, and assets colocated, which reduces cognitive load and simplifies code navigation.

How do I structure a new feature directory to keep tests and assets colocated?▼

To structure a new feature directory, group all related files like components, hooks, types, tests, and styles within a single feature-scoped path. This colocation ensures tests and assets live directly alongside the implementation they verify.

What's the best way to organize code by feature instead of by technical layer?▼

The best way to organize code by feature is to create feature-scoped directories that encapsulate all related files. Moving away from layer-based directories reduces cognitive load and makes features easier to find, understand, and modify.

When should I refactor my codebase to use feature-scoped directories?▼

You should refactor to feature-scoped directories when code navigation becomes difficult and related files are scattered across technical layers. This colocation approach addresses maintainability challenges and improves discoverability within software projects.

Does colocation work for organizing both tests and style assets?▼

Yes, colocation works for organizing tests and style assets by keeping them with their respective components. This feature-driven development approach ensures styles, types, and fixtures remain within the same directory as the implementation.

Related Skills

Explore More Software Engineering Skills→
sujaynsvsujaynsv

file-organizer

Organize files into hierarchical folders by type, date, and purpose.

Community
Intermediate
FortiumPartnersFortiumPartners
11

React Framework

Generate React component and hook tests using React Testing Library templates.

Official
Advanced
gajjalaashok75-UIgajjalaashok75-UI
2

frontend-dev-guidelines

Define React and TypeScript frontend standards with Suspense and TanStack Query.

Community
Advanced
jpmorgan-paymentsjpmorgan-payments
18

embedded-banking-architecture

Define React/TypeScript monorepo architecture patterns for component structure and file organization.

Official
Advanced