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 Development

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.

Key Features

01Standardized directory structure for modular Convex components

02Implementation of reusable frontend hooks for component consumers

03Type-safe function definitions for queries, mutations, and actions

04264 GitHub stars

05Isolated database schema and table management patterns

06NPM-ready package configuration and publishing guidance

Use Cases

01Creating standalone feature modules like comment systems or notification engines

02Building a reusable rate-limiter or authentication utility for multiple projects

03Abstracting complex backend logic into maintainable and versioned packages

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add waynesutton/convexskills convex-component-authoring

For use in Claude.ai and ChatGPT

Download Skill