skills.rest
jmgomezdev
jmgomezdevCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tanstack

Generate TanStack Query and Router data flow layers for React features.

Updated Jan 20, 2026
Search Tags:#suspense#react#routing#tanstack#query#clean-architecture
One-click install
npx skills add https://github.com/jmgomezdev/itx-mobile-shop --skill tanstack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack
Source: https://github.com/jmgomezdev/itx-mobile-shop/tree/main/.github/skills/tanstack
Command: npx skills add https://github.com/jmgomezdev/itx-mobile-shop --skill tanstack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a ready-to-use render-as-you-fetch data flow scaffolding based on TanStack Query and TanStack Router, empowering teams to implement data-fetching, caching, and routing with a clean architecture in React apps.

Core Features & Use Cases

  • Application, Interface, and Presentation layers: enforces strict separation and vertical feature slicing.
  • Pre-fetch and suspense-ready data flows: automatically preloads data via loader and exposes data through suspense-enabled components.
  • Use Case: implement List, Detail, and Search features with consistent repository, query definitions, and UI adapters across projects.

Quick Start

Implement a complete TanStack-based render-as-you-fetch flow for a feature by generating the application, interface, and presentation layers.

Frequently Asked Questions about tanstack

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement render-as-you-fetch data flows with TanStack Router and Query?▼

It automates end-to-end TanStack data flows by applying a loader to prefetch data and exposing it through suspense-enabled components, enforcing strict application, interface, and presentation layer boundaries.

What is the best way to structure a React clean architecture for data-driven features?▼

The best way is enforcing strict separation through vertical feature slicing across application, interface, and presentation layers, utilizing dedicated repositories and query definitions for List, Detail, and Search features.

Can I use TanStack Query prefetching with suspense in a layered React application?▼

Yes, TanStack Query prefetching integrates with suspense by preloading data via a router loader before rendering, which is then consumed by suspense-enabled presentation components within a layered architecture.

How do I scaffold a TanStack Query and Router feature with strict layer boundaries?▼

Scaffolding involves automatically generating application, interface, and presentation layers to create consistent repository definitions, UI adapters, and prefetching logic for data-driven features.

Does TanStack Router support clean architecture for List, Detail, and Search features?▼

TanStack Router supports clean architecture by applying render-as-you-fetch patterns to List, Detail, and Search features, enforcing layered boundaries with UI adapters and consistent query keys for data fetching.

Related Skills

Explore More Software Engineering Skills→
jackjin1997jackjin1997
11

java-cola-skill

Generate Java web and service projects using COLA Maven archetypes.

Community
Intermediate
MinhHoangDonoMinhHoangDono

frontend-development

Generate React and TypeScript frontend codebases with TanStack Router, TanStack Query, and MUI v7.

Community
Intermediate
alissonmds00alissonmds00

vercel-composition-patterns

Refactors React components using compound patterns and state decoupling.

Community
Advanced
TheGreatLTheGreatL

react-useeffect

Guide React useEffect usage and identify anti-patterns.

Community
Intermediate