react-anti-patterns

name: react-anti-patterns description: Introduce React anti-patterns and common mistakes into existing React codebases for training, review, or teaching. Use when asked to intentionally degrade React performance or code quality while keeping apps functional, or to generate anti-pattern examples for junior developer education. user-invocable: true invocation-phrases: - /react-anti-patterns - add react anti-patterns - inject react mistakes - react training exercise

React Anti-Patterns

Overview

Inject React anti-patterns and performance pitfalls into existing React apps while keeping them functional, so teams can practice identifying and fixing issues.

Parameters

Amount (how many modifications)

low: 1-3 subtle changes, app fully functional
medium (default): 5-8 changes, noticeable performance issues
high: 10+ changes, can cause build failures (TypeScript/lint errors allowed)

Level (experience targeting)

junior: Obvious issues - easy to spot during code review
semi-senior: Moderate complexity - requires React knowledge
senior: Subtle issues - requires profiling or deep knowledge
mixed (default): Combination of all levels

Flags

--comments: Add inline comments identifying the anti-pattern
--comments-hint: Add comments with a hint on how to fix
--comments-fix: Add comments with full fix explanation
--specific <category>: Target specific category only (e.g., --specific rerender)

Workflow

1. Framework Detection

Check if project is Next.js:

Look for next.config.js, next.config.mjs, or next.config.ts
Check package.json for next dependency

If Next.js detected, ask user:

"This is a Next.js project. Include Next.js-specific anti-patterns in addition to React patterns?"

2. Gather Parameters

If not specified in invocation, ask user:

Amount (default: medium): "How many anti-patterns should I introduce?"

low: 1-3 subtle changes
medium: 5-8 noticeable changes
high: 10+ changes, may break build

Level (default: mixed): "What experience level should patterns target?"

junior: obvious issues, easy to spot
semi-senior: moderate complexity, requires React knowledge
senior: subtle issues, requires profiling
mixed: combination of all levels

Comments (default: none): "Should I add comments explaining the anti-patterns?"

none: no comments added
--comments: identify only
--comments-hint: with hints
--comments-fix: with full fixes

3. Load Patterns

Based on selections, load relevant reference files:

references/anti-patterns-index.md     # Always load for pattern selection
references/react/junior.md            # If level includes junior
references/react/semi-senior.md       # If level includes semi-senior
references/react/senior.md            # If level includes senior
references/nextjs/junior.md           # If Next.js + level includes junior
references/nextjs/semi-senior.md      # If Next.js + level includes semi-senior
references/nextjs/senior.md           # If Next.js + level includes senior

4. Select Patterns

Using the index, select patterns based on:

Amount determines count
Level determines which files to pull from
--specific filters by category
Prioritize variety across categories unless --specific is set

Selection by amount:

low: 1-3 patterns from selected level(s)
medium: 5-8 patterns, spread across selected level(s)
high: 10+ patterns, include build-error patterns if available

When level=mixed: distribute patterns roughly evenly across junior/semi-senior/senior. When specific level selected: all patterns from that level only.

5. Apply Changes

For each selected pattern:

Find suitable injection point in codebase
Apply the "After" transformation from the pattern definition
Add appropriate comment based on flag:
- --comments: // ANTI-PATTERN: pattern-id
- --comments-hint: Add the hint comment from pattern
- --comments-fix: Add the fix comment from pattern
Verify the change doesn't break the app (unless high amount with build-error pattern)

6. Report

After all changes, provide summary:

## Anti-Patterns Applied

### Files Modified
- path/to/Component.tsx: 3 patterns
- path/to/hooks/useData.ts: 2 patterns

### Patterns Introduced
| Pattern | Level | Category | File |
|---------|-------|----------|------|
| list-keys-index | junior | list | Component.tsx:45 |
| usememo-inline-defeat | semi-senior | rerender | Component.tsx:23 |
...

### Next Steps
Run the app and use React DevTools Profiler to identify the performance issues,
or review the code to spot the anti-patterns.

Example Invocations

# Defaults (medium, mixed levels, no comments)
/react-anti-patterns

# Few junior patterns with hints
/react-anti-patterns --comments-hint low junior

# Many senior patterns with full explanations
/react-anti-patterns --comments-fix high senior

# Only waterfall patterns (Next.js)
/react-anti-patterns --specific waterfall

# Medium amount, semi-senior level, identify comments
/react-anti-patterns --comments medium semi-senior

Resources

Anti-pattern catalog: references/anti-patterns-index.md
React patterns: references/react/
Next.js patterns: references/nextjs/