prefetcher
AI suggests routes and data to prefetch for better UX. Use when optimizing navigation performance.
Install
mkdir -p .claude/skills/prefetcher && curl -L -o skill.zip "https://mcp.directory/api/skills/download/5655" && unzip -o skill.zip -d .claude/skills/prefetcher && rm skill.zipInstalls to .claude/skills/prefetcher
About this skill
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.
More by openclaw
View all skills by openclaw →You might also like
flutter-development
aj-geddes
Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.
ui-ux-pro-max
nextlevelbuilder
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."
drawio-diagrams-enhanced
jgtolentino
Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.
godot
bfollington
This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.
nano-banana-pro
garg-aayush
Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.
pdf-to-markdown
aliceisjustplaying
Convert entire PDF documents to clean, structured Markdown for full context loading. Use this skill when the user wants to extract ALL text from a PDF into context (not grep/search), when discussing or analyzing PDF content in full, when the user mentions "load the whole PDF", "bring the PDF into context", "read the entire PDF", or when partial extraction/grepping would miss important context. This is the preferred method for PDF text extraction over page-by-page or grep approaches.
Related MCP Servers
Browse all servers
Instagram EngagementUnlock Instagram insights to boost advertising and marketing services. Analyze interactions for better IG engagement and
Google MapsGoogle Maps with 3D visualization: search places, compute routes, retrieve elevation and weather for smarter trip planni
Better PlaywrightBetter Playwright is a powerful web scraper with stealth mode and advanced web scraping tools for reliable data extracti
Next.js DocumentationAccess organized Next.js documentation on routing, API routes, deployment & more. Find the latest Next.js doc resources
Data ExtractorData Extractor converts JavaScript and TypeScript code into JSON configuration files using JSON stringify for better mai
Volume Wall DetectorVolume Wall Detector analyzes trading data to spot volume walls and key price levels for better market insights and pote