architectural-patterns-large-react_skill

Overview

This skill helps teams design and enforce scalable architecture for large React 18 applications using modular boundaries, domain-driven design, and consistent data-access patterns. It focuses on creating clear module contracts, reducing coupling, and stabilizing APIs so large codebases remain maintainable as they grow. The outputs include dependency maps, constraint rules, and refactor plans with measurable improvements.

How this skill works

The skill inspects the codebase to identify domain modules, public facades, and direct import relationships. It generates a module dependency graph, computes coupling metrics, and produces lintable architectural constraints. Finally, it recommends concrete refactor steps and stable data-access patterns to minimize cross-module entanglement and API churn.

When to use it

• When a React app grows beyond a few teams and needs enforced boundaries.
• Before or during a major rearchitecture to evaluate module decomposition.
• To introduce domain-driven design principles and stabilize public APIs.
• When coupling metrics or cyclic dependencies are causing regressions.
• To define consistent data-access patterns across feature modules.

Best practices

• Define small domain modules with explicit public facades and private internals.
• Enforce dependency rules via automated linting and CI checks.
• Use stable façade services for all cross-module communication to prevent direct imports.
• Quantify coupling (imports, shared state, runtime edges) and set measurable reduction targets.
• Adopt a single, consistent data-access layer pattern (hooks/services) per domain.

Example use cases

• Generate a module dependency map to present to architecture review boards.
• Produce a prioritized refactor plan that reduces import coupling by X% over Y sprints.
• Detect and break cyclic dependencies by introducing well-scoped facades.
• Standardize data fetching and caching policies across modules using a single access pattern.
• Create lint rules that block forbidden cross-domain imports in CI.