Agent skill

Codemod React Pipeline

by pproenca in pproenca/dot-skills

Guided, scripted pipeline for running JSX/TSX/React codemods safely across large legacy codebases.

MITAuto-check passedDevelopment

Install Codemod React Pipeline

skills CLI
$ npx skills add pproenca/dot-skills --skill codemod-react-pipeline -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install pproenca/dot-skills codemod-react-pipeline --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.experimental/codemod-react-pipeline .claude/skills/codemod-react-pipeline && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
codemod-react-pipeline
GitHub stars
214
Token cost
~1.6k tokens
SKILL.md length
602 words
Files
27 (incl. scripts, references, assets)
Skills in repo
182
Repo updated
First seen
Licence
MIT

At a glance

Guided, scripted pipeline for running JSX/TSX/React codemods safely across large legacy codebases.

  • Works in 6 steps: From the target repo root, run… → 01-scaffold.sh , then implement… → Iterate with 02-inner-loop.sh --watch… → …
  • You need to scaffold a codemod
  • SKILL.md covers When to Apply, Workflow Overview, Requirements and Setup, plus 4 more sections
  • Calls npm and npx

What it does

Codemod React Pipeline is an agent skill from pproenca/dot-skills. Guided, scripted pipeline for running JSX/TSX/React codemods safely across large legacy codebases. Use when you need to scaffold a codemod, dry-run it, validate its findings, and apply it across many files (50 to 100k+) without breaking the build. Walks the full inner/outer loop with the Codemod CLI (JSSG, ast-grep, workflows). Triggers on large-scale refactor, legacy React migration, codemod a prop/API change, migrate components across the codebase, run a codemod safely, batched/resumable codemod apply, dry-run…

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 31 other files, including scripts, reference files and assets (for example `README.md`, `config.json` and `gotchas.md`).

It sits in Development, covering Code migrations and React components. It works with React. The repository describes itself as: A collection of AI agent skills following the Agent Skills open format. The licence is MIT.

When your agent uses it

  • You need to scaffold a codemod
  • Validate its findings
  • Apply it across many files (50 to 100k+) without breaking the build
  • Large-scale refactor

Example prompts

  • “/codemod-react-pipeline”

Requirements

  • Node.js

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. From the target repo root, run 00-plan.sh "" and read the generated plan.md.
  2. 01-scaffold.sh , then implement codemods//transform.ts and its fixtures.
  3. Iterate with 02-inner-loop.sh --watch until fixtures pass; try --file on a real file.
  4. 03-dry-run.sh and read the findings report; then 04-validate-findings.sh .
  5. Only after gates pass: 05-run-batched.sh (resume by re-running it after any fix).
  6. verify.sh to confirm the migration is complete and idempotent.

What it can do on your machine

Read from SKILL.md and the folder at commit cf93c57. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/, which the agent can run.

    Shell commands in SKILL.md call:

    • npm
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • docs.codemod.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Codemod React Pipeline loads about 1.6k tokens when it runs, and up to ~5.6k if it reads all its reference files. Until then it costs about 138 tokens; SKILL.md has 602 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~138
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~5.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from pproenca/dot-skills at commit cf93c57, republished under its MIT licence (© pproenca). 602 words, ~1,629 tokens.

