skills.rest
get-convex
get-convexOFFICIAL
Explore all skills by this author →
Website𝕏@convex_devGitHub

convex-design-system

Standardize Convex UI design patterns with reusable primitives and Storybook references.

9|3|Updated Nov 28, 2025
Search Tags:#consistency#react#components#storybook#design-system#ui-patterns
One-click install
npx skills add https://github.com/get-convex/components-submissions-directory --skill convex-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: convex-design-system
Source: https://github.com/get-convex/components-submissions-directory/tree/main/.cursor/skills/convex-design-system
Command: npx skills add https://github.com/get-convex/components-submissions-directory --skill convex-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Convex Design System provides ready-made UI patterns and references to ensure consistent, production-ready frontend components across Convex dashboards and apps, aligning with the live Storybook source of truth.

Core Features & Use Cases

  • Primitives and shared building blocks (Button, Callout, TextInput, Modal, Avatar, Card, etc.) for rapid UI assembly.
  • Product- and dashboard-level references to accelerate admin UI development.
  • Design tokens, tokens.md, and design-system notes to maintain visual consistency across themes.

Quick Start

Start by selecting the smallest reusable primitive that fits the UI need, then compose with shared elements before further customization.

Frequently Asked Questions about convex-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I keep React UI components consistent across multiple dashboards?▼

You standardize React UI components by using shared primitives like Button, Callout, and Modal sourced from a Storybook design system, ensuring visual alignment through design tokens and reference materials.

What is a Storybook design system and how does it standardize UI patterns?▼

A Storybook design system serves as the source of truth for UI patterns, providing reusable building blocks and design tokens that enforce visual and functional consistency across applications.

How do I build reusable React UI primitives for rapid dashboard assembly?▼

You select the smallest reusable primitive fitting your UI need, compose it with shared elements like Card and TextInput, and align visuals using tokens.md before further customization.

Can I use these design system components to accelerate admin UI development?▼

Yes, the design system provides product- and dashboard-level references specifically to accelerate admin UI development, offering ready-made patterns for rapid assembly of consistent interfaces.

Do I need design tokens to maintain visual consistency across themes?▼

Yes, design tokens defined in tokens.md are required to maintain visual consistency across themes, serving as the foundational variables that enforce alignment throughout the UI components.

Why does my dashboard UI look inconsistent without a design system?▼

Dashboard UI becomes inconsistent without a design system because reusable primitives lack shared design tokens and reference materials, causing visual misalignment across different application components.

Related Skills

Explore More Design & Creative Skills→
pedronauckpedronauck
567

storybook-stories

Generate and refactor Storybook stories following project patterns and design tokens.

Community
Intermediate
Nerfherder16Nerfherder16

ui-design-system

Create React/TypeScript interfaces with design tokens and prebuilt components.

Community
Intermediate
Camilo8902Camilo8902

storybook-setup

Automate Storybook setup and configuration for React, Next.js, and Vue3 projects.

Community
Intermediate
haryelramalhoharyelramalho

storybook-stories

Create and refactor Storybook stories for React components with consistent metadata.

Community
Intermediate