$ ~/registry/skill/openclaw-agents-skills-convex-create-component

SKILL

convex-create-component

Builds reusable Convex components with isolated tables and app-facing APIs. Use for new components, reusable backend modules, integrations, or component boundary work.

来源

GitHub

更新于

2026-06-06

// 安全评估低风险

仅提示词，不执行代码
开源可审计

正在进行安全审计…

凭证密钥
网络外发
代码执行
数据访问
来源供应链

// 安装

复制安装指令，让 AI 自动完成配置 · 推荐新手

请帮我安装 askskill 上的 "convex-create-component" 技能：
1. 下载 https://raw.githubusercontent.com/openclaw/clawhub/main/.agents/skills/convex-create-component/SKILL.md
2. 保存为 ~/.claude/skills/convex-create-component/SKILL.md
3. 装好后重载技能，告诉我可以用了

// 下载

下载 SKILL.md机读安装清单 ↗

// 文档

Convex Create Component

Create reusable Convex components with clear boundaries and a small app-facing API.

When to Use

Creating a new Convex component in an existing app
Extracting reusable backend logic into a component
Building a third-party integration that should own its own tables and workflows
Packaging Convex functionality for reuse across multiple apps

When Not to Use

One-off business logic that belongs in the main app
Thin utilities that do not need Convex tables or functions
App-level orchestration that should stay in convex/
Cases where a normal TypeScript library is enough

Workflow

Ask the user what they are building and what the end goal is. If the repo already makes the answer obvious, say so and confirm before proceeding.
Choose the shape using the decision tree below and read the matching reference file.
Decide whether a component is justified. Prefer normal app code or a regular library if the feature does not need isolated tables, backend functions, or reusable persistent state.
Make a short plan for:
- what tables the component owns
- what public functions it exposes
- what data must be passed in from the app (auth, env vars, parent IDs)
- what stays in the app as wrappers or HTTP mounts
Create the component structure with convex.config.ts, schema.ts, and function files.
Implement functions using the component's own ./_generated/server imports, not the app's generated files.
Wire the component into the app with app.use(...). If the app does not already have convex/convex.config.ts, create it.
Call the component from the app through components.<name> using ctx.runQuery, ctx.runMutation, or ctx.runAction.
If React clients, HTTP callers, or public APIs need access, create wrapper functions in the app instead of exposing component functions directly.
Run npx convex dev and fix codegen, type, or boundary issues before finishing.

Choose the Shape

Ask the user, then pick one path:

Goal	Shape	Reference
Component for this app only	Local	`references/local-components.md`
Publish or share across apps	Packaged	`references/packaged-components.md`
User explicitly needs local + shared library code	Hybrid	`references/hybrid-components.md`
Not sure	Default to local	`references/local-components.md`

Read exactly one reference file before proceeding.

Default Approach

Unless the user explicitly wants an npm package, default to a local component:

Put it under convex/components/<componentName>/
Define it with defineComponent(...) in its own convex.config.ts
Install it from the app's convex/convex.config.ts with app.use(...)
Let npx convex dev generate the component's own _generated/ files

Component Skeleton

A minimal local component with a table and two functions, plus the app wiring.

// convex/components/notifications/convex.config.ts
import { defineComponent } from "convex/server";

export default defineComponent("notifications");

// convex/components/notifications/schema.ts
import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

export default defineSchema({
  notifications: defineTable({
    userId: v.string(),
    message: v.string(),
    read: v.boolean(),
  }).index("by_user", ["userId"]),
});

// convex/components/notifications/lib.ts
import { v } from "convex/values";
import { mutation, query } from "./_generated/server.js";

