get-convex avatar

Convex Create Component

Creates proper Convex components with isolated tables and clean boundaries between your app and reusable backend logic. Handles the tricky parts like component schema definition, cross-boundary function calls with ctx.runQuery/runMutation, and keeping auth/environment access in the app layer where it belongs. Generates the full directory structure, wires up convex.config.ts correctly, and creates app-side wrapper functions for client access. Most useful when you're building third-party integrations that need their own tables or extracting complex backend features into reusable modules. Gets the import paths and type boundaries right, which is where most manual component setups break.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
7
skills.sh installs
102.8K
GitHub stars
45
last updated
Aug 21, 2026

Install

$ npx -y skills add get-convex/agent-skills --skill convex-create-component --agent claude-code

Installs into .claude/skills of the current project.

Files

Convex Create Component

Create reusable Convex components with clear boundaries and a small app-facing API.

When to Use

  • Creating a new Convex component in an existing app
  • Extracting reusable backend logic into a component
  • Building a third-party integration that should own its own tables and workflows
  • Packaging Convex functionality for reuse across multiple apps

When Not to Use

  • One-off business logic that belongs in the main app
  • Thin utilities that do not need Convex tables or functions
  • App-level orchestration that should stay in convex/
  • Cases where a normal TypeScript library is enough

Workflow

Sponsors

Details

Repository
github.com/get-convex/agent-skills
Categories
Frontend Development, Backend & APIs, AI & Agent Building, Databases

More from get-convex/agent-skills

All 13
1heygen-com avatarcss-animationsheygen-com/hyperframesCSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CS72.3Kskills.sh installs
2pbakaus avatarfrontend-designpbakaus/impeccableDistinctive, production-grade frontend interfaces that avoid generic AI aesthetics through intentional design choices.53.2Kskills.sh installs
3samber avatargolang-project-layoutsamber/cc-skills-golangProvides a guide for setting up Golang project layouts and workspaces. Use when starting a new Go project, organizing an existing codebase, setting up a monorep42.1Kskills.sh installs
4flutter avatarflutter-add-widget-previewflutter/agent-pluginsAdds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consi38.7Kskills.sh installs
5callstackincubator avatarreact-native-best-practicescallstackincubator/agent-skillsProvides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes32Kskills.sh installs
6software-mansion avatarargent-react-native-optimizationsoftware-mansion/argentOptimizes a React Native app by profiling first to find real bottlenecks, then sweeping for mechanical issues. Entry-point for all performance work. Use when th30.2Kskills.sh installs