Convex Component Authoring
A blueprint skill for building, structuring, and publishing reusable Convex components.
Dev & CodingAdvanced★ 405⑂ 32AI score 7/10Last updated: Feb 6, 2026
What it does
- Lays out the canonical folder structure for a Convex component (
src/index.ts,component.ts,schema.ts,functions/). - Provides working code for
defineComponent,defineSchema, and queries/mutations withv.*validators and explicit return types. - Shows how consuming apps wire it up via
defineApp().use(), including multiple named instances. - Ships templates for
package.json(peerDependencies, files, prepublishOnly) andtsconfig.jsonfor npm publishing. - Summarizes five common pitfalls: cross-table references, missing type exports, hardcoded config, no versioning, weak docs.
- Safety rules: never run
npx convex deployor git commands unless told to.
Who it's for
- Developers on Convex who want to reuse backend logic across projects.
- Teams publishing internal or open-source Convex packages to npm.
- TypeScript devs learning Convex's component table-isolation model.
Usage examples
- "Build a rate limiter component" → generates the
requeststable,checkLimitmutation, and a client-side hook as shown in the skill. - "Extract the notifications logic from my convex folder into its own package" → moves schema/functions, writes index.ts exports and package.json.
- "Mount this component twice under different names" → applies
app.use(myComponent, { name: "instance1" }).
· · · Install guide · · ·
Try it now, no install
Paste this into Claude to use the skill without installing anything.
Read the instructions in this file and follow them to help me: https://raw.githubusercontent.com/waynesutton/convexskills/HEAD/skills/convex-component-authoring/SKILL.md What I want: (describe your task here)
If Claude can't open the link, open it yourself and paste the contents instead.
↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.
Install in the Claude app (no terminal)
- Download the ZIP with the button below.
- In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
- Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
Install in Claude Code
Let Claude do it — paste this into Claude Code
Install the skill I found on Claude Skill Mart. Copy the skills/convex-component-authoring folder from the GitHub repo waynesutton/convexskills into my ~/.claude/skills/convex-component-authoring/. When it's done, tell me in one line what this skill can do.
Install with a command instead
git clone https://github.com/waynesutton/convexskills.git /tmp/convexskills && mkdir -p ~/.claude/skills && cp -r /tmp/convexskills/skills/convex-component-authoring ~/.claude/skills/⚠ This is a third-party skill. Check the source repository before installing.
- Open a terminal and clone the repo:
git clone https://github.com/waynesutton/convexskills.git - Create the skills directory:
mkdir -p ~/.claude/skills - Copy just this skill:
cp -r convexskills/skills/convex-component-authoring ~/.claude/skills/ - Verify that
~/.claude/skills/convex-component-authoring/SKILL.mdexists. - Restart Claude Code, open your Convex project, and ask something like "create a reusable Convex component".
- Prerequisites: Node.js and the
convexpackage (1.x) in your project; review any deploy commands yourself before running them.
View source on GitHub ↗License: Apache-2.0