skills.rest
stagewise-io
stagewise-ioOFFICIAL
Explore all skills by this author →
Website𝕏@stagewise_ioGitHub

stage-ui-design-system

Reference Stagewise UI design tokens, React components, and utility functions.

6.8k|508|Updated Apr 26, 2025
Search Tags:#theming#design system#tailwind css#ui design#react components#oklch colors
One-click install
npx skills add https://github.com/stagewise-io/stagewise --skill stage-ui-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stage-ui-design-system
Source: https://github.com/stagewise-io/stagewise/tree/main/.agents/skills/stage-ui-design-system
Command: npx skills add https://github.com/stagewise-io/stagewise --skill stage-ui-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive reference to the Stagewise UI design system, enabling developers to consistently style and build user interfaces across the application.

Core Features & Use Cases

  • Design Token Reference: Understand and utilize OKLCH colors, theme tokens (backgrounds, text, borders), and semantic colors for consistent theming in light and dark modes.
  • Component Library: Access detailed information on available UI components (Button, Input, Select, etc.), their props, and usage patterns.
  • Utility Functions: Learn about derived utilities for dynamic styling (borders, hover/active states) and animation classes.
  • Use Case: When building a new feature, consult this Skill to ensure all new components and styles adhere to the established design language, using the correct color tokens and component variants.

Quick Start

Refer to the components-reference.md file for detailed API information on all @stagewise/stage-ui components.

Frequently Asked Questions about stage-ui-design-system

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

FAQPage Schema
How do I use OKLCH colors and theme tokens for consistent UI design?▼

OKLCH colors and theme tokens provide semantic palettes for backgrounds, text, and borders in light and dark modes. You apply them by importing styles from the design system and using provided utility functions for dynamic styling.

What is the best way to style React components with Tailwind CSS utility functions?▼

The best way to style React components is using the `cn()` utility function provided by the design system. This allows you to merge Base UI primitives with Tailwind CSS classes and apply animation classes for consistent states.

Can I use these React components for building features in any environment?▼

These React components are specifically built for the `apps/browser/` environment. You should consult the components-reference file to ensure all new features adhere to the established design language and correct component variants.

Do I need to configure Base UI primitives before using the design system?▼

You need to import the required styles from the Stagewise UI design system to configure Base UI primitives. This setup enables you to access detailed information on available UI components like Button and Input and their usage patterns.

Why use OKLCH colors over standard hex values for design tokens?▼

OKLCH colors offer perceptual uniformity, allowing consistent lightness and chroma adjustments across your theme tokens. This ensures accurate semantic colors and smoother transitions between light and dark modes in your UI components.

Related Skills

Explore More Software Engineering Skills→
Jainam1673Jainam1673

shadcn-ui

Guide developers to discover, install, and configure shadcn/ui components in React projects.

Community
Intermediate
UiPathUiPath
18

apollo-prototype

Build React 19 TypeScript Tailwind CSS 4 UI mockups with Apollo Wind semantic tokens and shadcn components.

Official
Intermediate
r1cA18r1cA18
4

ui-skills

Enforce UI constraints for accessibility, primitives, interaction, and animation.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

riso

Define and enforce risograph-inspired design tokens and component rules for UI consistency.

Community
Intermediate