Does it support TypeScript-specific patterns?

Yes, it correctly identifies type-safe loader data patterns and treats 'useLoaderData ()' as a valid annotation.

Will it flag legitimate uses of useEffect?

No, the skill recognizes context-sensitive rules; it will not flag useEffect for client-only data such as localStorage or browser APIs.

Does this skill support versions before React Router 6.4?

The skill is specifically optimized for React Router v6.4 and above, focusing on 'Data Router' features like loaders, actions, and error boundaries.

How does it handle navigation logic reviews?

It prioritizes declarative navigation with Link components but understands that imperative navigation via navigate() is necessary in event handlers.

React Router Code Reviewer

Name: React Router Code Reviewer
Author: existential-birds

byexistential-birds

•

협업 도구

Analyzes React Router v6.4+ implementations to ensure best practices for data loading, mutations, and error handling.

소개

This specialized skill streamlines the code review process for modern React Router applications by identifying anti-patterns and recommending industry-standard solutions. It focuses on the transition from legacy data fetching patterns to robust loader and action workflows, ensuring type-safe route parameters, proper error boundary placement, and declarative navigation. By integrating directly into Claude Code, it helps developers maintain high-quality, performant React applications while avoiding common pitfalls in routing state and lifecycle management.

주요 기능

Ensures UI responsiveness with pending state checks via useNavigation
Verifies mutation handling using Form and useFetcher components
Checks for declarative navigation using Link over imperative navigate()
14 GitHub stars
Validates data loading via loaders instead of useEffect anti-patterns
Identifies missing error boundaries and errorElement configurations

사용 사례

Automating pull request reviews for complex React Router v6 migrations
Auditing error handling and loading states across large-scale frontend codebases
Refactoring legacy React apps to use modern data-driven routing patterns

소개

주요 기능

Ensures UI responsiveness with pending state checks via useNavigation
Verifies mutation handling using Form and useFetcher components
Checks for declarative navigation using Link over imperative navigate()
14 GitHub stars
Validates data loading via loaders instead of useEffect anti-patterns
Identifies missing error boundaries and errorElement configurations

사용 사례

Automating pull request reviews for complex React Router v6 migrations
Auditing error handling and loading states across large-scale frontend codebases
Refactoring legacy React apps to use modern data-driven routing patterns