skills.rest
sihu-dev
sihu-devCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Define Tailwind-based design tokens and glass morphism components for dark-themed dashboards.

Updated Aug 23, 2026
Search Tags:#tailwind#design-system#ui-kit#dark-theme#glass-morphism
One-click install
npx skills add https://github.com/sihu-dev/forge-labs --skill design-system-sihu-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/sihu-dev/forge-labs/tree/main/apps/hephaitos/.claude/skills/design-system
Command: npx skills add https://github.com/sihu-dev/forge-labs --skill design-system-sihu-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill documents and demonstrates a cohesive design system combining dark aesthetics with glass morphism for a polished, consistent UI.

Core Features & Use Cases

  • Color & Typography: Tailwind-based tokens for a cohesive look.
  • Components: Glass cards, buttons, inputs, and charts styling guidance.
  • Use Case: Build a unified UI quickly across dashboards and apps.

Quick Start

Reference the design tokens and components to implement a consistent UI across pages.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I build a dark-themed dashboard UI with glass morphism effects?▼

Glass morphism creates a frosted-glass aesthetic using blur and transparency. This design system provides Tailwind-based components—GlassCard, buttons, inputs—with dark-theme tokens and responsive variants to build polished dashboards and trading interfaces consistently.

Can I use Tailwind CSS to create a unified design system with consistent tokens?▼

Yes. This Skill establishes a tokenized color palette and typography rules using Tailwind, ensuring consistent styling across components, charts, and widgets without rebuilding styles per page.

What components and patterns does a glass morphism UI kit include?▼

A glass morphism kit includes GlassCard containers, form inputs, buttons, and chart styling with accessible naming, border treatments, blur effects, and responsive variants for dark-themed interfaces.

How do I implement accessible dark-theme UI components with Tailwind?▼

Define a color system with accessible contrast ratios, apply Tailwind utility classes for responsive variants, and follow naming conventions for borders, blur, and component states to meet accessibility standards.

Does glass morphism work well for trading dashboards and financial UIs?▼

Yes. Glass morphism's layered, high-contrast aesthetic suits trading interfaces. This design system combines dark themes with glass effects to deliver clarity and visual hierarchy for data-dense dashboards.

What's the difference between a design system and component libraries?▼

A design system documents unified tokens, patterns, and rules—color, typography, spacing—that govern all components. This ensures consistency across dashboards and apps without rebuilding styles individually.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
jangtrinhjangtrinh

tailwind

Apply Tailwind v4 utility patterns to EaseUI components for responsive styling.

Community
Intermediate
tiagofurtiagofur

frontend-design

Standardize Vue 3 frontend visual design with glass-morphism tokens and patterns.

Community
Advanced