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.

Install to Claude Code

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