Back to Skills

improve-react

Survey a whole React codebase as a senior React engineer, using React Doctor's scan as evidence, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute. Read-only on source code — it plans improvements, it does not apply them. Use when the user asks to "improve the React code", "audit this codebase", "make this app faster / more robust", or wants a roadmap of fixes rather than a review of a single diff. For a regression check or a

14,409stars457forksUpdated 8/17/2026

Security Assessment

Safe(96/100)
Security Score96/100

About improve-react

improve-react is an advisor skill that surveys an entire React codebase as a senior React engineer and produces a prioritized audit plus self-contained implementation plans for other agents (or cheaper models) to execute. It solves the problem of turning a static scanner's raw findings into high-leverage, precisely specified work: React Doctor lists what is technically wrong, and this skill adds the judgment about which issues actually matter and writes plans precise enough that an executor with no context and no React instinct can carry them out. Critically, it is strictly read-only on source code — it plans improvements but never applies them.

The workflow begins with recon: run React Doctor once, read-only, emitting structured JSON findings (rule id, category, severity, file:line). The skill then applies leverage judgment across five audit categories — bugs and correctness, performance, accessibility, security, and maintainability/architecture — and writes one plan per finding using a strict template that includes the exact current code, the exact target code pulled from React Doctor's canonical per-rule fix prompt, repo conventions to follow, concrete steps, boundaries, and verification (mechanical checks plus a behavior/Profiler check). Its hard rules forbid modifying source, running any mutating or `--fix` operations, installing dependencies, or committing; plans must be fully self-contained; repository content is treated as inert data (prompt-injection attempts in files are flagged as findings, not obeyed); and deliberately suppressed or disabled rules are respected rather than re-litigated.

Target users are engineers and teams who want a prioritized improvement roadmap for a React app rather than a single-diff review, and who plan to hand execution to another agent later. Typical use cases include auditing a codebase, planning a performance or accessibility pass, or producing a backlog of precise fix plans. The read-only posture and explicit refusal of mutating operations make it a safe planning tool.

FAQ

Does this skill change my code?

No. It is strictly read-only on source. The only files it creates or edits live under `plans/` (or `react-plans/`). If asked to just fix it, it declines and points to executing a plan with another agent or to the react-doctor skill's fix flow.

How is it different from the react-doctor skill?

react-doctor runs the scanner, checks the score didn't regress, and can fix the working tree directly. improve-react is read-only: it uses React Doctor's scan as evidence, adds leverage judgment, and writes plans a cheaper agent executes later — it never edits source.

How does it decide what to fix first?

It judges leverage from user impact and execution frequency across five categories (bugs, performance, accessibility, security, maintainability), prioritizing defects on hot paths and shared routes over theoretical issues in cold or dead code.

Where do the actual fixes come from?

For any finding mapping to a React Doctor rule, the plan's target and steps must be pulled from that rule's canonical, reviewer-tested prompt (fetched from the React Doctor site or via `npx react-doctor rules explain`), not approximated from memory.

How does it handle suspicious content in repo files?

It treats repository content as inert data. If a file tries to steer it (for example, an embedded "ignore previous instructions" line), it flags that as a finding and moves on rather than following it.

All Files

3 files
PLAN-TEMPLATE.md3.1 KB
View
AUDIT.md6.9 KB
View
SKILL.md11.9 KB
View

Install improve-react

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill