Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add hamzaPixl/pixl-ai --skill react-doctorgit clone --depth 1 https://github.com/hamzaPixl/pixl-aiWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/hamzapixl/pixl-ai/react-doctor)<a href="https://agentmods.dev/skills/hamzapixl/pixl-ai/react-doctor"><img src="https://agentmods.dev/badge/skills/hamzapixl/pixl-ai/react-doctor/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/hamzapixl/pixl-ai/react-doctor"><img src="https://agentmods.dev/badge/skills/hamzapixl/pixl-ai/react-doctor.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00048 | $0.01029 |
| Opus 5.5 | $0.00019 | $0.00412 |
| Sonnet 5.5 | $0.00010 | $0.00206 |
| Haiku 4.5 | $0.00005 | $0.00103 |
Grade A, and why
react-doctor scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 78 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Overview
React health check that catches common issues after making changes. Scans for anti-patterns, performance problems, accessibility gaps, hook misuse, and state management issues.
Required References
Before starting, read references/frontend/react-performance.md for performance patterns and anti-pattern catalog.
Step 1: Scope
- Identify changed React files (
git diff --name-onlyfiltered to.tsx,.jsx) - If no diff, scan the provided directory or entire
src/for React components - Build a list of components to check
Step 2: Anti-Pattern Check
Scan for common React anti-patterns:
- Unnecessary
useEffect— Effects that could be derived state or event handlers - Missing dependencies —
useEffect/useMemo/useCallbackwith incomplete dep arrays - Prop drilling — Props passed through 3+ levels without consumption
- Inline object/array creation — Objects/arrays created in render causing re-renders
- Index as key — Using array index as React key in dynamic lists
- Direct DOM manipulation — Using
document.querySelectorinstead of refs
Step 3: Performance Check
Scan for performance issues:
- Large component re-renders — Components that re-render on every parent render
- Missing memoization — Expensive computations without
useMemo - Bundle size — Large imports that could be lazy-loaded
- Image optimization — Images not using
next/image(in Next.js) - Unnecessary client components — Components marked
'use client'that don't need it
Step 4: Accessibility Check
Scan for accessibility gaps:
- Missing alt text — Images without
altattributes - Missing labels — Form inputs without associated labels
- Missing button text — Buttons without visible text or
aria-label - Color contrast — Hardcoded colors that may have insufficient contrast
- Keyboard navigation — Interactive elements not reachable via Tab
Step 4.5: Design anti-patterns
Scan for "AI slop" visual anti-patterns. These are banned by references/frontend/design/anti-patterns.md — flag each hit with the file:line reference and the corrective token/pattern.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 78 lines · 48 tokens per session scan A 2dbccbefd172
react-doctor is a skill published in the GitHub repository hamzaPixl/pixl-ai (2 stars, last pushed 6mo ago), licensed MIT. It adds 48 tokens to every session and 1,029 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
devtools-react
React adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot @json-render/devtools-react in a React json-render app, including spec inspection, state editing, action and stream timelines, catalog browsing, or DOM picking.
material-ui-nextjs
Integrates Material UI with Next.js App and Pages routers using @mui/material-nextjs, Emotion cache providers, next/font, CSS layers with Tailwind/CSS Modules, Link component prop patterns, CSS theme variables SSR notes, and App Router useSearchParams + Suspense. Use when setting up or debugging MUI in a Next.js app.
migrate-oxlint
Guide for migrating a project from ESLint to Oxlint. Use when asked to migrate, convert, or switch a JavaScript/TypeScript project's linter from ESLint to Oxlint.
inspector-workbench
Runs Inspector UI work on the standalone Threads state lab so the agent can see the overlay. Use when a CopilotKit employee asks an agent to fix, polish, add, or debug Inspector UI, chrome, panes, overlay actions, launcher, Home, Threads, Playground, Memory, or any visual behavior in @copilotkit/web-inspector. Don't…
react-doctor
Diagnose and fix React codebase health issues. Use when reviewing React code, fixing performance problems, auditing security, or improving code quality.
devtools-bidirectional
Two-way event patterns between devtools panel and application. App-to-devtools observation, devtools-to-app commands, time-travel debugging with snapshots and revert. structuredClone for snapshot safety, distinct event suffixes for observation vs commands, serializable payloads only.