skills.rest
JuanQuenga
JuanQuengaCOMMUNITY
Explore all skills by this author →
Website𝕏@quengajuanGitHub

convex-create-component

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

Updated Aug 12, 2026
Search Tags:#typescript#backend#schema#component#codegen#convex#reusable modules
One-click install
npx skills add https://github.com/JuanQuenga/statsconnect --skill convex-create-component-juanquenga
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: convex-create-component
Source: https://github.com/JuanQuenga/statsconnect/tree/main/apps/clashcrown/.agents/skills/convex-create-component
Command: npx skills add https://github.com/JuanQuenga/statsconnect --skill convex-create-component-juanquenga

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building reusable backend modules in Convex requires strict boundary rules around authentication, environment variables, IDs, and HTTP routes that are easy to get wrong. This Skill guides the design and implementation of Convex components so tables, functions, and app-facing wrappers are structured correctly 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 server imports. - Boundary Rule Enforcement: Keeps auth and environment access in the app, passes parent IDs as strings, and wraps component functions for client access. - Shape Selection: Chooses between local, packaged, or hybrid component layouts with dedicated reference guides for each path. - Use Case: You want to extract notification logic into a reusable module with its own tables. The Skill plans the schema, implements send and listUnread functions, wires the component into the app with app.use, and creates authenticated app-side wrappers. ## Quick Start Ask the assistant to create a Convex component for your feature and confirm whether it should be local, packaged, or hybrid before implementation begins.

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 Convex component in an existing app?▼

Create a directory under convex/components/<name>/ with a convex.config.ts using defineComponent, a schema.ts, and function files importing from the component's own ./_generated/server. Then install it in the app's convex/convex.config.ts with defineApp and app.use, and 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 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 can't I use v.id for app tables inside a component?▼

Components have no access to the app's table namespace, so v.id("users") is invalid at the boundary. Parent app IDs must cross the boundary as v.string() validators, since Id types become plain strings in the app-facing ComponentApi.

How do I expose component functions to React clients?▼

Component functions are internal and cannot be called directly by clients. Create app-side wrapper queries or mutations that resolve auth, then call the component through components.<name> references and return the result to the client.

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 convex-helpers inside the component instead, and define explicit args and returns validators on all public component functions.

Related Skills

Explore More Software Engineering Skills→
MichaelFriezeMichaelFrieze

convex-quickstart

Sets up a Convex backend for new or existing web apps.

Community
Intermediate
awfixers-stuffawfixers-stuff

convex-create-component

Create isolated Convex components with config, schema, and lib files.

Official
Intermediate
featurectrlfeaturectrl

convex-create-component

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

Official
Advanced
SpineEventEngineSpineEventEngine
2

dependency-audit

Audit buildSrc dependency declarations for version downgrades, BOM mismatches, and convention drift.

Official
Advanced