framework-patterns
Modern patterns for Next.js 16 and TanStack Start v1
SKILL.md
Full skill instructions
Framework Patterns
Purpose: Detect framework → Load resources
- Keywords: next.js, nextjs, tanstack start, tanstack router, app router, server component, client component, route handler, route loader, api, endpoint, middleware, integration, router, routing, navigation, link
Detection
| File | Framework | Load |
|---|---|---|
next.config.js|mjs|ts | Next.js 16 | resources/nextjs-patterns.md |
routeTree.gen.ts | TanStack Start v1 | resources/tanstack-start-patterns.md |
convex/ dir exists | + Convex backend | resources/convex-integration.md |
| Migrating frameworks | Migration | resources/migration.md |
reactCompiler: true in config | + React Compiler | resources/react-compiler.md |
Load Strategy
- Detect:
next.config.*→ Next.js,routeTree.gen.ts→ TanStack - Load primary: nextjs-patterns.md OR tanstack-start-patterns.md
- If
convex/→ + convex-integration.md - If React Compiler → + react-compiler.md
- If migrating → migration.md (instead of primary)
Contexts:
- Next.js: 43 + 500 = 550 lines
- Next.js + Convex: 43 + 500 + 600 = 1,150 lines
- TanStack + Convex: 43 + 550 + 600 = 1,200 lines
- No Convex: Skip convex-integration.md (saves 600 lines)
Rule: Never load all. Load framework + backend only.