skills.rest
Holymir
HolymirCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design-tokens

Provide standardized UI design tokens for colors, typography, spacing, borders, and shadows.

Updated Mar 6, 2026
Search Tags:#frontend#design system#css#style guide#design tokens#ui design#tailwind
One-click install
npx skills add https://github.com/Holymir/liquid-arc --skill ui-design-tokens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-tokens
Source: https://github.com/Holymir/liquid-arc/tree/main/.claude/skills/frontend-skills/ui-design-tokens
Command: npx skills add https://github.com/Holymir/liquid-arc --skill ui-design-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about ui-design-tokens

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

FAQPage Schema
What are UI design tokens and how do they standardize web applications?▼

UI design tokens are pre-defined variables for colors, typography, spacing, borders, and shadows. They enforce a unified design language across web applications, reducing design debt and ensuring visual consistency.

How do I implement dark mode using CSS variables for a design system?▼

Implement dark mode using specific pre-defined CSS variables and design tokens. These tokens provide targeted strategies to effectively switch and adapt your user interface styling for dark environments.

Can I use these design tokens with Tailwind CSS for frontend development?▼

Yes, you can apply these tokens using pre-defined classes like `rounded-lg` for standard border radius. They integrate seamlessly into frontend workflows to ensure consistent UI design alongside frameworks like Tailwind.

How do I ensure responsive design and adaptability when building UI components?▼

Ensure responsive design by utilizing the provided breakpoints and patterns. These tokens facilitate building adaptable user interfaces that maintain accessibility and consistency across different screen sizes.

Related Skills

Explore More Design & Creative Skills→
umairinayatumairinayat
5

tailwind-patterns

Standardize Tailwind CSS v4 CSS-first configuration with design tokens and container queries.

Community
Advanced
yashvinthanyashvinthan

ui-styling

Create user interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
VulcanNeuralDevVulcanNeuralDev

design-guide

Define and enforce Paperclip frontend design tokens, typography, and component patterns.

Official
Advanced
johnlindquistjohnlindquist
24

design

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

Community
Advanced