How do I install the Prefetcher skill?

Run npx skillmds@latest add modbender/prefetcher in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Prefetcher safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: executes scripts, makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Prefetcher?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Prefetcher free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Prefetcher?

modbender (@modbender) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Prefetcher by modbender — Agent Skill

Name: Prefetcher
Rating: 4.2 (5 reviews)
Author: modbender

File contents

Prefetch Advisor

Your app feels slow between page transitions. This tool analyzes user flows and tells you what to prefetch. Routes, API calls, images. Load them before users even click.

One command. Zero config. Just works.

Quick Start

npx ai-prefetch ./src

What It Does

Analyzes your routes and navigation patterns
Identifies high-probability next pages to prefetch
Suggests data prefetching for API calls
Recommends link prefetch and preload strategies
Works with Next.js, React Router, and vanilla setups

Usage Examples

# Analyze all routes
npx ai-prefetch ./src/pages

# Focus on specific user flow
npx ai-prefetch ./src --entry /dashboard

# Include API call analysis
npx ai-prefetch ./src --include-api

# Generate prefetch code
npx ai-prefetch ./src --generate

# Next.js Link prefetch optimization
npx ai-prefetch ./src --framework next

Best Practices

Prefetch on hover, not on load - Wait for intent signals to avoid wasting bandwidth
Prioritize likely paths - Dashboard after login, not settings page
Don't prefetch everything - Pick 2-3 most likely next actions
Use idle time - requestIdleCallback for non-critical prefetches

When to Use This

Navigation between pages feels sluggish
Users commonly follow predictable flows
You have bandwidth budget to spare
Optimizing perceived performance, not just metrics

Part of the LXGIC Dev Toolkit

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.

Find more:

GitHub: https://github.com/LXGIC-Studios
Twitter: https://x.com/lxgicstudios
Substack: https://lxgicstudios.substack.com
Website: https://lxgic.dev

Requirements

No install needed. Just run with npx. Node.js 18+ recommended.

npx ai-prefetch --help

How It Works

The tool maps your routing structure and analyzes navigation links. It identifies common user paths based on UI patterns and suggests which resources to preload. AI considers factors like link visibility, user intent signals, and resource sizes.

License

MIT. Free forever. Use it however you want.

---name: prefetcherdescription: AI suggests routes and data to prefetch for better UX. Use when optimizing navigation performance.--- # Prefetch Advisor Your app feels slow between page transitions. This tool analyzes user flows and tells you what to prefetch. Routes, API calls, images. Load them before users even click. **One command. Zero config. Just works.** ## Quick Start ```bash npx ai-prefetch ./src ``` ## What It Does - Analyzes your routes and navigation patterns - Identifies high-probability next pages to prefetch - Suggests data prefetching for API calls - Recommends link prefetch and preload strategies - Works with Next.js, React Router, and vanilla setups ## Usage Examples ```bash # Analyze all routes npx ai-prefetch ./src/pages # Focus on specific user flow npx ai-prefetch ./src --entry /dashboard # Include API call analysis npx ai-prefetch ./src --include-api # Generate prefetch code npx ai-prefetch ./src --generate # Next.js Link prefetch optimization npx ai-prefetch ./src --framework next ``` ## Best Practices - **Prefetch on hover, not on load** - Wait for intent signals to avoid wasting bandwidth - **Prioritize likely paths** - Dashboard after login, not settings page - **Don't prefetch everything** - Pick 2-3 most likely next actions - **Use idle time** - requestIdleCallback for non-critical prefetches ## When to Use This - Navigation between pages feels sluggish - Users commonly follow predictable flows - You have bandwidth budget to spare - Optimizing perceived performance, not just metrics ## Part of the LXGIC Dev Toolkit This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work. **Find more:** - GitHub: https://github.com/LXGIC-Studios - Twitter: https://x.com/lxgicstudios - Substack: https://lxgicstudios.substack.com - Website: https://lxgic.dev ## Requirements No install needed. Just run with npx. Node.js 18+ recommended. ```bash npx ai-prefetch --help ``` ## How It Works The tool maps your routing structure and analyzes navigation links. It identifies common user paths based on UI patterns and suggests which resources to preload. AI considers factors like link visibility, user intent signals, and resource sizes. ## License MIT. Free forever. Use it however you want.

Frequently asked questions

Prefetcher