route-based — Claude Code skill: split SPA code by route
Tells the agent how to split a single-page app by route so only the code for the current page is fetched. Useful when routes are many and the first load drags.
npx skills add PatternsDev/skills --skill route-based -a claude-codeWhat route-based does
The skill covers route-based splitting: page-level components load lazily, one per route. Inside is an instruction to pair React Suspense or loadable-components with routing libraries such as react-router. The agent gets a concrete order of steps instead of vague advice about bundle size.
Loading time during navigation is something users already expect, so that pause is where the fetching goes. The app pulls only the chunk it needs while the user waits anyway. The details note that Next.js, Remix and React Router handle this out of the box, while a custom setup needs React.lazy() with Suspense or per-route entry points in the bundler.
The skill targets **/*.js and **/*.ts files, so it will not fire in projects written in other languages. Related skills are module-pattern and singleton-pattern. With a single route and everything loading at once, there is nothing to split.
What it helps with
- shrink the initial bundle of a single-page app
- split code per route and load it lazily
- wire
React.lazy()andSuspenseinto page components - move fetching into the pause during route transitions
- configure bundler entry points for each route
Example prompts for the agent
- Split the app by route and lazy-load pages with
React.lazy()andSuspense - Add route-based splitting to
react-routerso each route gets its own chunk - Check that navigating between pages fetches only the current route's code
How to install route-based
1Skills CLI (Vercel)
npx skills add PatternsDev/skills --skill route-based -a claude-code2Manually: put the files in place
~/.claude/skills/route-based/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/route-based/
1Skills CLI (Vercel)
npx skills add PatternsDev/skills --skill route-based -a codex2Manually: put the files in place
.agents/skills/route-based/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add PatternsDev/skills --skill route-based -a cursor2Manually: put the files in place
.cursor/skills/route-based/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install PatternsDev/skills route-based2Manually: put the files in place
.github/skills/route-based/SKILL.md1Skills CLI (Vercel)
npx skills add PatternsDev/skills --skill route-based -a gemini-cli2Platform CLI
gemini skills install https://github.com/PatternsDev/skills --path javascript/route-basedManually: put the files in place
.devin/skills/route-based/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add PatternsDev/skills --skill route-based -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about route-based
How do I install route-based in Claude?
Run npx skills add PatternsDev/skills --skill route-based -a claude-code. The skill lands in ~/.claude/skills/route-based/SKILL.md.
What does route-based do?
It teaches the agent to split a single-page app by route, lazy-loading page components so each page requests only the bundle it needs.
Do I need route-based with Next.js or Remix?
Those frameworks split by route on their own. The skill matters more in a custom setup where React.lazy() with Suspense or bundler entry points are configured by hand.
Source text
SKILL.md · MIT
--- name: route-based description: Teaches route-based code splitting for single-page applications. Use when different routes load distinct feature sets and you want to avoid loading all route code upfront. paths: - "**/*.js" - "**/*.ts" license: MIT metadata: author: patterns.dev version: "1.1" related_skills: - "module-pattern" - "singleton-pattern" --- # Route Based Splitting We can request resources that are only needed for specific routes, by adding _route-based splitting_. By combining **React Suspense** or `loadable-components` with libraries such as `react-router`, we can dynamically load components based on the current route. By lazily loading the components per route, we're only requesting the bundle that contains the code that's necessary for the current route. Since most people are used to the fact that there may be some loading time during a redirect, it's the perfect place to lazily load components! ## When to Use - Use this when your application has multiple routes and not all code is needed on every page - This is helpful for reducing initial load time by only loading code for the current route ## Instructions - Combine React Suspense or `loadable-components` with routing libraries like `react-router` - Lazily load page-level components per route for optimal code splitting - Take advantage of natural loading pauses during route transitions for a seamless experience ## Details By lazily loading the components per route, only the bundle containing code necessary for the current route is requested. Since users expect some loading time during navigation, route transitions are a natural place to introduce code splitting without degrading the experience. Most modern frameworks (Next.js, Remix, React Router) support route-based splitting out of the box. In a custom setup, use `React.lazy()` with `Suspense` to wrap route-level components, or configure your bundler's entry points per route. ## Source - [patterns.dev/vanilla/route-based](https://patterns.dev/vanilla/route-based)
© patterns.dev · MIT · PatternsDev/skills
