Skills
.Work. You
Rest

nextjs-tanstack-stack

Official

Build data-heavy dashboards with Next.js + TanStack

Software Engineering#react#tanstack#nextjs#zustand#virtualization#app-router
AuthorMotium-AI
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a ready-to-use scaffold for building scalable Next.js App Router apps integrated with TanStack (Query, Table, Form, Virtual) and Zustand, enabling teams to create data-intensive dashboards with clean architecture and robust patterns.

Core Features & Use Cases

  • Server/Client Component boundaries: Server Components for data fetching and SEO-friendly content, Client Components for interactivity.
  • TanStack patterns: Query factories, virtualization, form handling, advanced table patterns, and typed query keys.
  • State management & resilience: Atomic selectors with Zustand, error boundaries, and optimistic UI flows for a polished UX.
  • Use Case: Build a dashboard that fetches server data, renders a virtualized table, editable forms, and responsive UI across routes.

Quick Start

Create a Next.js App Router project, install TanStack and Zustand dependencies, and copy the sample pages from this Skill to get started. Then run npm install and npm run dev to start the dev server.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: nextjs-tanstack-stack
Download link: https://github.com/Motium-AI/claude-code-toolkit/archive/main.zip#nextjs-tanstack-stack

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.