skills.rest
mbelenmontoya
mbelenmontoyaCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-design-system

Document Hará Match design tokens, component patterns, and Tailwind CSS v4 conventions.

Updated Dec 28, 2025
Search Tags:#design system#css#animation#tailwind#tokens#ui components
One-click install
npx skills add https://github.com/mbelenmontoya/hara --skill tailwind-design-system-mbelenmontoya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-design-system
Source: https://github.com/mbelenmontoya/hara/tree/main/.claude/skills/tailwind-design-system
Command: npx skills add https://github.com/mbelenmontoya/hara --skill tailwind-design-system-mbelenmontoya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide to the Hará Match design system, ensuring consistency in visual elements, animations, and overall UI conventions across the application.

Core Features & Use Cases

  • Design Tokens: Access to color palettes, shadow definitions, and border-radius utilities.
  • Component Patterns: Examples and usage guidelines for buttons, chips, and cards.
  • Animation & Effects: Details on animation easings and the .liquid-glass effect.
  • Use Case: A developer needs to implement a new card component that matches the existing design language. They can refer to this Skill for the correct color tokens, shadow classes, border-radius, and the specific .liquid-glass utility.

Quick Start

Show me the color tokens for the Hará Match design system.

Frequently Asked Questions about tailwind-design-system

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

FAQPage Schema
How do I use Tailwind CSS design tokens for consistent UI components?▼

Tailwind CSS design tokens provide predefined color palettes, shadow definitions, and border-radius utilities to ensure visual consistency across UI components. You apply these tokens directly in your classes to maintain a unified design language without custom CSS.

What is the liquid-glass effect in Tailwind CSS v4?▼

The liquid-glass effect is a specific UI utility class documented within the design system. It provides a distinct visual styling for elements, alongside defined animation constants and easings for smooth transitions.

How do I implement a card component with Tailwind design system patterns?▼

You implement a card component by referencing the design system's component patterns for correct color tokens, shadow classes, and border-radius utilities. This ensures the new card matches the existing visual language and conventions.

Does this design system include patterns for buttons and chips?▼

Yes, the design system includes specific component patterns and usage guidelines for buttons and chips. It details the exact Tailwind classes and tokens needed to build these elements consistently.

What animation constants are defined for Tailwind UI development?▼

The design system defines specific animation easings and constants to standardize motion across the application. These constants ensure transitions and effects behave consistently throughout the UI.

Related Skills

Explore More Design & Creative Skills→
ProjectEuropaProjectEuropa
4

tailwind-patterns

Create CSS-first Tailwind v4 design systems with @theme blocks and container queries.

Community
Intermediate
dpearson2699dpearson2699
981

swiftui-liquid-glass

Implements and reviews SwiftUI Liquid Glass effects for iOS 26+.

Community
Intermediate
Camilo8902Camilo8902

design-to-component-translator

Translate Figma design specifications into React components with Tailwind CSS and design tokens.

Community
Advanced
EdgeHuntEdgeHunt

ck:ui-styling

Streamline React UI styling with shadcn/ui and Tailwind CSS design systems.

Official
Advanced