Menu
Project scaffolding CLI with 30+ integrations, custom templates, and MCP server for AI agents.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.
Opinionated toolkit for building, versioning, and publishing high-quality JavaScript/TypeScript packages.
Reactive client-first store for your API with collections, live queries, and optimistic mutations.
Centralized, extensible devtools panel for TanStack libraries with a plugin architecture.
Framework-agnostic debouncing, throttling, rate limiting, queuing, and batching utilities.
Powerful asynchronous state management, server-state utilities, and data fetching for TS/JS, React, Vue, Solid, Svelte & Angular.
| name | tanstack-cli |
| description | Project scaffolding CLI with 30+ integrations, custom templates, and MCP server for AI agents. |
TanStack CLI is an interactive scaffolding tool for creating TanStack Start applications. It provides guided project creation with 30+ pre-built integrations covering authentication, databases, deployment, and developer tools. It also includes an MCP (Model Context Protocol) server for AI agent assistance and supports custom templates for team-standardized setups.
Package: @tanstack/cli
Status: Stable
# Create a new project (interactive)
npx @tanstack/cli create my-app
# Create with specific integrations
npx @tanstack/cli create my-app --integrations tanstack-query,clerk,drizzle
# Global install
npm install -g @tanstack/cli
tanstack create my-app
npx @tanstack/cli create my-app
# Prompts for:
# - Project name
# - Integration selection
# - Configuration options
# Multiple integrations
npx @tanstack/cli create my-app --integrations tanstack-query,tanstack-form,drizzle,neon,clerk
# Deployment target
npx @tanstack/cli create my-app --integrations vercel
# Full stack setup
npx @tanstack/cli create my-app --integrations tanstack-query,tanstack-form,tanstack-table,clerk,drizzle,neon,vercel,sentry
| Integration | Description |
|---|---|
tanstack-query | Async state management |
tanstack-form | Type-safe form management |
tanstack-table | Headless table/datagrid |
tanstack-store | Reactive data store |
tanstack-virtual | List virtualization |
tanstack-ai | AI SDK integration |
tanstack-db | Client-side database |
tanstack-pacer | Debouncing/throttling utilities |
| Integration | Description |
|---|---|
clerk | Clerk authentication |
better-auth | Better Auth integration |
workos | WorkOS identity management |
| Integration | Description |
|---|---|
drizzle | Drizzle ORM |
prisma | Prisma ORM |
neon | Neon serverless Postgres |
convex | Convex backend platform |
| Integration | Description |
|---|---|
vercel | Vercel deployment |
netlify | Netlify deployment |
cloudflare | Cloudflare Workers/Pages |
nitro | Nitro server engine |
| Integration | Description |
|---|---|
eslint | ESLint configuration |
biome | Biome linting/formatting |
shadcn-ui | shadcn/ui component library |
storybook | Storybook component development |
| Integration | Description |
|---|---|
trpc | tRPC type-safe API |
orpc | oRPC integration |
| Integration | Description |
|---|---|
sentry | Error monitoring |
paraglide | Internationalization (i18n) |
strapi | Strapi CMS |
# Create a project as a template base
npx @tanstack/cli create my-template --integrations tanstack-query,drizzle,clerk
# Share as a git repository or npm package
# From git repository
npx @tanstack/cli create my-app --template https://github.com/myorg/my-template
# From local path
npx @tanstack/cli create my-app --template ./templates/my-template
my-template/
├── template.config.ts # Template configuration
├── src/
│ ├── app/
│ │ ├── routes/
│ │ └── components/
│ └── lib/
├── package.json
├── tsconfig.json
├── app.config.ts
└── vite.config.ts
The TanStack CLI includes an MCP (Model Context Protocol) server for AI agent integration.
The MCP server enables Claude and other AI assistants to:
// .claude/mcp.json or equivalent
{
"mcpServers": {
"tanstack": {
"command": "npx",
"args": ["@tanstack/cli", "mcp"]
}
}
}
A typical generated project looks like:
my-app/
├── src/
│ ├── app/
│ │ ├── routes/
│ │ │ ├── __root.tsx
│ │ │ └── index.tsx
│ │ ├── router.tsx
│ │ ├── routeTree.gen.ts
│ │ └── client.tsx
│ ├── lib/
│ │ ├── db.ts # (if drizzle/prisma)
│ │ ├── auth.ts # (if clerk/better-auth)
│ │ └── query.ts # (if tanstack-query)
│ └── components/
├── app.config.ts
├── vite.config.ts
├── package.json
├── tsconfig.json
└── .env.example
TanStack CLI also provides an interactive web-based builder:
| Command | Description |
|---|---|
create <name> | Create a new project |
create <name> --integrations <list> | Create with specific integrations |
create <name> --template <path> | Create from template |
mcp | Start the MCP server |
--integrations flag for reproducible project creation in CI/docs.env.example after generation for required environment variablesclerk,drizzle,neon).env.example)npm install / pnpm install after generationnpx @tanstack/cli for latest)