export const send = mutation({
  args: { userId: v.string(), message: v.string() },

…

查看完整文档 ↗

// 同源资产

技能

convex-setup-auth

Sets up Convex auth, identity mapping, and access control. Use for login, auth providers, users tables, protected functions, or roles in a Convex app.

openclaw装→

技能

convex

Routes general Convex requests to the right project skill. Use when the user asks which Convex skill to use or gives an underspecified Convex app task.

openclaw装→

技能

clawhub-moderation

Use for ClawHub staff moderation actions with the repo-local clawhub-mod tool: unhide skills, ban or unban users, change roles, and verify moderation state.

openclaw装→

技能

clawhub-pr-maintainer

Use when reviewing, triaging, validating, or discussing ClawHub GitHub issues or pull requests, including author context, CI, UI proof, evidence, labels, close decisions, and maintainer handoff.

openclaw装→

技能

clawhub-ui-proof

Use when ClawHub UI changes need visual proof, before/after comparison, new-feature screenshots, temporary Playwright scenarios, or Crabbox desktop recordings.

openclaw装→

技能

convex-migration-helper

Plans Convex schema and data migrations with widen-migrate-narrow and @convex-dev/migrations. Use for breaking schema changes, backfills, table reshaping, or zero-downtime rollouts.

openclaw装→

$ loading_

请帮我安装 askskill 上的 "convex-create-component" 技能： 1. 下载 https://raw.githubusercontent.com/openclaw/clawhub/main/.agents/skills/convex-create-component/SKILL.md 2. 保存为 ~/.claude/skills/convex-create-component/SKILL.md 3. 装好后重载技能，告诉我可以用了

// 文档

Convex Create Component

Create reusable Convex components with clear boundaries and a small app-facing API.

When to Use

Creating a new Convex component in an existing app
Extracting reusable backend logic into a component
Building a third-party integration that should own its own tables and workflows
Packaging Convex functionality for reuse across multiple apps

When Not to Use

One-off business logic that belongs in the main app
Thin utilities that do not need Convex tables or functions
App-level orchestration that should stay in convex/
Cases where a normal TypeScript library is enough

Workflow

Ask the user what they are building and what the end goal is. If the repo already makes the answer obvious, say so and confirm before proceeding.
Choose the shape using the decision tree below and read the matching reference file.
Decide whether a component is justified. Prefer normal app code or a regular library if the feature does not need isolated tables, backend functions, or reusable persistent state.
Make a short plan for:
- what tables the component owns
- what public functions it exposes
- what data must be passed in from the app (auth, env vars, parent IDs)
- what stays in the app as wrappers or HTTP mounts
Create the component structure with convex.config.ts, schema.ts, and function files.
Implement functions using the component's own ./_generated/server imports, not the app's generated files.
Wire the component into the app with app.use(...). If the app does not already have convex/convex.config.ts, create it.
Call the component from the app through components.<name> using ctx.runQuery, ctx.runMutation, or ctx.runAction.
If React clients, HTTP callers, or public APIs need access, create wrapper functions in the app instead of exposing component functions directly.
Run npx convex dev and fix codegen, type, or boundary issues before finishing.

Choose the Shape

Ask the user, then pick one path:

Goal	Shape	Reference
Component for this app only	Local	`references/local-components.md`
Publish or share across apps	Packaged	`references/packaged-components.md`
User explicitly needs local + shared library code	Hybrid	`references/hybrid-components.md`
Not sure	Default to local	`references/local-components.md`

Read exactly one reference file before proceeding.

Default Approach

Unless the user explicitly wants an npm package, default to a local component:

Put it under convex/components/<componentName>/
Define it with defineComponent(...) in its own convex.config.ts
Install it from the app's convex/convex.config.ts with app.use(...)
Let npx convex dev generate the component's own _generated/ files

Component Skeleton

A minimal local component with a table and two functions, plus the app wiring.

// convex/components/notifications/convex.config.ts
import { defineComponent } from "convex/server";

export default defineComponent("notifications");

// convex/components/notifications/schema.ts
import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

export default defineSchema({
  notifications: defineTable({
    userId: v.string(),
    message: v.string(),
    read: v.boolean(),
  }).index("by_user", ["userId"]),
});

// convex/components/notifications/lib.ts
import { v } from "convex/values";
import { mutation, query } from "./_generated/server.js";

export const send = mutation({
  args: { userId: v.string(), message: v.string() },

…

查看完整文档 ↗