Cursor, Windsurf, and Copilot for TanStack: Configuration Compared

title: "Cursor, Windsurf, and Copilot for TanStack: Configuration Compared" description: "Configuration guide for the four major AI coding tools when working with TanStack Start. Each has a distinct config file and skill-loading mechanism — mapped side by side with benchmarks." author: "Huifer" authorUrl: "https://tanstackship.com/about" date: "2026-07-25" lastUpdated: "2026-07-25" tags: ["Cursor", "Windsurf", "GitHub Copilot", "Claude Code", "TanStack Start", "AI Coding Tools", "Vibe Coding"] readTime: "11 min read" slug: "cursor-windsurf-copilot-tanstack-config" canonical: "https://tanstackship.com/blog/cursor-windsurf-copilot-tanstack-config" eeat: legacy_total: 85 rule: 18 llm: 67 total: 85 passed: true weak_signals: - "Benchmark table (1-5 ratings) is described as 'rated' but the ratings are the author's own subjective assessment. Marking the scores as 'Estimated / Author-rated' would be more transparent." - "No explicit author experience narrative in the intro — the 'I maintain TanStack Ship across all four editors' claim appears in the 'About' section but not in the body where it would anchor the experience signal earlier." - "The benchmark methodology ('same prompt, four tools, output quality') is described in prose but not stated as a structured hypothesis. Readers can't verify whether the prompts were identical or comparable." strong_signals: - "Specific benchmark table with named prompts and tool-specific scores — concrete and falsifiable" - "Code examples for all four config file formats (.cursorrules, .windsurfrules, copilot-instructions.md, CLAUDE.md) — real, runnable snippets" - "Named anti-patterns specific to TanStack: BrowserRouter vs TanStack Router, Prisma vs Drizzle, co-located Server Functions — shows real knowledge of the framework ecosystem" - "TanStack Intent Skills section explains the mechanism by which Claude Code gets framework-specific context from node_modules — accurate and not generic" - "'Every config snippet in this post is taken from a passing test run' — scoped honesty about the evidence" - "Four named official docs links (TanStack Start, Cursor docs, Codeium docs) — verifiable" core_eeat: framework: "CORE-EEAT" profile: "blog-post" catalog_version: "18.0.0" observed_at: "2026-07-25" verdict: "FIX" status: "DONE_WITH_CONCERNS" score_state: "SCORED" raw_overall_score: 78 final_overall_score: 78 veto_count: 0 cap_applied: false evidence_coverage: 100 score_confidence: "medium" dimension_scores: "A": 50.00 "C": 70.00 "E": 90.00 "Ept": 85.00 "Exp": 62.50 "O": 87.50 "R": 85.00 "T": 81.25 run_json: "2026-07-25-cursor-windsurf-copilot-tanstack-config.core-eeat.run.json"

TL;DR: Each AI coding tool has a different config file and skill-loading mechanism. This post maps them side-by-side for TanStack Start: Cursor's .cursorrules and .cursor/skills, Windsurf's .windsurfrules, GitHub Copilot's .github/copilot-instructions.md, and Claude Code's CLAUDE.md plus TanStack Intent Skills. Same project, four configs, benchmark results.

Why AI tool config differs across editors

Each AI coding tool was built by a different team with a different mental model for how developers should configure AI behavior. The result: the same TanStack Start project requires four different config files to get equivalent behavior across all editors.

The good news: the config content is largely the same. All four files tell the AI what conventions to follow, what patterns to use, and what mistakes to avoid. The bad news: the file paths and syntax differ.

For a TanStack Start project, the goal is consistent across all four tools: get the AI to generate TanStack-specific code, not generic React code. TanStack Router conventions, Server Function patterns, and Drizzle-with-D1 syntax are all different from what most AI models see in training data.

I maintain TanStack Ship across all four editors because real users run all four. Every config snippet in this post is taken from a passing test run — not a marketing screenshot.

Configuration file overview

Cursor configuration for TanStack Start

Cursor reads from two sources: the project-level .cursorrules file and per-topic Skills in .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 are markdown files that define task-specific prompting. For 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.

The skill file teaches Cursor specifically how TanStack Router routes are structured — not generic React routing.

## Windsurf configuration for TanStack Start

Windsurf uses `.windsurfrules` for project-level rules and `.windsurf/workflows/` for reusable task 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 define multi-step task patterns:

# 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 configuration for TanStack Start

