Skip to content

Convex Component Builder

Guides an agent to build reusable Convex components with isolated tables and app-facing APIs

Stars
9,546
Licence
MIT
Files
6 files

What it does

Once installed, the agent follows a structured workflow for creating reusable Convex backend modules: it decides whether a component is justified, plans the tables and functions the component owns, scaffolds its config, schema and function files, and wires it into the main app with app.use. It also writes app-side wrapper functions so clients never call component internals directly. The skill includes reference guides for local, packaged and hybrid component layouts.

Great for

  • Developers building Convex apps who want to extract reusable backend logic such as notifications or integrations
  • Teams packaging Convex functionality to share across several apps
  • Developers who need a component to own its own tables and workflows

Skip it if

  • Simple one-off business logic or thin utilities, which belong in the main app or a plain TypeScript library (the skill itself advises against components here)
  • People who do not use Convex, since the instructions depend on Convex APIs and the npx convex dev command

Try asking

  • “Create a notifications component in my Convex app that owns its own table and exposes send and listUnread functions”
  • “Extract the billing logic from my convex folder into a reusable component”
  • “Build a packaged Convex component I can publish and reuse across two of my apps”
Step-by-step guide: how to use Convex Component BuilderInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 6 original files, the MIT licence and an attribution note.

    convex-create-component.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip convex-create-component.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip convex-create-component.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Start by stating clearly what the component should own (tables, functions) so the agent can choose local versus packaged layout
  • Expect the agent to run npx convex dev to generate files and fix type errors before it finishes
  • Review the generated app-side wrappers to confirm authentication is checked in the app, since components cannot access ctx.auth

What's inside

  • agents/openai.yaml
  • references/advanced-patterns.md
  • references/hybrid-components.md
  • references/local-components.md
  • references/packaged-components.md
  • SKILL.md

Redistributed unmodified from openclaw/clawhub under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.