convex-create-component

Create reusable Convex components with isolated tables and explicit app-facing APIs.

5|Updated Apr 29, 2020
One-click install
npx skills add https://github.com/vanities/bitchan --skill convex-create-component-vanities
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: convex-create-component
Source: https://github.com/vanities/bitchan/tree/main/web/.agents/skills/convex-create-component
Command: npx skills add https://github.com/vanities/bitchan --skill convex-create-component-vanities

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents backend logic from becoming tangled by helping you design reusable Convex components with isolated tables and explicit app-facing APIs.

Core Features & Use Cases

  • Component boundary design: Choose the right component shape (local, packaged, or hybrid) to match reuse and ownership needs.
  • Isolated tables + clear contracts: Define schema.ts and implement functions that own their own storage and workflow responsibilities.
  • Safe app integration: Keep auth and env access in the app, wire components via app.use(...), and expose client-safe wrappers.
  • Production-ready workflow: Follow an implementation and validation sequence using Convex codegen and dev to resolve boundary and type issues.

Quick Start

Tell the AI what new backend feature you’re building in your Convex app, what data it needs, and whether it should be reusable across apps, then implement it following the component workflow and wire it into your app through app.use(...) and app-side wrappers.

Frequently Asked Questions about convex-create-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create reusable Convex components with isolated tables?

You create reusable Convex components by defining `schema.ts` for isolated tables, implementing functions from component-local generated imports, and wiring them into your app via `app.use(...)` with app-side wrappers. This isolates backend logic behind a small, explicit API.

What is the best way to extract shared backend logic in a Convex app?

Extracting shared backend logic in Convex is best achieved by packaging it as a component with isolated tables and a clear boundary API. You define `convex.config.ts` and `schema.ts`, then expose client-safe wrappers to keep logic reusable across applications.

Does Convex component architecture keep auth and env access in the app?

Yes, Convex component architecture keeps auth and environment access in the app. Components are integrated using `app.use(...)`, and you must auth-wrap component calls from the app side to ensure safe client integration without exposing sensitive environment variables.

Can I use a hybrid component shape for third-party workflow integration in Convex?

Yes, you can use a hybrid component shape for third-party workflow integration in Convex. Choosing local, packaged, or hybrid shapes allows you to match specific reuse and ownership needs while packaging componentized functionality with clear boundaries.

When do I need to define convex.config.ts for a Convex component?

You need to define `convex.config.ts` when building any reusable Convex component. It is required alongside `schema.ts` to establish the component boundary, own storage responsibilities, and implement the production-ready workflow using Convex codegen.

Why should I expose client-safe wrappers for Convex component calls?

Exposing client-safe wrappers for Convex component calls ensures safe app integration by keeping auth and environment access within the app. This maintains a small, explicit app-facing API and prevents backend logic from becoming tangled.