Globales Ranking · von 601 Skills
tanstack-router AI Agent Skill
Quellcode ansehen: oakoss/agent-skills
SafeInstallation
npx skills add oakoss/agent-skills --skill tanstack-router 44
Installationen
TanStack Router
Type-safe, file-based routing for React with route-level data loading, search params validation, code splitting, and TanStack Query integration.
Package: @tanstack/react-router | Plugin: @tanstack/router-plugin
Quick Reference
| Pattern | Usage |
|---|---|
createFileRoute('/path') |
Define file-based route |
createRootRouteWithContext<T>() |
Root route with typed context |
createLazyFileRoute('/path') |
Code-split route component |
zodValidator(schema) |
Search params validation |
Route.useLoaderData() |
Access loader data in component |
Route.useParams() |
Type-safe route params |
Route.useSearch() |
Type-safe search params |
useNavigate() |
Programmatic navigation |
useBlocker() |
Block navigation (dirty forms) |
notFound() |
Throw 404 from loader |
getRouteApi('/path') |
Type-safe hooks in split files |
stripSearchParams(defaults) |
Clean default values from URLs |
retainSearchParams(['key']) |
Preserve params across navs |
useAwaited({ promise }) |
Suspend until deferred promise resolves |
useCanGoBack() |
Check if router can go back safely |
Data Loading
| Method | Returns | Throws | Use Case |
|---|---|---|---|
ensureQueryData |
Data | Yes | Route loaders (recommended) |
prefetchQuery |
void | No | Background prefetching |
fetchQuery |
Data | Yes | Immediate data need |
defer() (optional) |
Promise | No | Stream non-critical data (promises auto-handled) |
Preloading
| Strategy | Behavior | Use Case |
|---|---|---|
'intent' |
Preload on hover/focus | Default for most links |
'render' |
Preload when Link mounts | Critical next pages |
'viewport' |
Preload when Link in view | Below-fold content |
false |
No preloading | Heavy, rarely-visited pages |
File Organization
| File | Purpose |
|---|---|
__root.tsx |
Root route with <Outlet /> |
index.tsx |
Index route for / |
posts.$postId.tsx |
Dynamic param route |
_authenticated.tsx |
Pathless layout (auth guard) |
dashboard.lazy.tsx |
Code-split component |
Common Mistakes
| Mistake | Fix |
|---|---|
| Missing router type registration | Add declare module with Register interface |
useParams() without from |
Always pass from: '/route/path' for exact types |
useNavigate() for regular links |
Use <Link> for <a> tags, a11y, preloading |
prefetchQuery in loaders |
Use ensureQueryData (returns data, throws errors) |
Fetching in useEffect |
Use route loaders (prevents waterfalls) |
| Sequential fetches in loader | Use Promise.all for parallel requests |
| Missing leading slash | Always '/about' not 'about' |
| TanStackRouterVite after react() | Plugin MUST come before react() in Vite config |
strict: false params unparsed |
Use strict mode or manually parse after navigation |
| Pathless route notFoundComponent | Define notFoundComponent on child routes instead |
| Aborted loader undefined error | Guard errorComponent with if (!error) return null |
No loaderDeps declared |
Declare deps so loader only re-runs when they change |
Delegation
- TanStack Query patterns — data fetching, caching, mutations: use
tanstack-queryskill - TanStack Start — server functions, SSR, server-side auth: use
tanstack-startskill - TanStack Table — table rendering with router search params: use
tanstack-tableskill - Router + Query integration — loader data flow, preloading: see Loader Data Flow Patterns
If the
tanstack-devtoolsskill is available, delegate router state debugging and route tree inspection to it.
References
- Setup — installation, Vite config, file structure, app setup, router default options
- Type Safety — register router,
fromparam,strict: false, type utilities, getRouteApi - Data Loading — route loaders, Query integration, parallel loading, streaming, deferred data, abort signal, loaderDeps
- Search Params — validation, strip/retain middleware, fine-grained subscriptions, debounce, custom serializers
- Navigation — Link, active styling, relative navigation, hash, route masks, blocker, scroll restoration
- Auth and Context — beforeLoad, context inheritance, pathless layouts, dependency injection, error handling
- Code Splitting — lazy routes, auto splitting, preloading strategies, programmatic preloading
- Virtual File Routes — rootRoute, route, index, layout, physical builders, mixing file-based and code-based routing
- Known Issues — 20 documented issues with fixes, anti-patterns
- Loader+Query Patterns — ensureQueryData in loaders, parallel loading, critical vs non-critical data, search-param-dependent loaders
Installationen
Sicherheitsprüfung
Quellcode ansehen
oakoss/agent-skills
Mehr aus dieser Quelle
EU-Hosted Inference API Power your AI Agents with
the best open-source models.
Drop-in OpenAI-compatible API. No data leaves Europe.
Explore Inference APIGLM
GLM 5
$1.00 / $3.20
per M tokens
Kimi
Kimi K2.5
$0.60 / $2.80
per M tokens
MiniMax
MiniMax M2.5
$0.30 / $1.20
per M tokens
Qwen
Qwen3.5 122B
$0.40 / $3.00
per M tokens
So verwenden Sie diesen Skill
Install tanstack-router by running npx skills add oakoss/agent-skills --skill tanstack-router in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.
Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.
Der Skill verbessert das Verständnis Ihres Agenten für tanstack-router, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.
Was Sie erhalten
Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.
Kompatibilität
Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.
Made in Europe Chat with 100+ AI Models in one App.
Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.
