Agent skill
react-router-code-review
Reviews React Router code for proper data loading, mutations, error handling, and navigation patterns. Use when reviewing React Router v6.4+ code, loaders, actions, or navigation logic.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/react-router-code-review-existential-birds-beagle
SKILL.md
React Router Code Review
Quick Reference
| Issue Type | Reference |
|---|---|
| useEffect for data, missing loaders, params | references/data-loading.md |
| Form vs useFetcher, action patterns | references/mutations.md |
| Missing error boundaries, errorElement | references/error-handling.md |
| navigate() vs Link, pending states | references/navigation.md |
Review Checklist
- Data loaded via
loadernotuseEffect - Route params accessed type-safely with validation
- Using
defer()for parallel data fetching when appropriate - Mutations use
<Form>oruseFetchernot manual fetch - Actions handle both success and error cases
- Error boundaries with
errorElementon routes - Using
isRouteErrorResponse()to check error types - Navigation uses
<Link>overnavigate()where possible - Pending states shown via
useNavigation()orfetcher.state - No navigation in render (only in effects or handlers)
When to Load References
- Reviewing data fetching code → data-loading.md
- Reviewing forms or mutations → mutations.md
- Reviewing error handling → error-handling.md
- Reviewing navigation logic → navigation.md
Review Questions
- Is data loaded in loaders instead of effects?
- Are mutations using Form/action patterns?
- Are there error boundaries at appropriate route levels?
- Is navigation declarative with Link components?
- Are pending states properly handled?
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?