arnaudmanaranche/remediation

Remediation is a command line tool for React projects that hunts down places in your code where the design is inconsistent with your official design system. A design system is usually a shared set of approved colors, spacing, fonts, and other visual values, meant to keep an app looking consistent. Over time developers often type a raw color or pixel value directly into their code instead of reusing the approved value, and this tool is built to catch exactly that. You install it globally with npm or run it directly with npx, no permanent installation required. The main command, scan, walks through your React source files and reports every hardcoded value it finds, such as a raw hex color, a pixel spacing value, or a font size, and organizes the results by rule and by file. It also computes a health score from 0 to 100 that summarizes how consistent your codebase is overall, with labels ranging from Excellent down to Critical. Beyond just detecting problems, the analyze command goes further: it groups similar hardcoded values together, such as several slightly different blues that are probably meant to be the same color, and proposes new design tokens to replace them, each with a confidence level of high, medium, or low. It can then generate a preview of the exact code changes it would make, or apply those changes automatically as a code transformation, called a codemod, which rewrites the raw values into references to your design tokens. The tool is configurable through a file called remediation.config.js, which lets you ignore certain files, adjust how seriously each rule is treated, and map your own hardcoded values to the token names your team already uses. Because scan can exit with an error code when serious violations are found, it can be wired into a continuous integration pipeline to block a pull request until design inconsistencies are fixed. Output can also be produced as JSON for use in automated tooling.