design
Skill from get-convex/convex-backend-skill
Install
npx skills add get-convex/convex-backend-skill --skill design
Runs the open skills CLI and installs the skill for your agent (Claude Code, Codex, Cursor …). Alternatively copy the skill folder into .claude/skills/ or upload it in Claude.ai under Settings → Skills.
As a Claude Code plugin
/plugin marketplace add anthropics/claude-plugins-official
/plugin install convex@convex
This skill is part of the plugin “convex”. In Claude Code the plugin installs it together with the plugin’s other skills, commands and hooks.
What does the design skill do?
Description from the SKILL.md in the source repository.
Questions about design
What does the design skill do?
Design and build reactive, type-safe, production-grade backends on Convex. Covers schema, queries/mutations/actions, indexes, auth, file storage, scheduling, real-time multiplayer, mobile backends, and LLM/agent workflows on Convex's one-platform stack.
How do I install design?
In a terminal: npx skills add get-convex/convex-backend-skill --skill design. The skills CLI asks which agents to install it for. In Claude.ai you can upload the skill folder as a ZIP under Settings → Skills.
Which agents can use design?
Skills use the open SKILL.md format, which Claude Code, Claude.ai, the Claude API, OpenAI Codex, Cursor, Gemini CLI and other agents support.
Is design safe to use?
Our automatic check found patterns worth a look (see “Check”). That is not proof of anything bad – read the SKILL.md and scripts before installing.
More skills from get-convex/convex-backend-skill
Set up recurring scheduled jobs (crons) on Convex — digests, cleanups, polling, retries. TRIGGER when the user wants a recurring/scheduled task ('every day/hour', cron, periodic cleanup). Targets internal functions, idempotent handlers.
Wire a domain the user ALREADY OWNS (GoDaddy/Namecheap/Cloudflare/…) to their Convex app: exact DNS records, custom-domain attachment, auth-origin rebind. TRIGGER when the user owns a domain and wants it pointing at their app ('point my domain at this', 'use my own domain', 'set up example.com'). Never asks for registrar credentials.
Set + wire deployment env vars / secrets (API keys) for a Convex app — stored in Convex env, read in actions, never hardcoded. TRIGGER when the user needs an API key/secret/env var ('add my OpenAI key', 'set an env var').
LABS — scaffold a running Next.js + shadcn Convex app with passkey sign-in and a live Chef feedback panel, then build and verify it locally. TRIGGER for the full/labs quickstart, passkeys, or the feedback panel in a new app. For a plain scaffold use quickstart. Legacy convex.app publishing is retired; use a separate hosting workflow if requested. SKIP when a Convex project already exists in the cwd.
Safely migrate the schema + backfill data on a deployed Convex app with @convex-dev/migrations. TRIGGER when changing the schema on a live app, backfilling data, or after a schema-validation error from a change. SKIP a fresh local app.
Scaffold a brand-new Convex app from a one-sentence idea and build it live — a running Next.js + shadcn app with `convex dev` + `next dev` and error watchers already armed, going from idea to running app in under a minute (locally).
Seed the Convex database with starter/fixture data or import an existing dataset (CSV/JSON). TRIGGER when the user wants sample/seed data or to import a dataset into Convex. Idempotent, schema-matching.
Proactively suggest the right Convex component when the user hand-rolls what already exists: setInterval polling → crons, counter increments → sharded-counter, .collect() counts → aggregate, email → resend, DB-counter rate limiting → rate-limiter, uploads → storage, search, presence, multi-step actions → workflow, vector DB → rag, collaborative editing → prosemirror-sync. TRIGGER on noticing the pattern in a Convex app, AFTER completing the user's request. NEVER for non-Convex code.
Related skills in Design & Media
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
Bring existing video code or footage into HyperFrames and verify it frame by frame against the original - Remotion first, also Motion Canvas, Lottie, Three.js, p5.js, canvas or plain HTML/CSS animation, or renders from Manim, After Effects or Blender. Use to port, convert, migrate or reuse work made with another tool.
Bring Figma into a HyperFrames video - rendered assets, brand tokens, components, storyboard frames as reconstructed motion (frames read as states, not slides), shaders and connector-assisted motion. Use when the person pastes a figma.com link or asks to use a Figma design, frame, logo or brand.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.