Tangle

Problem

Lint rules catch syntax and style. They do not explain why a React tree feels impossible to change — prop chains through five layers, god components, unstable type barrels, hook cycles. Teams debate architecture in PR comments without shared evidence.

React Tangle (repo: spaghetti) builds a graph of components, types, state flow, and dependency patterns, then reports a Tangle Score with concrete remediation paths. It runs from npx react-tangle and ships an agent skill for score-regression workflows.

Analyzer surface

• Graph-backed analysis of component coupling, type complexity, and state ownership
• 0–100 Tangle Score with weighted penalties for cycles, prop chains, and god components
• JSON and compact JSON output for CI gates and PR diff scans (--diff main)
• Legacy react-doctor binary and config migration path during the rename
• Agent skill install for working from score regressions instead of generic lint cleanup

import { calculateTangleScore } from "./tangle/scoring/calculate-tangle-score.js";

export interface CalculateScoreOptions {
  isCi?: boolean;
  tangleAnalysis?: TangleGraphAnalysisResult;
  weights?: Partial<TangleScoreWeights>;
  thresholds?: Partial<TangleScoreThresholds>;
}

const calculateDiagnosticPenalty = (diagnostic: Diagnostic): number => {
  if (diagnostic.severity === "error") return SCORE_ERROR_PENALTY_POINTS;
  return SCORE_WARNING_PENALTY_POINTS;
};