react-doctor

Diagnose React codebase health issues and generate a 0-100 score with diagnostics.

693|111|Updated Aug 11, 2020
One-click install
npx skills add https://github.com/PostHog/posthog-foss --skill react-doctor-posthog
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-doctor
Source: https://github.com/PostHog/posthog-foss/tree/main/.agents/skills/react-doctor
Command: npx skills add https://github.com/PostHog/posthog-foss --skill react-doctor-posthog

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses common issues in React codebases related to security, performance, correctness, and architecture, providing a clear path to improvement.

Core Features & Use Cases

  • Comprehensive Auditing: Scans for a wide range of problems including security vulnerabilities, state management issues, performance bottlenecks, and architectural anti-patterns.
  • Actionable Feedback: Provides a detailed score and specific diagnostics with file paths and line numbers for easy remediation.
  • Use Case: Improve the overall quality and maintainability of a React project by identifying and fixing critical errors before they impact users.

Quick Start

Run npx -y react-doctor@latest . --verbose to scan the current React project.

Frequently Asked Questions about react-doctor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit my React codebase for security vulnerabilities and performance issues?

You can audit a React codebase by running a diagnostic tool that scans for hardcoded secrets, missing useEffect cleanup, and performance bottlenecks. It generates a 0-100 health score with actionable diagnostics and file paths for remediation.

What does a React code health diagnostic check for?

A React code health diagnostic checks for security vulnerabilities, state management correctness, performance bottlenecks, and architectural anti-patterns like components defined inside other components. It also reviews accessibility concerns to improve overall project maintainability.

Can I use a React auditing tool to find missing cleanup in useEffect?

Yes, you can use a React auditing tool to find missing cleanup in useEffect. It analyzes code to detect specific problems like improper hook cleanup, hardcoded secrets, and nested component definitions, providing line numbers for easy remediation.

What is the best way to score and fix React architecture anti-patterns?

The best way to score React architecture anti-patterns is to run a comprehensive codebase scan that generates a 0-100 health score. It provides specific diagnostics with file paths and line numbers, creating a clear path to fix critical errors before they impact users.

Does the React codebase scanner work without installing extra dependencies?

Yes, the React codebase scanner works without installing extra dependencies by running directly via npx. You execute it in your project directory to analyze code and output a detailed health score with actionable remediation diagnostics.