React Modernization
wshobson/agents
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features.
Guided, scripted pipeline for running JSX/TSX/React codemods safely across large legacy codebases.
$ npx skills add pproenca/dot-skills --skill codemod-react-pipeline -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pproenca/dot-skills codemod-react-pipeline --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "codemod-react-pipeline" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/codemod-react-pipeline into .claude/skills/codemod-react-pipeline/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codemod-react-pipeline", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/codemod-react-pipelineType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add pproenca/dot-skills --skill codemod-react-pipeline -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pproenca/dot-skills codemod-react-pipeline --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/.experimental/codemod-react-pipeline .agents/skills/codemod-react-pipeline && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "codemod-react-pipeline" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/codemod-react-pipeline into .agents/skills/codemod-react-pipeline/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codemod-react-pipeline", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pproenca/dot-skills --skill codemod-react-pipeline -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pproenca/dot-skills codemod-react-pipeline --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/.experimental/codemod-react-pipeline .cursor/skills/codemod-react-pipeline && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "codemod-react-pipeline" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/codemod-react-pipeline into .cursor/skills/codemod-react-pipeline/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codemod-react-pipeline", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/pproenca/dot-skills.git --path skills/.experimental/codemod-react-pipeline--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add pproenca/dot-skills --skill codemod-react-pipeline -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pproenca/dot-skills codemod-react-pipeline --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/.experimental/codemod-react-pipeline .gemini/skills/codemod-react-pipeline && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "codemod-react-pipeline" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/codemod-react-pipeline into .gemini/skills/codemod-react-pipeline/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codemod-react-pipeline", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install pproenca/dot-skills codemod-react-pipelineInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add pproenca/dot-skills --skill codemod-react-pipeline -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/.experimental/codemod-react-pipeline .github/skills/codemod-react-pipeline && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "codemod-react-pipeline" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/codemod-react-pipeline into .github/skills/codemod-react-pipeline/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codemod-react-pipeline", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pproenca/dot-skills --skill codemod-react-pipeline -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pproenca/dot-skills codemod-react-pipeline --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/.experimental/codemod-react-pipeline .opencode/skills/codemod-react-pipeline && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "codemod-react-pipeline" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/codemod-react-pipeline into .opencode/skills/codemod-react-pipeline/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codemod-react-pipeline", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
codemod-react-pipelineGuided, 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. 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.
6 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit cf93c57. It shows what the files ask for, not the result of running them.
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.
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
npmnpxFrom the folder's file list and the shell code blocks in SKILL.md.
Links to these hosts (documentation or services it may open):
docs.codemod.comFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from pproenca/dot-skills at commit cf93c57, republished under its MIT licence (© pproenca). 602 words, ~1,629 tokens.
.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.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.
Use this skill when:
codemod jssg run ./t.ts ./src is too risky.Don't use it for a one-file edit, or a change better done by hand in a single PR.
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)| Step | Action | Tool / Script | Risk |
|---|---|---|---|
| 0 | Capture goal, classify transform, count blast radius | scripts/00-plan.sh | read-only |
| 1 | Scaffold transform + fixtures + workflow from templates | scripts/01-scaffold.sh | write (new files) |
| 2 | Fixture tests + single-file trial run (auto-reverted) | scripts/02-inner-loop.sh | read-only (reverts) |
| 3 | Preview changes; write findings report + dry-run sentinel | scripts/03-dry-run.sh | read-only (reverts) |
| 4 | Gate: idempotency, typecheck, lint, format, tests | scripts/04-validate-findings.sh | read-only (reverts) |
| 5 | Apply in resumable batches, verify + commit each | scripts/05-run-batched.sh | destructive (commits) |
| 6 | Final assertions over the whole migration | scripts/verify.sh | read-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.
npm i -g codemod (or the scripts fall back to npx codemod). Provides
jssg run/test and workflow run/validate/resume/status.config.json with it.config.json).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 | javascripttypecheck_cmd / lint_cmd / format_cmd / test_cmd: gate commands (empty disables a gate)batch_size: files per checkpoint in the outer loopgates: per-gate on/off togglesAdd your state_dir (default .codemod-pipeline) to the target repo's .gitignore.
| Script | Purpose |
|---|---|
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.sh | Self-test this skill's scripts/assets |
00-plan.sh "<goal>" and read the generated plan.md.01-scaffold.sh <name>, then implement codemods/<name>/transform.ts and its fixtures.02-inner-loop.sh <name> --watch until fixtures pass; try --file <path> on a real file.03-dry-run.sh <name> and read the findings report; then 04-validate-findings.sh <name>.05-run-batched.sh <name> (resume by re-running it after any fix).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.
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
SKILL.md and 26 other files (scripts, references, assets) in skills/.experimental/codemod-react-pipeline of pproenca/dot-skills.
Open the folder on GitHubat commit cf93c57
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Codemod React Pipeline this skillpproenca/dot-skills | 214 | — | ~1.6k | Automated safety check: Pass | MIT | |
| React Modernizationwshobson/agents | 40k | 10 repos | ~1.7k | Automated safety check: Pass | MIT | |
| @pierre/diffs Code Renderingpierrecomputer/pierre | 6.2k | 2 repos | ~803 | Automated safety check: Pass | Apache-2.0 | |
| OpenTUI Terminal Interfacescline/cline | 70k | — | ~1.9k | Automated safety check: Pass | Apache-2.0 | |
| Chakra UI v2 to v3 Migrationchakra-ui/chakra-ui | 41k | — | ~3.4k | Automated safety check: Pass | MIT | |
| No Use Effectmattiacerutti/supernova | 187 | 2 repos | ~1.7k | Automated safety check: Pass | MIT |
wshobson/agents
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features.
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.
cline/cline
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.
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.
mattiacerutti/supernova
Enforce the no-useEffect rule when writing or reviewing React code.
shapeshift/web
Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering.
pproenca/dot-skills
Audio forensics and voice recovery guidelines for CSI-level audio analysis.
pproenca/dot-skills
Create well-structured RFCs and technical proposals for software projects.
pproenca/dot-skills
Developer-experience friction auditing and fixing — slow onboarding, repeated manual setup steps, missing bootstrap/reset/seed scripts, undiscoverable conventions.
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…
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…
pproenca/dot-skills
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…
Works with
Categories
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.
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.
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.
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.
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.
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.
SKILL.md names 1 domain. As links in the text: docs.codemod.com. This is read from the text; nothing was executed.
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.
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.
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.
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.
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.