skills.rest
sendbird-playground
sendbird-playgroundOFFICIAL
Explore all skills by this author →
GitHub

stave-design-system

Apply the Stave desktop-first design system to UI surfaces using shadcn components and radix-vega preset.

3|1|Updated Mar 25, 2026
Search Tags:#ui#consistency#tokens#design-system#shadcn#stave
One-click install
npx skills add https://github.com/sendbird-playground/stave --skill stave-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stave-design-system
Source: https://github.com/sendbird-playground/stave/tree/main/skills/stave-design-system
Command: npx skills add https://github.com/sendbird-playground/stave --skill stave-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent UI, layouts, and prompts across the Stave repo lead to fragmented user experiences. This Skill standardizes the desktop-first design system so UI changes, themes, dialogs, sidebars, and empty states align with a single visual language.

Core Features & Use Cases

  • Leverage shadcn/ui components and the radix-vega preset as the default building blocks to ensure consistent controls, dialogs, and overlays.
  • Provide governance for design-token usage, token-driven theming, and glass depth rules to maintain a cohesive look across surfaces.
  • Guide prompts that involve designing or polishing UI elements (e.g., "UI", "sidebar", "dialog", "settings"), ensuring all changes respect Stave's design system.

Quick Start

Apply the Stave design system to the current UI surface following the shadcn preset and token guidance.

Frequently Asked Questions about stave-design-system

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

FAQPage Schema
How do I standardize UI components using a design system?▼

To standardize UI components using a design system, apply token-based theming and leverage shadcn/ui components to enforce consistent controls, dialogs, and overlays across your repository.

How do I apply token-driven theming to UI surfaces?▼

Apply token-driven theming by following token-based styles defined in src/globals.css. This ensures cohesive look and behavior across all desktop-first UI surfaces.

Does shadcn work with radix-vega preset for desktop UI?▼

Yes, shadcn works with the radix-vega preset. They act as the default building blocks to ensure consistent controls, dialogs, and overlays for desktop-first UI.

What is the best way to standardize dialog and sidebar patterns?▼

The best way to standardize dialog and sidebar patterns is to enforce design-token usage and glass depth rules provided by a desktop-first design system, ensuring all UI changes align.

Why does my UI layout look inconsistent across different surfaces?▼

UI layouts look inconsistent when fragmented visual languages are used. Standardizing with a desktop-first design system aligns themes, dialogs, sidebars, and empty states into a single cohesive look.

When do I need to apply design-token governance to my UI?▼

You need to apply design-token governance when designing or polishing UI elements like sidebars, dialogs, or settings to ensure all changes respect the established desktop-first design system.

Related Skills

Explore More Design & Creative Skills→
corezoidcorezoid
58

simulator-init

Initialize and configure the Simulator.Company environment with OAuth authentication and .env storage.

Official
Intermediate
oharatooharato

using-streamlit-layouts

Structure Streamlit application layouts with sidebars, columns, tabs, and dialogs.

Community
Basic
GatsbyhateyouGatsbyhateyou

glassmorphism

Generate frosted glass UI elements with adjustable blur and transparency using Tailwind CSS.

Community
Basic
HieubkavHieubkav

ui-styling

Create accessible UI styling with shadcn/ui and Tailwind CSS for React applications.

Community
Advanced