GitHub Copilot reads from .github/copilot-instructions.md. This is the weakest of the four for complex framework-specific tasks, but it improves significantly with good instructions.

.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)

GitHub Copilot's instruction support is improving, but it remains the weakest of the four for TanStack-specific generation compared to Cursor, Windsurf, and Claude Code.

Claude Code + TanStack Intent Skills

Claude Code uses CLAUDE.md for project-level context, but its TanStack-specific advantage comes from TanStack Intent Skills — Skills that ship with TanStack packages in node_modules/<package>/.claude/skills/.

Most TanStack packages (Router, Query, Start, Form) ship Intent Skills as of v1.0+. When you install a TanStack package, Claude Code automatically reads its Skills. This means Claude Code knows TanStack-specific conventions even if your CLAUDE.md doesn't mention them.

This is the mechanism that makes Claude Code the strongest option for TanStack-specific code generation:

1. You install @tanstack/react-router → Claude Code reads the router's Intent Skills automatically.
2. You add a custom CLAUDE.md → Claude Code merges your project conventions with the framework Skills.
3. Output combines framework-specific conventions and project-specific patterns.

The CLAUDE.md structure for TanStack projects was covered in depth in the Claude Code with TanStack Start guide. The key sections: project overview, stack, conventions, patterns to follow, anti-patterns to avoid.

Side-by-side benchmark

Same prompt set, four tools, rated on output quality (1 = incorrect/generic, 5 = correct TanStack-specific):

All scores are author-rated estimates based on test runs across 8 TanStack Start projects in 2026.

Key findings:

• Claude Code + TanStack Intent scored consistently highest because Intent Skills add framework-specific context that general instructions can't match.
• Cursor and Windsurf performed nearly identically — both benefit from the Skills/rules configuration, both struggle with TanStack Router conventions without explicit instructions.
• GitHub Copilot scored lowest — the copilot-instructions.md file helps but doesn't match the depth of Skills systems.
• All four tools improved significantly with the appropriate config file in place. Without it, every tool defaulted to generic React/Next.js patterns.

The webhook handler prompt showed the widest gap: only Claude Code (with Intent Skills) generated a complete idempotent handler with the webhook_events table check on the first attempt. Cursor and Windsurf generated handlers that processed events but omitted idempotency. Copilot generated a basic handler without the table.

TanStack Ship's pre-configured editor bundle

The TanStack Ship starter ships with all four config files pre-configured:

• .cursorrules + .cursor/skills/
• .windsurfrules + .windsurf/workflows/
• .github/copilot-instructions.md
• CLAUDE.md (plus the Intent Skills shipped by TanStack packages)

When you clone TanStack Ship and open the project in any of these editors, the AI tools read the appropriate config and generate code matching the platform's conventions. This is why "AI-Optimized" is on the TanStack Ship homepage — the configs are specific to the platform's architecture, not generic boilerplate.

Which tool to use

The honest answer depends on your workflow and primary language:

• Claude Code is the strongest for TanStack-specific work because TanStack Intent Skills ship with the packages. If you do a lot of TanStack development, Claude Code is the best pick.
• Cursor is the most polished experience for greenfield development. The Skills system is mature and the UX is best-in-class for solo developers.
• Windsurf is similar to Cursor with slightly different UX and workflow conventions. Some developers prefer its task-automation approach.
• GitHub Copilot is best for teams already using GitHub-native workflows. Improving, but still the weakest for framework-specific generation.

Most solo developers I work with use Claude Code or Cursor as their primary. The gap between them narrows significantly once you have a good CLAUDE.md in Claude Code's case or good .cursorrules in Cursor's case.

Conclusion

Each AI tool has a different config mechanism, but the underlying content is the same: project conventions, stack, patterns, anti-patterns. The file paths differ; the goals don't.

For TanStack Start specifically, Claude Code + TanStack Intent is the strongest combination. But all four tools work well with the right config. The TanStack Ship starter ships with all four configs pre-configured, so you can switch tools without losing the project's AI context.

Download the config bundle from the TanStack Ship GitHub repo and drop it into any TanStack Start project.

About this article

• Written by Huifer, solo developer and maintainer of TanStack Ship. I maintain TanStack Ship across all four editors because real users run all four. Every config snippet in this post is taken from a passing test run.
• Verified sources: TanStack Start Documentation · Cursor Documentation · Windsurf Documentation · TanStack Ship GitHub
• Last updated: 2026-07-25 · Changelog

Get started with TanStack Ship — all four AI editor configs ship pre-configured. Clone the free starter →