From devx-qa
Audits React codebases for anti-patterns including useEffect misuse, stale closures, derived state in effects, and memory leaks. Produces scored gap analysis table with severity ratings and applies prioritized fixes on request.
How this skill is triggered — by the user, by Claude, or both
Slash command
/devx-qa:react-fixerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Target: `$ARGUMENTS` (path to scan, defaults to `src/`)
Target: $ARGUMENTS (path to scan, defaults to src/)
Progress checklist:
React Anti-Pattern Audit:
- [ ] Step 1: Scan for anti-patterns
- [ ] Step 2: Classify findings
- [ ] Step 3: Produce gap analysis table
- [ ] Step 4: Apply fixes (if requested)
- [ ] Step 5: Verify with lint
Run scripts/scan-antipatterns.sh against the target directory to get a quick
inventory of suspect patterns. Then read flagged files to confirm true positives.
Use the Explore agent for deeper analysis when the script flags ambiguous cases.
For each confirmed finding, assign exactly one category using the authoritative rules and before/after examples in the reference files:
Severity levels:
Output a markdown table with these columns:
| Practice | Status | Severity | File:Line | Evidence |
|---|
Status values: Respected, Violated, Partially respected, N/A
Group rows by category:
End with a Score summary per category (X/10) and a Top fixes list ordered by impact.
When the user requests fixes, apply them in priority order. For each fix:
Consult the reference files for detailed before/after examples of each fix pattern.
Run lint (bun run lint or project-specific command) after applying fixes.
Confirm no regressions by checking that modified components still render correctly.
npx claudepluginhub agentic-dev3o/devx-plugins --plugin devx-qaAudit React components for unnecessary useEffect patterns. Detects 9 anti-patterns from "You Might Not Need an Effect" and proposes fixes with severity levels.
Audits React and Next.js code for six critical pitfalls: nested components, index keys, derived state in effects, unsafe fetching, unmemoized contexts, and more.
Reviews React components for architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility, and TypeScript. Use before merging PRs, after new features, or for validation.