kaladivo

davenov:cc:expert-convex-nextjs

Provides expertise for building full-stack applications with Convex backend and Next.js frontend, including schema design, type-safe functions, authentication, server rendering, and real-time subscriptions. Use when building or debugging Convex + Next.js applications, implementing real-time features, or needing guidance on Convex Auth, preloadQuery patterns, or function design.

kaladivo 2 Updated 4mo ago

Resources

1
GitHub

Install

npx skillscat add kaladivo/davenov-cc-collection/davenov-cc-expert-convex-nextjs

Install via the SkillsCat registry.

SKILL.md
Provides expertise in building full-stack applications using Convex backend with Next.js frontend, covering schema design, type-safe functions, authentication, server-side rendering with preloadQuery, and real-time subscriptions. Route based on user's stated need: - Schema/database work: Apply validator patterns and index design from references/schema-design.md - Function authoring: Use new syntax with args/returns validators from references/function-patterns.md - Authentication: Implement proxy.ts routing pattern from references/ssr-auth.md - Server rendering: Use preloadQuery + usePreloadedQuery from references/ssr-auth.md - Debugging: Check error table and verification checklist from references/debugging.md

If user's need is ambiguous, present intake menu to clarify scope.
</quick_start>

- Schema design with proper validators, indexes, and type definitions - Type-safe function authoring (queries, mutations, actions) with explicit validators - Convex Auth setup with proxy.ts routing pattern - Server-side rendering using preloadQuery + usePreloadedQuery - Real-time subscriptions and reactive data patterns - HTTP endpoints and webhook handling - Scheduling (cron jobs and delayed execution) - Debugging common Convex errors with actionable fixes - MUST use new function syntax with args and returns validators - MUST use v.id("tableName") for document IDs, never v.string() - MUST define indexes in schema for every .withIndex() call - NEVER use .filter() in queries - define indexes instead - NEVER access ctx.db in actions - use ctx.runMutation/runQuery - MUST use proxy.ts (not middleware.ts) for Convex Auth routing - MUST use v.null() for null values, not undefined What would you like to do with Convex + Next.js?
  1. Set up a new Convex + Next.js project
  2. Add/modify Convex functions (queries, mutations, actions)
  3. Design or update the database schema
  4. Implement authentication with Convex Auth
  5. Add server rendering with preloadQuery
  6. Debug an issue
  7. Something else

Wait for response before proceeding.

1, "new", "setup", "create", "start" Guide through project setup with Convex + Next.js 2, "function", "query", "mutation", "action" Help write Convex functions - load references/function-patterns.md 3, "schema", "database", "table", "index" Design schema with proper validators and indexes - load references/schema-design.md 4, "auth", "login", "signup", "authentication" Set up Convex Auth with proxy.ts routing - load references/ssr-auth.md 5, "ssr", "preload", "server render" Implement preloadQuery pattern - load references/ssr-auth.md 6, "debug", "error", "fix", "bug" Debug using error table and verification checklist - load references/debugging.md 7, other Ask clarifying questions, then match to closest category or provide general guidance </core_workflow> ALWAYS use new function syntax with explicit `args` and `returns` validators. If function returns nothing, use `returns: v.null()` and `return null;`. Full examples in references/function-patterns.md. NEVER use `.filter()` in queries. Define indexes in schema.ts and use `.withIndex()`. Index naming: include all fields (`by_user_and_status`). Full patterns in references/schema-design.md. Use `query/mutation/action` for public API (exposed to internet). Use `internalQuery/internalMutation/internalAction` for private functions only callable from other Convex functions. Use `preloadQuery` in server components + `usePreloadedQuery` in client components for SSR with real-time reactivity. Eliminates loading spinners on initial load. Full pattern in references/ssr-auth.md. Use `proxy.ts` (NOT middleware.ts) for Convex Auth routing. Do NOT use AuthGuard components. Full setup in references/ssr-auth.md. Use `action` for external API calls. Actions cannot access `ctx.db` - use `ctx.runMutation/runQuery`. Add `"use node";` at top of file for Node.js APIs. Use `Id<"tableName">` for document IDs (not string). Use `Doc<"tableName">` for full document types. Full type helpers in references/function-patterns.md. Detailed patterns and examples are in the /references/ directory: - function-patterns.md: Function syntax, validators reference, public vs internal, actions - schema-design.md: Schema patterns, indexes, pagination, HTTP endpoints, scheduling - ssr-auth.md: preloadQuery pattern, proxy.ts setup, auth provider configuration - debugging.md: Common errors table, debug approach, verification checklist Task is complete when: - Schema compiles without errors (`npx convex dev` shows no TypeScript errors) - All functions have explicit `args` and `returns` validators - All queries use `.withIndex()` with corresponding schema indexes (no `.filter()`) - Document IDs use `Id<"tableName">` type, not string - Authentication flow works correctly (proxy.ts routing, ConvexAuthNextjsProvider setup) - preloadQuery successfully eliminates loading spinners on server-rendered pages - User can run verification checklist without failures </success_criteria>