Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Convex Component Authoring

Builds reusable Convex components with defineComponent, their own schema, a typed client wrapper, and an npm publishing setup.

Dev & CodingAdvanced★ 405⑂ 32AI score 8/10Last updated: Sep 28, 2026

What it does

  • Lays out a self-contained component structure (component/, client/, example/) and when a component beats a plain helper.
  • Gives working code for convex.config.ts, schema.ts, and public.ts, enforcing args and returns validators on every public function.
  • Shows how the parent app registers the component with app.use() and calls it via ctx.runQuery / ctx.runMutation.
  • Documents the hard boundary rules: no parent tables, no ctx.auth, no app process.env, no .paginate(), ids as strings, callbacks via function handles.
  • Includes a mistake-to-fix table and defers npm packaging details to references/publishing.md.

Who it's for

  • Convex developers extracting features (counters, rate limits, audit logs) into packages.
  • Authors publishing to the Convex component directory.
  • Teams sharing one backend module across several apps.

Examples

  1. "Turn my counter logic into a Convex component" → generates schema, public functions, and a typed Counter wrapper class.
  2. "My functions don't appear under components.counter" → checks missing app.use(), stale npx convex dev, and reference-path mismatches.
  3. "The component needs the current user" → authenticate in the app and pass userId as a string across the boundary.

· · · 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/builder-skills/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)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download 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/builder-skills into my ~/.claude/skills/waynesutton-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/builder-skills.git /tmp/builder-skills && mkdir -p ~/.claude/skills && cp -r /tmp/builder-skills/skills/convex-component-authoring ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal in your working directory.
  2. Clone the repo: git clone https://github.com/waynesutton/builder-skills.git
  3. Create the skills directory: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r builder-skills/skills/convex-component-authoring ~/.claude/skills/
  5. Verify with ls ~/.claude/skills/convex-component-authoring — you should see SKILL.md and a references/ folder.
  6. Restart Claude Code and ask something like "help me author a Convex component".
  7. Make sure your project has the convex package installed and npx convex dev runs cleanly before applying the generated code.
View source on GitHub ↗License: Apache-2.0