skills.rest
TRAPZZY
TRAPZZYCOMMUNITY
Explore all skills by this author →
GitHub

convex-quickstart

Scaffolds new Convex projects or integrates Convex into existing frontend applications.

5|Updated Mar 5, 2024
Search Tags:#react#backend#scaffolding#setup#nextjs#realtime#convex
One-click install
npx skills add https://github.com/TRAPZZY/God-Eyes --skill convex-quickstart-trapzzy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: convex-quickstart
Source: https://github.com/TRAPZZY/God-Eyes/tree/main/.trae/skills/convex-quickstart
Command: npx skills add https://github.com/TRAPZZY/God-Eyes --skill convex-quickstart-trapzzy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires convex.

What problem does it solve? Setting up a Convex backend involves choosing templates, installing packages, wiring up providers, configuring environment variables, and starting the dev loop. This Skill guides you through the entire setup process so you get a working Convex project without missing configuration steps. ## Core Features & Use Cases - New Project Scaffolding: Creates complete projects with npm create convex@latest using templates like react-vite-shadcn, nextjs-shadcn, or auth-enabled variants. - Existing App Integration: Installs the convex package and wires up ConvexProvider correctly for React, Next.js, Vue, Svelte, and other frameworks with the right environment variable names. - Headless Agent Support: Configures anonymous local deployments via CONVEX_AGENT_MODE for cloud environments without browser login. - Use Case: You have an existing Next.js app and want a realtime backend. The Skill installs Convex, creates the ConvexClientProvider, sets NEXT_PUBLIC_CONVEX_URL, and verifies a query/mutation round-trip works. ## Quick Start Set up Convex for this project, scaffolding a new app or integrating into my existing frontend, and verify the connection works.

Frequently Asked Questions about convex-quickstart

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Convex in a new project?▼

Run npm create convex@latest with a template flag like react-vite-shadcn or nextjs-shadcn, then run npm install. Start the dev loop with npx convex dev, which creates a deployment and writes the URL to .env.local.

How to add Convex to an existing Next.js app?▼

Install the convex package, run npx convex dev to initialize, then create a client component wrapping your root layout with ConvexProvider. Use NEXT_PUBLIC_CONVEX_URL as the environment variable for the deployment URL.

Does Convex work with Vue, Svelte, or React Native?▼

Yes, Convex supports Vue, Svelte, React Native, TanStack Start, Remix, and Node.js through dedicated quickstart guides. Each framework uses its own environment variable naming convention for the deployment URL.

Why should the agent not run npx convex dev directly?▼

npx convex dev is a long-running watcher process requiring browser-based OAuth login on first run, making it unsuitable for agents. Users should run it themselves, or headless environments can set CONVEX_AGENT_MODE=anonymous for a local deployment.

When should I not use the Convex quickstart skill?▼

Skip it when the project already has Convex installed with an existing convex/ directory, since you can start building directly. For adding auth to an existing Convex app, use the convex-setup-auth skill instead.

Related Skills

Explore More Software Engineering Skills→
openwebfopenwebf
2.5k

webf-quickstart

Scaffold a Vite-based frontend and load it into WebF Go for testing.

Official
Intermediate
tomrfordtomrford

convex-quickstart

Design, deploy, and seed a Convex backend with schema, authentication, and CRUD operations.

Community
Intermediate
RinKhimeraRinKhimera
2

convex-setup-auth

Configure Convex authentication with provider wiring and identity checks.

Community
Advanced
stars-endstars-end

Backend Engineer

Develop backend APIs, data models, and server-side services across frameworks.

Official
Advanced