Skills
.Work. You
Rest

ui-design-tokens

Community

Standardize UI design for consistency.

Design & Creative#frontend#design system#css#style guide#design tokens#ui design#tailwind
AuthorHolymir
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a comprehensive set of design tokens to ensure a consistent and cohesive visual language across all applications, reducing design debt and speeding up development.

Core Features & Use Cases

  • Design System Foundation: Offers pre-defined tokens for colors, typography, spacing, borders, shadows, and more.
  • Cross-Application Consistency: Enables developers and designers to easily apply a unified look and feel.
  • Dark Mode Support: Includes specific tokens and strategies for effective dark mode implementation.
  • Responsive Design: Provides breakpoints and patterns for building adaptable user interfaces.
  • Use Case: When starting a new UI component or redesigning an existing one, consult these tokens to ensure it aligns with the established design system.

Quick Start

Apply the rounded-lg class to your card elements for standard border radius.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ui-design-tokens
Download link: https://github.com/Holymir/liquid-arc/archive/main.zip#ui-design-tokens

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.