convex-create-component

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building reusable backend modules in Convex requires navigating component boundaries, isolated tables, and app-facing APIs, and mistakes like leaking auth or env access into components cause subtle failures. This Skill guides the design and implementation of Convex components with correct boundaries from the start. ## Core Features & Use Cases - Component Scaffolding: Creates the full component structure with convex.config.ts, schema.ts, and function files using the component's own generated imports. - Boundary Enforcement: Keeps authentication, environment variables, and HTTP routes in the app while passing IDs across the boundary as strings. - Shape Selection: Chooses between local, packaged, and hybrid component layouts based on whether the code stays in one app or ships as an npm package. - Use Case: You want to extract notification logic into a reusable module. The Skill plans the tables, public functions, and app wrappers, then wires the component into your app with app.use(...) and validates it with npx convex dev. ## Quick Start Ask the assistant to create a Convex component for your feature, describing what tables it should own and how the app will call 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 with its tables, and write functions importing from the component's own ./_generated/server. Install it in the app's convex/convex.config.ts with app.use(...), then run npx convex dev to generate types.

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 auth or environment variables?▼

No, ctx.auth and process.env are not available inside components. The app must resolve authentication and environment values, then pass them explicitly as arguments when calling component functions through ctx.runQuery, ctx.runMutation, or ctx.runAction.

How do I call a Convex component function from my app?▼

Call component functions through components.<name> using ctx.runQuery, ctx.runMutation, or ctx.runAction inside app functions. For client access, create app-side wrapper queries or mutations rather than exposing component functions directly.

Why does pagination not work across the Convex component boundary?▼

The built-in .paginate() method does not work across component boundaries. Use the paginator helper from the convex-helpers package inside the component to implement pagination that the app can consume.

What are the limitations of local vs packaged Convex components?▼

Local components live inside one repo and cannot be shared across apps, while packaged components require npm publishing, careful build ordering, and explicit package exports. Hybrid setups add moving parts and should only be used when extension points are clearly needed.