Frontend React Router Best Practices

This is a comprehensive ruleset for React Router applications, covering 55 patterns across data loading, middleware, security, and routing architecture. The core focus is eliminating request waterfalls by moving all data fetching into loaders instead of useEffect, with patterns for parallel fetching, per-request caching, and proper TypeScript typing. It includes practical middleware implementations for sessions, batching, request IDs, and security measures like CORS, honeypots, and safe redirects. Use this when you're building anything beyond basic routing, especially if you're dealing with forms, authentication flows, or need to optimize loading patterns. The examples are clear and show both bad and good approaches, which makes it easy to refactor existing code.

skills.sh installs: 402
GitHub stars: 92
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add sergiodxa/agent-skills --skill frontend-react-router-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

React Router Best Practices

Performance optimization and architecture patterns for React Router applications. Contains 55 rules across 11 categories focused on data loading, actions, forms, streaming, and route organization.

When to Apply

Reference these guidelines when:

Writing new React Router routes (loaders, actions)
Handling forms and mutations
Implementing streaming with Single Fetch
Organizing route files and colocating queries
Setting up authentication patterns
Adding SEO/meta tags

Rules Summary

Data Loading (CRITICAL)

loader-avoid-waterfalls - @rules/loader-avoid-waterfalls.md

All data fetching happens in loaders. Never fetch in components with useEffect.

// BAD: fetching in component
function Profile() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetch("/api/user")
      .then((r) => r.json())
      .then(setUser);
  }, []);
  if (!user) return <Spinner />;
  return <div>{user.name}</div>;
}

// GOOD: fetch in loader
export async function loader({ request }: Route.LoaderArgs) {
  let user = await getUser(request);
  return data({ user });
}

SKILL.md on GitHub