Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
pproenca avatar

Codemod React Pipeline

  • 72 installs
  • 191 repo stars
  • Updated July 24, 2026
  • pproenca/dot-skills

codemod-react-pipeline is a Claude Code skill for frontend development. It helps solo builders move faster with AI-assisted coding.

Key points

  • codemod-react-pipeline
  • Frontend Development
  • AI-coding skill

Codemod React Pipeline by the numbers

  • 72 all-time installs (skills.sh)
  • +6 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #1,149 of 2,245 Frontend Development skills by installs in the Skillselion catalog
  • Data as of Aug 4, 2026 (Skillselion catalog sync)
npx skills add https://github.com/pproenca/dot-skills --skill codemod-react-pipeline

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs72
repo stars191
Last updatedJuly 24, 2026
Repositorypproenca/dot-skills

How do I helps with frontend development tasks during ai-assisted development?

Helps with frontend development tasks during AI-assisted development.

Who is it for?

Best when you're working on frontend development and need structured help with codemod-react-pipeline.

Skip if: Teams with no frontend development needs, or anyone wanting a generic chat assistant without this specific workflow.

When should I use this skill?

When you need to helps with frontend development tasks during ai-assisted development, or when codemod-react-pipeline is a claude code skill for frontend development. it helps solo builders move faster with ai-assisted coding.

What you get

Structured output aligned to codemod-react-pipeline: codemod-react-pipeline; Frontend Development; AI-coding skill.

Files

SKILL.mdMarkdownGitHub ↗

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 CLInpm 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.

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\
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]`
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.

Related Skills

  • `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).

Related skills

FAQ

What does codemod-react-pipeline do?

codemod-react-pipeline is a Claude Code skill for frontend development. It helps developers move faster with AI-assisted coding.

When should I use codemod-react-pipeline?

When you need to helps with frontend development tasks during ai-assisted development, or when codemod-react-pipeline is a claude code skill for frontend development. it helps developers move faster with ai-assisted coding.

What are the main capabilities?

codemod-react-pipeline; Frontend Development; AI-coding skill.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.