Index of every page on this site: llms.txt
All skills
brianlovin avatar

/react-doctor

@1a9819e official
by Brian Lovinbrianlovin/agent-config377 stars
33
Run it yourself

Diagnose and fix React codebase health issues. Use when reviewing React code, fixing performance problems, auditing security, or improving code quality.

Use this Skill: https://skilld.dev/gh/brianlovin/agent-config/react-doctor

Nothing lands on disk. Nothing to clean up.

Fork this Skill

Edit a local copy. It keeps the author and licence.

SKILL.md

≈42 tokens for metadata: the name and description. ≈318 when used: this file.

Description uses 2.1% of example budget

Before choosing a Skill, your Agent reads its name and description. All available Skills share that space.

  • A shorter description leaves more room for other Skills. This entry exceeds our 1% size suggestion.

In our Claude Code example, all Skill names and descriptions share 8,000 characters. This Skill uses ≈167 characters, or 2.1%.

The 1% threshold is a size suggestion. Longer descriptions can still fit.

Your model, settings, and other Skills decide how much text your Agent can read.

Example settings and source

The example uses a 200k-token context and default Claude Code settings. The count includes the name, description, separators, and when_to_use when present. Codex also counts local file paths.

Skit's source and limits: Codex 0.160.1, Claude Code 2.1.292.

React Doctor

Scans your React codebase for security, performance, correctness, and architecture issues. Outputs a 0-100 score with actionable diagnostics.

Usage

npx -y react-doctor@latest . --verbose

Workflow

  1. Run the command above at the project root
  2. Read every diagnostic with file paths and line numbers
  3. Fix issues starting with errors (highest severity)
  4. Re-run to verify the score improved

Rules (47+)

  • Security: hardcoded secrets in client bundle, eval()
  • State & Effects: derived state in useEffect, missing cleanup, useState from props, cascading setState
  • Architecture: components inside components, giant components, inline render functions
  • Performance: layout property animations, transition-all, large blur values
  • Correctness: array index as key, conditional rendering bugs
  • Next.js: missing metadata, client-side fetching for server data, async client components
  • Bundle Size: barrel imports, full lodash, moment.js, missing code splitting
  • Server: missing auth in server actions, blocking without after()
  • Accessibility: missing prefers-reduced-motion
  • Dead Code: unused files, exports, types

Score

  • 75+: Great
  • 50-74: Needs work
  • 0-49: Critical

Source: SKILL.md on GitHub

Skill behaviors

skilld matched fixed text patterns in SKILL.md and file names. Patterns miss obfuscated code.

skilld run checks every file with the same patterns. It asks for approval before it loads a Skill with a behavior marked Needs approval.

Third-party checks

No alerts1mo4 checks · Risk SAFE
  • Gen Agent Trust Hub1mo

    The skill downloads and runs a React diagnostic tool via npx. While this is standard for its purpose, it creates a surface for indirect prompt injection when processing untrusted codebases.

  • Socket1mo

    No alerts

  • Snyk1mo

    Risk: LOW · No issues

  • Runlayer7mo

    1/1 file flagged

Provenance

Signed by skilld at 1a9819e. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub last week.

Dormantupdated 8 months ago

Capability

version
1.0.0

Topics

README badge

README badge for brianlovin/agent-config/react-doctor

What it does

Scans React codebases for security, performance, correctness, and architecture issues across 47+ rules, returning a 0-100 score with file-level diagnostics. Covers hardcoded secrets, useState misuse, component composition problems, layout thrashing, Next.js patterns, bundle bloat, and accessibility gaps.

Generated from the current SKILL.md.

Frequently asked

What kinds of issues does React Doctor detect?
It scans for 47+ rules across security (hardcoded secrets, eval), state/effects (derived state in useEffect, missing cleanup), architecture (components inside components, giant components), performance (layout animations, transition-all), correctness (array index keys), Next.js patterns (missing metadata, client-side server data fetching), bundle size (barrel imports, moment.js), server actions (missing auth), accessibility (prefers-reduced-motion), and dead code.
Does this work with Next.js?
Yes. It includes specific rules for Next.js patterns like missing metadata, client-side data fetching that should be server-side, and async client components.
What does the score represent?
A 0-100 health score for your codebase. 75+ is great, 50-74 needs work, and 0-49 is critical. The skill outputs diagnostics with file paths and line numbers so you can fix issues in order of severity.
Can I run this on a monorepo or specific directories?
The command runs from your project root with npx react-doctor@latest . --verbose, but the SKILL.md does not specify monorepo or subdirectory targeting.

Generated from the current SKILL.md. These answers refresh after source changes.