skills.rest
BangDori
BangDoriCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system

Document Prowl's Liquid Glass design system with Tailwind CSS tokens.

11|Updated Jan 25, 2026
Search Tags:#design system#tailwind css#ui guidelines#liquid glass#component styling#macos vibrancy
One-click install
npx skills add https://github.com/BangDori/prowl --skill design-system-bangdori
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/BangDori/prowl/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/BangDori/prowl --skill design-system-bangdori

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures a consistent and cohesive user interface across the Prowl application by providing clear guidelines on colors, effects, and component styling.

Core Features & Use Cases

  • Design Tokens: Defines base colors, accent colors, and light theme fallbacks using Tailwind CSS tokens.
  • Visual Effects: Specifies styles for Liquid Glass (macOS vibrancy) and 3D glass cards.
  • Component Styling: Lists essential CSS classes for various UI elements like buttons, inputs, and headers.
  • Use Case: A developer can quickly reference the SKILL.md to understand how to implement a new card component that matches the app's aesthetic, ensuring it uses the correct transparency, border, and shadow effects.

Quick Start

Consult the design-system skill for guidance on applying the Liquid Glass effect to a new window.

Frequently Asked Questions about design-system

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

FAQPage Schema
What is a Liquid Glass aesthetic in UI design?▼

A Liquid Glass aesthetic defines a visual style using macOS vibrancy effects and 3D glass cards to create translucent, layered interfaces. It relies on specific transparency, borders, and shadows for visual consistency.

How do I implement a 3D glass card component using Tailwind CSS?▼

To implement a 3D glass card, reference design guidelines for essential CSS classes that apply macOS vibrancy, correct transparency levels, borders, and shadow effects using Tailwind CSS tokens.

Does this design system include light theme fallbacks for base and accent colors?▼

Yes, the design system includes light theme fallbacks for both base colors and accent colors, ensuring UI consistency when the primary Liquid Glass aesthetic cannot be applied.

What's the best way to maintain visual consistency across a Tailwind CSS application?▼

The best way to maintain visual consistency is to adhere to a defined set of design tokens and specific implementation rules for component styling, ensuring all elements use correct colors and effects.

When do I need to use specific CSS classes for component styling?▼

You need to use specific CSS classes for component styling when implementing UI elements like buttons, inputs, and headers to ensure they match the application's gold accent palette and visual identity.

Related Skills

Explore More Design & Creative Skills→
mbelenmontoyambelenmontoya

tailwind-design-system

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

Community
Basic
CatsofsufferingCatsofsuffering
5

neubrutalism

Apply Neubrutalism design tokens and nb- CSS classes to frontend components.

Community
Intermediate
dpearson2699dpearson2699
981

swiftui-liquid-glass

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

Community
Intermediate
dylantarredylantarre
38

dark-mode

Implement dark mode with semantic color tokens, CSS variables, and system preference detection.

Community
Advanced