Cursor, Windsurf, Copilot TanStack Config: Ein Vergleich

TL;DR: Jedes KI-Coding-Tool verfügt über eine andere Konfigurationsdatei und einen anderen Mechanismus zum Laden von Skills. Dieser Beitrag vergleicht sie direkt nebeneinander für TanStack Start: Cursors .cursorrules und .cursor/skills, Windsurfs .windsurfrules, GitHub Copilots .github/copilot-instructions.md und Claude Codes CLAUDE.md plus TanStack Intent Skills. Gleiches Projekt, vier Konfigurationen, Benchmark-Ergebnisse.

Warum sich die Konfiguration von KI-Tools zwischen Editoren unterscheidet

Jedes KI-Coding-Tool wurde von einem anderen Team mit einem anderen mentalen Modell darüber entwickelt, wie Entwickler das KI-Verhalten konfigurieren sollten. Das Ergebnis: Das gleiche TanStack Start-Projekt benötigt vier verschiedene Konfigurationsdateien, um editorübergreifend ein gleichwertiges Verhalten zu erzielen.

Die gute Nachricht: Der Inhalt der Konfigurationen ist größtenteils gleich. Alle vier Dateien geben der KI vor, welche Konventionen sie befolgen, welche Muster sie verwenden und welche Fehler sie vermeiden soll. Die schlechte Nachricht: Die Dateipfade und die Syntax unterscheiden sich.

Für ein TanStack Start-Projekt bleibt das Ziel bei allen vier Tools konsistent: Die KI soll TanStack-spezifischen Code generieren und keinen generischen React-Code. Konventionen von TanStack Router, Muster von Server Functions und die Drizzle-mit-D1-Syntax unterscheiden sich allesamt von dem, was die meisten KI-Modelle in ihren Trainingsdaten sehen.

Ich pflege TanStack Ship für alle vier Editoren, da echte Nutzer alle vier im Einsatz haben. Jedwedes Konfigurations-Snippet in diesem Beitrag stammt aus einem erfolgreichen Testlauf – nicht aus einem Marketing-Screenshot.

Übersicht der Konfigurationsdateien

Cursor-Konfiguration für TanStack Start

Cursor liest aus zwei Quellen: der .cursorrules-Datei auf Projektebene und den themenspezifischen Skills unter .cursor/skills/.

.cursorrules

# TanStack Start Project Rules

You are working on a TanStack Start project deployed to Cloudflare Workers.

## Stack
- TanStack Start + TanStack Router (file-based routing)
- TanStack Query + Server Functions for data
- Drizzle ORM + Cloudflare D1 for persistence
- Better Auth for authentication
- Stripe for payments
- Cloudflare R2 for storage

## Conventions
- File-based routes under `src/routes/`
- Use `createFileRoute()` for route definitions
- Server Functions in `src/server/<module>/`, not in route files
- Drizzle schemas split per route, not monolithic
- Query keys via `src/lib/query-keys.ts` factory

## Anti-patterns
- DO NOT use `react-router-dom` (use TanStack Router)
- DO NOT use `fetch` for data (use TanStack Query + Server Functions)
- DO NOT use Prisma (use Drizzle with D1)
- DO NOT co-locate Server Functions in route files

.cursor/skills/tanstack-router-routes.md

Cursor Skills sind Markdown-Dateien, die aufgabenspezifische Prompts definieren. Für TanStack Router:

# TanStack Router Route Generation

When asked to create a new route, follow this pattern:

```typescript
// src/routes/users.$userId.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/users/$userId')({
  loader: async ({ params, context }) => {
    return await context.queryClient.ensureQueryData({
      queryKey: ['user', params.userId],
      queryFn: () => fetchUser(params.userId),
    })
  },
  component: UserPage,
})

function UserPage() {
  const user = Route.useLoaderData()
  return <div>{user.name}</div>
}

Always use createFileRoute(). Never use react-router's Routes component. Never use BrowserRouter. File-based routing is the only correct pattern here.

Die Skill-Datei zeigt Cursor speziell auf, wie Routen in TanStack Router strukturiert sind – und stellt so sicher, dass kein generisches React-Routing verwendet wird.

## Windsurf-Konfiguration für TanStack Start

Windsurf nutzt `.windsurfrules` für Regeln auf Projektebene und `.windsurf/workflows/` für wiederverwendbare Aufgaben-Templates.

### `.windsurfrules`

```markdown
# TanStack Start Project

Stack: TanStack Start + Cloudflare Workers + D1 + Drizzle + Better Auth + Stripe.

## Conventions
1. Routes are file-based under `src/routes/`. Use `createFileRoute()`.
2. Server Functions use `createServerFn()` from `@tanstack/react-start`.
3. Data fetching: TanStack Query + Server Functions, never raw `fetch`.
4. Database: Drizzle ORM with Cloudflare D1 (SQLite syntax).
5. Auth: Better Auth with edge-runtime session validation.
6. Payments: Stripe with idempotency via `webhook_events` table.

