Superpowers TanStack

A TanStack Start focused toolkit for Claude Code providing file-based routing, server functions, data loaders, forms, SSR, streaming, and full-stack type-safe patterns.

Features

• File-Based Routing - Type-safe routes with automatic generation
• Server Functions - Secure server-only execution with full type inference
• Data Loading - Route loaders, prefetching, streaming patterns
• Forms - Type-safe form handling with TanStack Form integration
• SSR & Streaming - Full SSR with streaming and progressive hydration
• TanStack Ecosystem - Query, Form, Table integrations

Installation

claude plugins add superpowers-tanstack

Or add to your Claude Code plugins configuration.

Manual install (git clone)

git clone https://github.com/MakFly/superpowers-tanstack.git ~/.claude/plugins/superpowers-tanstack

Enable the plugin in both configs (Claude + GLM):

// ~/.claude/settings.json
{
  "enabledPlugins": {
    "superpowers-tanstack@custom": true
  }
}

// ~/.claude-glm/.claude.json
{
  "enabledPlugins": {
    "superpowers-tanstack@custom": true
  }
}

Restart Claude Code.

Fallback: symlink skills (if plugin skills don’t load)

ln -s ~/.claude/plugins/superpowers-tanstack/skills/route-loaders ~/.claude/skills/tanstack-route-loaders

Then call:

Use the skill tanstack:route-loaders

Troubleshooting (Unknown skill)

If you see Unknown skill:

1. Restart Claude Code.
2. Run What skills are available? to confirm the plugin is loaded.
3. Ensure enabledPlugins includes superpowers-tanstack@custom in both configs.
4. Use the fallback symlink if the plugin still does not expose skills.

Quick Start

Once installed, the plugin automatically detects TanStack Start projects and provides context-aware assistance.

Complexity tiers: See docs/complexity-tiers.md for simple/medium/complex examples and how to adapt output.

Interactive Commands

• /superpowers-tanstack:brainstorm - Structured ideation for features
• /superpowers-tanstack:write-plan - Implementation planning
• /superpowers-tanstack:execute-plan - Methodical TDD execution
• /superpowers-tanstack:tanstack-check - Quality validation
• /superpowers-tanstack:tanstack-tdd - TDD workflow with Vitest

Key Skills

Category	Skills
Routing	file-based-routing, route-configuration, route-params, route-loaders
Server	server-functions, server-only-fns, isomorphic-fns
Data	data-loaders, prefetching, suspense-patterns
Forms	form-handling, form-validation
SSR	ssr-configuration, streaming, hydration

Environment Detection

The plugin automatically detects:

• TanStack Start version
• Package manager (npm, yarn, pnpm, bun)
• Vite configuration
• TypeScript configuration
• TanStack integrations (Query, Form, Table)
• Test framework (Vitest, Playwright)
• Styling solution

Version Support

TanStack Start	Status
1.x (RC)	Full support

Philosophy

• Type-safe end-to-end - Full TypeScript inference from routes to components
• Router-first - TanStack Router at the core
• Server functions - Secure, typed server-side execution
• Vite-powered - Fast development with HMR

License

MIT License - See LICENSE for details.