Download SKILL.mdSave it as .claude/skills/codemod-react-pipeline/SKILL.md (or your agent's skills folder). This skill also uses 26 other files; get the full folder from GitHub.
name
codemod-react-pipeline
description
Guided, scripted pipeline for running JSX/TSX/React codemods safely across large legacy codebases. Use when you need to scaffold a codemod, dry-run it, validate its findings, and apply it across many files (50 to 100k+) without breaking the build. Walks the full inner/outer loop with the Codemod CLI (JSSG, ast-grep, workflows). Triggers on large-scale refactor, legacy React migration, codemod a prop/API change, migrate components across the codebase, run a codemod safely, batched/resumable codemod apply, dry-run a codemod.

Codemod React Pipeline

A safe, repeatable workflow for applying JSX / TSX / React codemods to large legacy codebases — from a 50-file rename to a 100k-file API migration. It composes the Codemod CLI (JSSG, ast-grep, workflows) into an inner/outer loop and gates every mass change behind a dry-run plus validation. For the why behind each rule it cites, see the sibling codemod best-practices reference.

When to Apply

Use this skill when:

  • You're migrating a pattern across a large React/TS codebase (component/prop rename, deprecated API, import swap, hook migration) and a hand-run codemod jssg run ./t.ts ./src is too risky.
  • You need the change to land incrementally and reviewably — per-batch commits, resumable on failure, with the build/typecheck/tests green at every checkpoint.
  • You want to see and validate the findings (what would change, and whether it's safe) before touching files at scale.
  • The transform must be idempotent and proven so before mass apply.

Don't use it for a one-file edit, or a change better done by hand in a single PR.

Workflow Overview

00 plan ─▶ 01 scaffold ─▶ 02 inner loop ─▶ 03 dry-run ─▶ 04 validate ─▶ 05 batched apply ─▶ 06 verify
   goal       templates      fixture tests     preview       gates          per-batch            final
   + blast    (transform/    + 1-file trial    + findings     (idempotency,  apply+verify+commit  assertions
   radius     rule/wf/tests)                    report        type/lint/test) (resumable)
                                                  │                                  │
                                                  └── sentinel ──── required by ──────┘
                              (on any failure: working tree reverted; fix and re-run — nothing committed yet)
StepActionTool / ScriptRisk
0Capture goal, classify transform, count blast radiusscripts/00-plan.shread-only
1Scaffold transform + fixtures + workflow from templatesscripts/01-scaffold.shwrite (new files)
2Fixture tests + single-file trial run (auto-reverted)scripts/02-inner-loop.shread-only (reverts)
3Preview changes; write findings report + dry-run sentinelscripts/03-dry-run.shread-only (reverts)
4Gate: idempotency, typecheck, lint, format, testsscripts/04-validate-findings.shread-only (reverts)
5Apply in resumable batches, verify + commit eachscripts/05-run-batched.shdestructive (commits)
6Final assertions over the whole migrationscripts/verify.shread-only

A PreToolUse hook (hooks/hooks.json) blocks a broad codemod jssg run that lacks --dry-run when no dry-run sentinel exists — so step 5 (or an ad-hoc apply) cannot skip steps 3–4.

Requirements

  • Codemod CLI — npm i -g codemod (or the scripts fall back to npx codemod). Provides jssg run/test and workflow run/validate/resume/status.
  • git — the pipeline requires a clean tree and makes per-batch checkpoint commits.
  • jq — the scripts read config.json with it.
  • Your project's gate tooling — TypeScript, ESLint, Prettier, a test runner (whichever gates you enable in config.json).

Setup

Edit config.json for the target repo (see each field's _setup_instructions):

  • src_globs: the files the codemod may touch (scopes blast radius + gates)
  • language: tsx | jsx | typescript | javascript
  • typecheck_cmd / lint_cmd / format_cmd / test_cmd: gate commands (empty disables a gate)
  • batch_size: files per checkpoint in the outer loop
  • gates: per-gate on/off toggles

Add your state_dir (default .codemod-pipeline) to the target repo's .gitignore.

Show full SKILL.md (212 more words)Show less

Quick Reference

ScriptPurpose
scripts/00-plan.sh "<goal>" [name]Plan + blast-radius estimate
scripts/01-scaffold.sh <name> [--rule]Scaffold a JSSG transform (or ast-grep rule)
scripts/02-inner-loop.sh <name> [--watch|--file P|-u]Tight loop: fixture tests / 1-file trial
scripts/03-dry-run.sh <name> [--sample N]Preview; write findings + sentinel
scripts/04-validate-findings.sh <name>Run validation gates
scripts/05-run-batched.sh <name> [--batch-size N|--dry]Resumable batched apply + commits
scripts/verify.sh <name>Final sign-off assertions
scripts/selftest.shSelf-test this skill's scripts/assets

How to Use

  1. From the target repo root, run 00-plan.sh "<goal>" and read the generated plan.md.
  2. 01-scaffold.sh <name>, then implement codemods/<name>/transform.ts and its fixtures.
  3. Iterate with 02-inner-loop.sh <name> --watch until fixtures pass; try --file <path> on a real file.
  4. 03-dry-run.sh <name> and read the findings report; then 04-validate-findings.sh <name>.
  5. Only after gates pass: 05-run-batched.sh <name> (resume by re-running it after any fix).
  6. verify.sh <name> to confirm the migration is complete and idempotent.

See references/workflow.md for per-step inputs, outputs, failure handling, and rollback; references/inner-outer-loop.md for the mental model; and references/safety-and-scale.md for batching and rollback at 100k-file scale.

Gotchas

See gotchas.md. The big ones: workflow commit: checkpoints are cloud-only (the pipeline commits locally instead); always exclude generated/vendored trees; and design for idempotency from the first line.

  • codemod — the best-practices reference (48 rules) this pipeline operationalizes. Steps here cite specific rules (e.g. test-run-on-subset-first, state-use-for-resumability, pattern-ensure-idempotency, security-minimize-capabilities).

© pproenca, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 26 other files (scripts, references, assets) in skills/.experimental/codemod-react-pipeline of pproenca/dot-skills.

  • SKILL.md
  • README.md
  • assets/templates/astgrep-rule.yml.template
  • assets/templates/codemod.yaml.template
  • assets/templates/fixtures/expected.tsx.template
  • assets/templates/fixtures/input.tsx.template
  • assets/templates/transform.ts.template
  • assets/templates/workflow.yaml.template
  • config.json
  • gotchas.md
  • hooks/hooks.json
  • metadata.json
  • references/inner-outer-loop.md
  • references/safety-and-scale.md
  • references/workflow.md
  • scripts
  • … and 11 more

Open the folder on GitHubat commit cf93c57

Compare with similar skills

Codemod React Pipeline next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Codemod React Pipeline compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Codemod React Pipeline this skillpproenca/dot-skills214—~1.6kAutomated safety check: PassMIT
React Modernizationwshobson/agents40k10 repos~1.7kAutomated safety check: PassMIT
@pierre/diffs Code Renderingpierrecomputer/pierre6.2k2 repos~803Automated safety check: PassApache-2.0
OpenTUI Terminal Interfacescline/cline70k—~1.9kAutomated safety check: PassApache-2.0
Chakra UI v2 to v3 Migrationchakra-ui/chakra-ui41k—~3.4kAutomated safety check: PassMIT
No Use Effectmattiacerutti/supernova1872 repos~1.7kAutomated safety check: PassMIT

Similar skills

  • React Modernization

    wshobson/agents

    Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features.

    40k GitHub starsUsed in 10 repos~1.7k tokens
    DevelopmentAuto-check passed
  • @pierre/diffs Code Rendering

    pierrecomputer/pierre

    Guides an agent through using @pierre/diffs to render syntax-highlighted files and diffs, and to build editing and review surfaces in React or plain JavaScript.

    6.2k GitHub starsUsed in 2 repos~803 tokens
    DevelopmentAuto-check passed
  • Helps build terminal user interfaces with OpenTUI using its core imperative API or its React and Solid reconcilers, with references for layout, keyboard, animation and testing.

    70k GitHub stars~1.9k tokensUpdated today
    DevelopmentAuto-check passed
  • Chakra UI v2 to v3 Migration

    chakra-ui/chakra-ui

    Guides an upgrade from Chakra UI v2 to v3: inspect the project, swap packages, run the official codemod, then fix provider, color mode, props, theming and Next.js code.

    41k GitHub stars~3.4k tokensUpdated today
    Frontend & DesignAuto-check passed
  • No Use Effect

    mattiacerutti/supernova

    Enforce the no-useEffect rule when writing or reviewing React code.

    187 GitHub starsUsed in 2 repos~1.7k tokens
    DevelopmentAuto-check passed
  • React Best Practices

    shapeshift/web

    Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering.

    206 GitHub starsUsed in 1 repo~2k tokens
    DevelopmentAuto-check passed

More from pproenca/dot-skills

All 182 skills in this repo
  • Audio Voice Recovery

    pproenca/dot-skills

    Audio forensics and voice recovery guidelines for CSI-level audio analysis.

    214 GitHub stars~3.3k tokensUpdated 1 mo ago
    Auto-check passed
  • Dev Rfc

    pproenca/dot-skills

    Create well-structured RFCs and technical proposals for software projects.

    214 GitHub stars~3.8k tokensUpdated 1 mo ago
    Auto-check passed
  • Dx Harness

    pproenca/dot-skills

    Developer-experience friction auditing and fixing — slow onboarding, repeated manual setup steps, missing bootstrap/reset/seed scripts, undiscoverable conventions.

    214 GitHub stars~1.5k tokensUpdated 1 mo ago
    Auto-check passed
  • Language Spec Author

    pproenca/dot-skills

    Turn a rough idea for a language into a complete, implementable specification — a DSL, query, config/data, template, or protocol language — by interviewing the author dimension by dimension until…

    214 GitHub stars~2.4k tokensUpdated 1 mo ago
    Auto-check passed
  • Python Pep Author

    pproenca/dot-skills

    Drafting Python Enhancement Proposals (PEPs) — proposing a Python language feature, a standard library change, an interoperability standard, or an informational/process document for the Python…

    214 GitHub stars~2.1k tokensUpdated 1 mo ago
    Auto-check passed
  • Designs new features, extensions, or modifications to Uncle Bob's Acceptance Pipeline Specification — new mutation strategies, Gherkin syntax support, report formats, pipeline stages, IR fields, or…

    214 GitHub stars~1.5k tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about Codemod React Pipeline

What does Codemod React Pipeline do?

Guided, scripted pipeline for running JSX/TSX/React codemods safely across large legacy codebases. Codemod React Pipeline is an agent skill from pproenca/dot-skills. Guided, scripted pipeline for running JSX/TSX/React codemods safely across large legacy codebases.

When should I use Codemod React Pipeline?

Codemod React Pipeline fits situations like: you need to scaffold a codemod; validate its findings; apply it across many files (50 to 100k+) without breaking the build; large-scale refactor.

How do I install Codemod React Pipeline in Claude Code?

Run `npx skills add pproenca/dot-skills --skill codemod-react-pipeline -a claude-code`. Or copy the skill folder (skills/.experimental/codemod-react-pipeline in pproenca/dot-skills) into .claude/skills/codemod-react-pipeline in your project. Claude Code loads it when a task matches its description.

How do I install Codemod React Pipeline in Codex?

Run `npx skills add pproenca/dot-skills --skill codemod-react-pipeline -a codex`. Or copy the skill folder (skills/.experimental/codemod-react-pipeline in pproenca/dot-skills) into .agents/skills/codemod-react-pipeline in your project. Codex loads it when a task matches its description.

Can I use Codemod React Pipeline in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pproenca/dot-skills --skill codemod-react-pipeline -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/codemod-react-pipeline, .gemini/skills/codemod-react-pipeline, .github/skills/codemod-react-pipeline and .opencode/skills/codemod-react-pipeline in your project.

What does Codemod React Pipeline need to run?

Going by SKILL.md and its folder, Codemod React Pipeline needs the command-line tools its instructions call (npm and npx). Our summary lists: Node.js.

Does Codemod React Pipeline access the network?

SKILL.md names 1 domain. As links in the text: docs.codemod.com. This is read from the text; nothing was executed.

Is Codemod React Pipeline safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Codemod React Pipeline use?

Codemod React Pipeline is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Codemod React Pipeline use?

About 1.6k tokens (SKILL.md is roughly 6.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.9k tokens, read only when the agent opens those files.

What are the alternatives to Codemod React Pipeline?

Skills that share tags, products or a category with Codemod React Pipeline: React Modernization (wshobson/agents, 40k stars), @pierre/diffs Code Rendering (pierrecomputer/pierre, 6.2k stars), OpenTUI Terminal Interfaces (cline/cline, 70k stars) and Chakra UI v2 to v3 Migration (chakra-ui/chakra-ui, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Codemod React Pipeline?

pproenca (a GitHub user) maintains it in pproenca/dot-skills, which has 214 GitHub stars. The repository holds 182 skills in this directory. The repository was last updated on August 15, 2026.

Source: pproenca/dot-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.