git404hub

what is remediation fr?

arnaudmanaranche/remediation — explained in plain English

Analysis updated 2026-05-18

0TypeScriptAudience · developerComplexity · 2/5Setup · easy

tl;dr

A CLI that scans React code for hardcoded design values, scores how consistent your design system is, and can auto-fix violations with a codemod.

vibe map

mindmap
  root((remediation))
    What it does
      Scans for hardcoded values
      Scores design consistency
      Auto-fixes with codemod
    Tech stack
      TypeScript
      Node.js CLI
      npm package
    Use cases
      Audit React design system drift
      Enforce consistency in CI
      Propose and apply design tokens
    Audience
      Frontend developers
      Design system teams
    Status
      Published on npm
      Actively developed

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Scan a React codebase for hardcoded colors, spacing, and typography that bypass the design system.

VIBE 2

Generate a health score and CI-friendly report showing how consistent a codebase's styling is.

VIBE 3

Automatically rewrite hardcoded values into design token references with a codemod.

what's the stack?

TypeScriptNode.jsCLI

how it stacks up fr

arnaudmanaranche/remediation0xradioac7iv/tempfs7vignesh/pgpulse
Stars000
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderatemoderate
Complexity2/53/54/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min

in plain english

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.

prompts (copy fr)

prompt 1
Show me how to run remediation scan on my React project and interpret the health score.
prompt 2
Help me write a remediation.config.js that ignores test files and sets colors/hardcoded to error.
prompt 3
Explain what the analyze command's extraction, clustering, and codemod steps actually do.
prompt 4
Walk me through previewing and applying a codemod to replace hardcoded colors with design tokens.

Frequently asked questions

what is remediation fr?

A CLI that scans React code for hardcoded design values, scores how consistent your design system is, and can auto-fix violations with a codemod.

What language is remediation written in?

Mainly TypeScript. The stack also includes TypeScript, Node.js, CLI.

How hard is remediation to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is remediation for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.