skills.rest
viably-labs
viably-labsOFFICIAL
Explore all skills by this author →
GitHub

ui-ux-design-system

Designs accessible SaaS UI/UX systems with tokens, shadcn/ui and Radix components, dark mode, WCAG 2.1 AA compliance, and responsive layouts.

Updated Mar 10, 2026
Search Tags:#design#ui#tokens#ux#design-system#shadcn#radix
One-click install
npx skills add https://github.com/viably-labs/vibegent --skill ui-ux-design-system-viably-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design-system
Source: https://github.com/viably-labs/vibegent/tree/main/.agents/skills/diegosouzapw-ui-ux-design-system
Command: npx skills add https://github.com/viably-labs/vibegent --skill ui-ux-design-system-viably-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds premium, accessible UI/UX design systems for SaaS apps, ensuring consistency, speed, and design-to-code alignment across products.

Core Features & Use Cases

  • Design token system for colors, typography, spacing, radii, and shadows
  • Component library integration with shadcn/ui and Radix for rapid, accessible UI composition
  • Dark mode support (class-based, flicker-free) and responsive layouts
  • Glassmorphism aesthetics, micro-animations, and motion that communicates state
  • Accessibility conformance (WCAG 2.1 AA) and keyboard/navigation friendly interfaces
  • Use cases include establishing a shared design system, prototyping SaaS interfaces, and enforcing UI consistency across products

Quick Start

Begin by defining tokens and building a reusable component library with shadcn/ui and Radix, then implement dark mode and accessibility checks for a SaaS product.

Frequently Asked Questions about ui-ux-design-system

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

FAQPage Schema
How do I create a UI design system for a SaaS application?▼

Design tokens centralize UI attributes like colors, typography, spacing, radii, and shadows into reusable variables. This standardizes visual consistency across products and enables seamless theming, dark mode support, and responsive layouts for SaaS applications.

Can I use shadcn/ui and Radix to build accessible web components?▼

Yes, this approach supports dark mode using a class-based, flicker-free implementation. It enables seamless theming transitions and maintains visual consistency across responsive layouts without screen flashing during state changes.

How do I implement flicker-free dark mode in a design system?▼

Implement flicker-free dark mode using a class-based theming approach integrated with your design tokens. This enables smooth theme transitions without screen flashing while maintaining consistent visual states across responsive SaaS interfaces.

What is the best way to ensure WCAG 2.1 AA accessibility in a component library?▼

The best way to ensure WCAG 2.1 AA accessibility is to build your component library using Radix primitives and standardized design tokens. This enforces keyboard navigation, accessible interaction patterns, and compliant visual contrast across your SaaS application.

Does this UI design system approach work for mobile and cross-platform frameworks?▼

Yes, this design system approach applies to mobile and cross-platform frameworks. Standardizing tokens and interaction patterns enables consistent visuals, accessible components, and theming across web and mobile products within your SaaS application development.

Why standardize design tokens for colors, typography, and spacing?▼

Standardize design tokens to centralize colors, typography, spacing, radii, and shadows into reusable variables. This ensures consistent visuals, enables seamless theming, and aligns design-to-code workflows across SaaS product development teams.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
noin-ainoin-ai

design

Generate UI design specs with responsive and dark mode variants.

Official
Intermediate
brixtonphambrixtonpham

ui-design-system

Architect scalable UI design systems with three-tier design tokens and CSS variable theming.

Community
Advanced
UltraXnUltraXn

modern-visual-aesthetics

Implement glassmorphism, gradients, and micro-animations with CSS and JavaScript.

Community
Intermediate