convex-create-component

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

Updated Jun 7, 2026
One-click install
npx skills add https://github.com/agnivon/viral_thread_generator --skill convex-create-component-agnivon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: convex-create-component
Source: https://github.com/agnivon/viral_thread_generator/tree/main/.agents/skills/convex-create-component
Command: npx skills add https://github.com/agnivon/viral_thread_generator --skill convex-create-component-agnivon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building reusable backend modules in Convex requires careful handling of component boundaries, isolated tables, authentication, and generated code, and mistakes in any of these areas cause type errors and broken integrations. ## Core Features & Use Cases - Component Scaffolding: Generates the full component structure with convex.config.ts, schema.ts, and function files using the component's own generated server imports. - Boundary Guidance: Enforces critical rules such as keeping auth and environment access in the app, passing parent IDs as strings, and wrapping component functions for client access. - Shape Selection: Supports local, packaged, and hybrid component layouts with dedicated reference files for each path. - Use Case: When extracting a notifications feature into a reusable module, the Skill plans the tables and public API, creates the component under convex/components/, wires it into the app with app.use(...), and validates everything with npx convex dev. ## Quick Start Ask the assistant to create a Convex component for your feature and let it confirm the shape, design the tables and API, then implement and validate it.

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 a reusable Convex component?▼

Define the component with defineComponent in its own convex.config.ts under convex/components/<name>/, add a schema.ts and function files, then install it in the app's convex.config.ts with app.use(...). Run npx convex dev to generate types and validate the setup.

When should I use a Convex component instead of normal app code?▼

Use a component when the feature needs isolated tables, reusable backend functions, or persistent state shared across apps. One-off business logic, thin utilities, and app-level orchestration should stay in the main convex/ directory or a regular TypeScript library.

Can Convex components access ctx.auth or environment variables?▼

No, component functions cannot use ctx.auth or read process.env. The app must resolve authentication and environment values, then pass them explicitly as arguments when calling the component through ctx.runQuery, ctx.runMutation, or ctx.runAction.

Why do Convex component function calls fail typechecking?▼

Component-local ./_generated/* imports and app-side components.<name> references do not exist until codegen runs. Run npx convex codegen --component-dir followed by npx convex dev, and ensure CONVEX_DEPLOYMENT is configured for fresh repos.

How do I expose Convex component functions to React clients?▼

Component functions are internal and cannot be called directly by clients. Create wrapper queries or mutations in the app's convex/ directory that handle authentication and call the component through ctx.runQuery or ctx.runMutation.