How do I use a component in my main app?

You register the component using the `app.use()` method within your app's `convex.config.ts` file, allowing you to instantiate one or more copies of the component with custom names.

What are Convex components?

Convex components are self-contained backend packages that include database tables, server-side functions (queries, mutations, actions), and TypeScript types designed to be reused across different projects.

Do components support frontend integration?

Yes, the skill covers how to export type-safe React hooks that allow frontend consumers to interact with the component's API easily.

How do components keep data isolated?

Each component defines its own schema, and its tables are managed in a separate namespace from the main application's database, preventing accidental cross-talk and ensuring modularity.

Can I publish these components to npm?

Yes, this skill provides the specific package.json, tsconfig.json, and directory exports needed to bundle and publish your components as standard npm packages.

Convex Component Authoring

Name: Convex Component Authoring
Author: waynesutton

bywaynesutton

•

264

API開発

Builds self-contained, reusable Convex components with isolated database tables, functions, and TypeScript types for modular backend architecture.

概要

This skill provides expert guidance for creating, structuring, and publishing reusable Convex components. It enforces best practices for domain-specific isolation, ensuring that database tables and functions remain encapsulated from the main application. By following standardized patterns for configuration, schema definition, and exports, developers can build scalable, packageable backend modules that can be shared across multiple projects or published to registry services like npm. It is ideal for developers looking to move beyond monolithic backend design toward a modular, service-oriented architecture using Convex.

主な機能

Standardized directory structure for modular Convex components
Implementation of reusable frontend hooks for component consumers
Type-safe function definitions for queries, mutations, and actions
264 GitHub stars
Isolated database schema and table management patterns
NPM-ready package configuration and publishing guidance

ユースケース

Creating standalone feature modules like comment systems or notification engines
Building a reusable rate-limiter or authentication utility for multiple projects
Abstracting complex backend logic into maintainable and versioned packages

概要

主な機能

Standardized directory structure for modular Convex components
Implementation of reusable frontend hooks for component consumers
Type-safe function definitions for queries, mutations, and actions
264 GitHub stars
Isolated database schema and table management patterns
NPM-ready package configuration and publishing guidance

ユースケース

Creating standalone feature modules like comment systems or notification engines
Building a reusable rate-limiter or authentication utility for multiple projects
Abstracting complex backend logic into maintainable and versioned packages