home / skills / harborgrid-justin / lexiflow-premium / architectural-patterns-large-react

architectural-patterns-large-react skill

/frontend/.github-skills/architectural-patterns-large-react

This skill helps you establish scalable React architectures with modular domains, stable API contracts, and enforced architectural constraints across large

npx playbooks add skill harborgrid-justin/lexiflow-premium --skill architectural-patterns-large-react

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

958 B

---
name: architectural-patterns-large-react
description: Establish scalable architecture using modular boundaries, domain-driven design, and consistent data access patterns.
---

# Architectural Patterns for Large React 18 Systems

## Summary

Establish scalable architecture using modular boundaries, domain-driven design, and consistent data access patterns.

## Key Capabilities

- Define domain modules with strict dependency rules.
- Implement façade services to stabilize API contracts.
- Enforce architectural constraints via tooling and lint rules.

## PhD-Level Challenges

- Prove architectural consistency under codebase growth.
- Analyze coupling metrics and refactor for minimal entropy.
- Build formal dependency graphs and detect cycles.

## Acceptance Criteria

- Deliver a module dependency map and constraint rules.
- Provide a refactor plan with quantified coupling reductions.
- Demonstrate stable data-access patterns across modules.

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.

FAQ

Can this skill measure improvements after refactors?

Yes. It compares coupling and dependency graphs before and after changes and produces quantifiable metrics.

Does it require runtime instrumentation?

No. Most analyses are static (imports, module graphs). Optional runtime traces can supplement for dynamic edges.