React Colocation Architecture

This skill guides the creation and organization of React and React Native projects using the Colocation pattern (also known as Feature-based Architecture or Component Folder Pattern).

Core Principle

"Code that changes together should live together."

Everything a component needs to function lives in its own folder: subcomponents, hooks, context, types, styles, tests, and utilities.

When to Use This Pattern

• Projects with more than 10 components
• Teams with multiple developers
• Components that have their own state, hooks, or context
• When you want to easily move, delete, or share components
• Long-term maintainability is a priority

Standard Component Structure