## Anti-patterns to avoid
- BrowserRouter / Routes from react-router — use TanStack Router.
- Prisma — use Drizzle.
- Co-located Server Functions — put them in `src/server/<module>/`.
- String query keys — use the `queryKeys` factory.
- Stripe webhooks without idempotency check.

.windsurf/workflows/new-route.md

Windsurf-Workflows definieren mehrstufige Aufgabenmuster:

# New TanStack Router Route

When asked to create a new TanStack Router route:

1. Determine the route path from the request.
2. Create the file at `src/routes/<path>.tsx`.
3. Use `createFileRoute()` with the appropriate path.
4. Add a `loader` if the route needs data.
5. Add `beforeLoad` if the route needs auth.
6. Use `Route.useLoaderData()` to access loader data.
7. Match the existing route patterns in the codebase.

GitHub Copilot-Konfiguration für TanStack Start

GitHub Copilot liest aus .github/copilot-instructions.md. Für komplexe, Framework-spezifische Aufgaben ist dies das schwächste der vier Tools, es lässt sich jedoch durch gute Anweisungen deutlich verbessern.

.github/copilot-instructions.md

# TanStack Start Project

This project uses TanStack Start deployed to Cloudflare Workers.

## Tech stack
- TanStack Start + TanStack Router
- TanStack Query + Server Functions
- Drizzle ORM + Cloudflare D1
- Better Auth
- Stripe + webhook idempotency via `webhook_events` table
- Cloudflare R2

## Patterns

### Routes
File-based routing under `src/routes/`. Use `createFileRoute()` from `@tanstack/react-router`.

### Server Functions
Use `createServerFn()` from `@tanstack/react-start`. Validate inputs with Zod.

### Data fetching
TanStack Query with Server Functions. Use `queryKeys` factory from `src/lib/query-keys.ts`.

### Database
Drizzle ORM with D1 SQLite syntax. Schemas split per route under `src/db/<route>/`.

## Avoid
- react-router patterns (this is TanStack Router)
- Prisma (use Drizzle)
- Co-located Server Functions (use `src/server/<module>/`)
- String query keys (use the factory)

Die Instruktionsunterstützung von GitHub Copilot wird zwar immer besser, bleibt aber beim Thema TanStack-spezifische Code-Generierung im Vergleich zu Cursor, Windsurf und Claude Code weiterhin das Schlusslicht.

Claude Code + TanStack Intent Skills

Claude Code nutzt CLAUDE.md für den Projektkontext, aber der TanStack-spezifische Vorteil stammt aus den TanStack Intent Skills – Skills, die mit den TanStack-Paketen in node_modules/<package>/.claude/skills/ ausgeliefert werden.

Die meisten TanStack-Pakete (Router, Query, Start, Form) bringen ab v1.0+ Intent Skills mit. Wenn Sie ein TanStack-Paket installieren, liest Claude Code dessen Skills automatisch ein. Das bedeutet, dass Claude Code TanStack-spezifische Konventionen kennt, selbst wenn Ihre CLAUDE.md diese gar nicht erwähnt.

Dies ist der Mechanismus, der Claude Code zur stärksten Option für die TanStack-spezifische Code-Generierung macht:

1. Sie installieren @tanstack/react-router → Claude Code liest die Intent Skills des Routers automatisch ein.
2. Sie fügen eine benutzerdefinierte CLAUDE.md hinzu → Claude Code vereint Ihre Projektkonventionen mit den Framework-Skills.
3. Die Ausgabe kombiniert Framework-spezifische Konventionen und Projekt-spezifische Muster.

Die Struktur der CLAUDE.md für TanStack-Projekte wurde im Claude Code mit TanStack Start-Leitfaden ausführlich behandelt. Die wichtigsten Abschnitte umfassen: Projektübersicht, Stack, Konventionen, zu befolgende Muster und zu vermeidende Anti-Patterns.

Benchmark im direkten Vergleich

Identisches Prompt-Set, vier Tools, bewertet nach der Ausgabequalität (1 = inkorrekt/generisch, 5 = korrekt und TanStack-spezifisch):

Alle Bewertungen sind eigene Einschätzungen des Autors, basierend auf Testläufen bei 8 TanStack Start-Projekten im Jahr 2026.

Wichtigste Erkenntnisse:

• Claude Code + TanStack Intent schnitt durchgehend am besten ab, da Intent Skills einen Framework-spezifischen Kontext hinzufügen, den allgemeine Anweisungen schlichtweg nicht erreichen können.
• Cursor und Windsurf ließen sich nahezu identisch bedienen – beide profitieren von der Konfiguration aus Skills und Regeln, beide haben ohne explizite Anweisungen Schwierigkeiten mit den Konventionen von TanStack Router.
• GitHub Copilot erzielte die niedrigste Punktzahl – die Datei .github/copilot-instructions.md hilft zwar, erreicht aber nicht die Tiefe echter Skills-Systeme.
• Alle vier Tools verbesserten sich signifikant, sobald die entsprechende Konfigurationsdatei vorhanden war. Ohne sie fiel jedes Tool auf generische React/Next.js-Muster zurück.

