# Build Convex Components

Convex components need clear data ownership, wrapper functions, and generated types. This skill guides component design, implementation, wiring, and validation for Convex projects.

## Install

```bash
npx skillstore add get-convex/convex-create-component
```

## Metadata

- Status: approved
- Slug: get-convex-convex-create-component
- Skillstore revision: r1
- Version status: missing
- Tree hash: a3ad32ed6f42098c63311647e4b7f881df86012c721c4a0c066c380c6bb6a60b
- Author: get-convex
- GitHub username: get-convex
- License: MIT
- Repository: https://github.com/get-convex/agent-skills/tree/main/skills/convex-create-component/
- Ref: 0519034dad657fb1f7706e0550e962beeda73fdf
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: filesystem, external\_commands, network, env\_access
- Quality score: 80
- Quality tier: silver
- Public page: https://skillstore.pages.dev/skills/get-convex-convex-create-component
- Manifest: https://skillstore.pages.dev/api/skills/get-convex-convex-create-component/manifest

## Capabilities

- Chooses local, packaged, or hybrid component structure based on project goals.
- Plans isolated component tables, public functions, app wrappers, and boundary inputs.
- Creates Convex component files such as convex.config.ts, schema.ts, and function modules.
- Shows app integration with defineApp, app.use, components, and runQuery or runMutation calls.
- Validates codegen and type boundaries with Convex CLI commands when the project is configured.

## Use Cases

- Extract Backend Logic: Move reusable Convex logic into an isolated component with owned tables and app wrappers.
- Publish Shared Components: Create a packaged component with exports, generated types, and an example app validation path.
- Add Integrations: Build a third-party integration that owns workflows while the app keeps auth and environment access.

## Prompt Templates

### Create a Local Component

```
Create a local Convex component for [feature]. First confirm it needs isolated tables, then implement schema, functions, app wrappers, and validation steps.
```

### Extract Existing Logic

```
Review this Convex feature and extract the reusable backend logic into a component. Keep auth, env access, and client wrappers in the app.
```

### Package a Reusable Component

```
Design a packaged Convex component for [workflow]. Include package exports, generated component types, example app wiring, and a validation sequence.
```

### Design an Advanced Boundary

```
Design an advanced Convex component boundary for [workflow] with callbacks, static configuration, and app-side auth or environment wiring. Include validation and tests.
```

## Limitations

- Does not replace official Convex docs for unpublished API changes.
- Requires an existing Convex project or clear package layout.
- May need user action for Convex login or deployment setup.
- Does not design frontend UI flows beyond app-facing backend wrappers.

## Best Practices

- Keep authentication, environment access, and HTTP route mounting in the app layer.
- Give every public component function explicit argument and return validators.
- Run Convex codegen before relying on generated component API types.

## Anti Patterns

- Use a component for thin utilities that need no tables or backend functions.
- Expose component functions directly to clients without app wrapper authorization.
- Pass app table IDs as component validators instead of boundary strings.

## Security Audit

- Audited at: 2026-07-09T13:02:43.092\+00:00
- Summary: The static findings are false positives from Markdown examples, Convex API names, and documented validation commands. I found no prompt injection, credential exfiltration, path traversal, or malicious network behavior in the reviewed files.

## Stats

- Views: 68
- Downloads: 11
- Favorites: 0
- Popularity score: 0