一键在 Manus 中运行任何 Skill

react-doctor

星标3

分支3

更新时间2026年4月4日 06:08

This skill should be used when reviewing React components, hooks, and rendering behavior, then triaging React Doctor diagnostics for performance, correctness, security, and maintainability issues.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

blogic-cz

blogic-cz/blogic-marketplace

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

React Doctor

Use React Doctor to scan a React codebase for security, performance, correctness, and architecture issues. Use the diagnostics to prioritize fixes and improve overall code health.

Usage

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

Use @latest intentionally to run the newest rule set.

Workflow

Run the command at the project root and capture the full output.
Verify diagnostics before patching: confirm each reported issue against actual runtime behavior, project conventions, and framework constraints.
Fix validated issues, starting with highest severity diagnostics.
Re-run React Doctor and confirm the diagnostics list is reduced.
Re-run project checks (lint, tests, typecheck/build as applicable) to ensure no regressions.

Rule Coverage (47+)

React Doctor includes 47+ rules. The categories below are representative examples, not an authoritative or exhaustive rule list.

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 (in projects using 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 Actions (in projects using Next.js): 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

同仓库更多 Skills

同仓库

update-packages

blogic-cz/blogic-marketplace

This skill should be used when upgrading dependencies, bumping packages, resolving outdated dependencies, or performing dependency updates. It guides safe Bun-based package upgrades with breaking-change handling, runtime pin alignment, and grouped version coordination.

2026-04-233

git-workflow

blogic-cz/blogic-marketplace

Automates the full PR lifecycle — create or update a pull request, then aggressively monitor CI checks and review feedback in a continuous loop, fixing failures and addressing comments until the PR is fully green. Also covers push, branch creation, and branch sync workflows.

2026-04-153

skill-creator

blogic-cz/blogic-marketplace

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.

2026-04-133

better-auth

blogic-cz/blogic-marketplace

This skill should be used when implementing or reviewing Better Auth authorization boundaries in template-ts apps, especially when selecting TRPC protected procedures for organization/project/member/admin access.

2026-04-043

drizzle-database

blogic-cz/blogic-marketplace

This skill should be used when defining Drizzle ORM schema tables, typed relations, index/constraint patterns, migration changes, or Drizzle query composition in template-ts projects.

2026-04-043

frontend-design

blogic-cz/blogic-marketplace

This skill should be used when a task requires designing or implementing frontend UI (components, pages, layouts, styling) and no more specialized frontend skill is a better fit. It guides production-grade, brand-consistent visual implementation with distinctive but controlled aesthetics.

2026-04-043

name	react-doctor
description	This skill should be used when reviewing React components, hooks, and rendering behavior, then triaging React Doctor diagnostics for performance, correctness, security, and maintainability issues.
version	1.0.0

React Doctor

Use React Doctor to scan a React codebase for security, performance, correctness, and architecture issues. Use the diagnostics to prioritize fixes and improve overall code health.

Usage

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

Use @latest intentionally to run the newest rule set.

Workflow

Run the command at the project root and capture the full output.
Verify diagnostics before patching: confirm each reported issue against actual runtime behavior, project conventions, and framework constraints.
Fix validated issues, starting with highest severity diagnostics.
Re-run React Doctor and confirm the diagnostics list is reduced.
Re-run project checks (lint, tests, typecheck/build as applicable) to ensure no regressions.

Rule Coverage (47+)

React Doctor includes 47+ rules. The categories below are representative examples, not an authoritative or exhaustive rule list.

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 (in projects using 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 Actions (in projects using Next.js): 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