Der Prompt zum Webhook-Handler deckte die größte Lücke auf: Nur Claude Code (in Verbindung mit Intent Skills) generierte auf Anhieb einen vollständig idempotenten Handler mit der Prüfung der webhook_events-Tabelle. Cursor und Windsurf lieferten zwar einen Event-verarbeitenden Handler, ließen jedoch die Idempotenz außer Acht. Copilot erzeugte lediglich einen simplen Handler ohne die Tabelle.

Das vorkonfigurierte Editor-Bundle von TanStack Ship

Das Starter-Kit von TanStack Ship wird mit allen vier vorkonfigurierten Dateien ausgeliefert:

• .cursorrules + .cursor/skills/
• .windsurfrules + .windsurf/workflows/
• .github/copilot-instructions.md
• CLAUDE.md (inklusive der Intent Skills, die von den TanStack-Paketen mitgeliefert werden)

Wenn Sie TanStack Ship klonen und das Projekt in einem dieser Editoren öffnen, lesen die KI-Tools die jeweils zugehörige Konfiguration ein und generieren Code, der präzise den Plattformkonventionen entspricht. Genau aus diesem Grund steht auf der Homepage von TanStack Ship auch „AI-Optimized“ – die Konfigurationen sind exakt auf die Architektur der Plattform zugeschnitten und stellen keinen generischen Boilerplate-Code dar.

Welches Tool sollte man verwenden?

Die ehrliche Antwort lautet: Es hängt stark von Ihrem Workflow und Ihrer primären Programmiersprache ab:

• Claude Code ist am leistungsstärksten bei TanStack-spezifischen Arbeiten, da die TanStack Intent Skills direkt in den Paketen integriert sind. Wer intensiv mit TanStack entwickelt, wählt mit Claude Code die beste Option.
• Cursor bietet die ausgereifteste Lösung für Greenfield-Projekte. Das Skills-System ist äußerst solide und das UX-Design ist für Solo-Entwickler unübertroffen.
• Windsurf ähnelt Cursor, hat aber leicht abweichende UX- und Workflow-Konventionen. Manche Entwickler bevorzugen insbesondere den Ansatz der Aufgabenautomatisierung.
• GitHub Copilot eignet sich primär für Teams, die ohnehin auf GitHub-native Workflows setzen. Das Tool wird zwar stetig besser, ist für Framework-spezifische Codegenerierung jedoch weiterhin die schwächste Option.

Die meisten Solo-Entwickler in meinem Umfeld verwenden Claude Code oder Cursor als ihr Hauptwerkzeug. Der Unterschied zwischen den beiden Tools wird verschwindend gering, sobald Sie eine ausgefeilte CLAUDE.md (für Claude Code) beziehungsweise erstklassige .cursorrules (für Cursor) angelegt haben.

Fazit

Jedes KI-Tool besitzt einen anderen Konfigurationsmechanismus, aber der zugrunde liegende Inhalt bleibt gleich: Projektkonventionen, Stack, Muster und Anti-Patterns. Die Dateipfade weichen voneinander ab, die Ziele jedoch keineswegs.

Speziell für TanStack Start erweist sich Claude Code in Kombination mit TanStack Intent als die stärkste Lösung. Dennoch funktionieren alle vier Tools ausgezeichnet, sofern die Konfiguration passt. Das Starter-Kit von TanStack Ship bringt alle vier Konfigurationen direkt einsatzbereit mit. Auf diese Weise können Sie unbesorgt das Tool wechseln, ohne dass der KI-Kontext des Projekts verloren geht.

Laden Sie das Konfigurations-Bundle aus dem TanStack Ship-GitHub-Repo herunter und fügen Sie es ganz einfach in ein beliebiges TanStack Start-Projekt ein.

Über diesen Artikel

• Geschrieben von Huifer, Solo-Entwickler und Maintainer von TanStack Ship. Ich pflege TanStack Ship für alle vier Editoren, da echte Nutzer alle vier im Einsatz haben. Jedwedes Konfigurations-Snippet in diesem Beitrag stammt aus einem erfolgreichen Testlauf.
• Verifizierte Quellen: TanStack Start Documentation · Cursor Documentation · Windsurf Documentation · TanStack Ship GitHub
• Zuletzt aktualisiert: 25. Juli 2026 · Changelog

Starten Sie jetzt mit TanStack Ship — sämtliche Konfigurationen der vier KI-Editoren sind serienmäßig enthalten. Klonen Sie das kostenlose Starter-Kit →