react-architect-skills

What problem does it solve?

Teams often struggle with growing React apps as they scale, leading to tangled code, duplicated logic, and fragile dependencies. This Skill provides a structured approach to organizing codebases with clear module boundaries, folder conventions, and architecture guidelines to improve maintainability and collaboration.

Core Features & Use Cases

• Folder-based module boundaries: Enforces colocated modules (features, components, hooks, and tests) to minimize cross-feature coupling.
• Layered Architecture: Defines Presentational (UI), Integration (containers/pages), Domain (hooks/utils), and Data (api/store) layers to separate concerns.
• Naming & Boundaries: Establishes consistent naming, public API boundaries (index.ts), and module isolation to support safe refactors.
• Use Case: When refactoring a large React project, apply these guidelines to reorganize code into feature modules with stable public APIs.

Quick Start

Audit an existing React project against the guidelines and draft a modularization plan outlining feature modules, colocated directories, and public APIs.