catsofsuffering/ccsm/liquid-glass

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light mode, and animation specs.

Install

npx vskill@latest install catsofsuffering/ccsm/liquid-glass

SKILL.md

Liquid Glass Design System

Apple-inspired translucent glass UI with depth, refraction, and ambient light response.

Core Principles

  1. Translucency — Surfaces reveal layered content beneath via backdrop blur
  2. Depth — Elements float on distinct z-layers with realistic shadows
  3. Ambient Response — Glass tints shift based on underlying content color
  4. Minimal Chrome — Borders are subtle; shape and blur define boundaries
  5. Motion — Transitions feel physical: spring-based, with inertia

Usage

Import the token file in your CSS:

css
@import 'references/tokens.css';

CSS Tokens Reference

All tokens are defined in references/tokens.css. Key categories:

CategoryPrefixExample
Glass backgrounds--lg-bg-*--lg-bg-primary
Blur--lg-blur-*--lg-blur-md
Borders--lg-border-*--lg-border-color
Shadows--lg-shadow-*--lg-shadow-elevated
Radius--lg-radius-*--lg-radius-lg
Animation--lg-duration-*--lg-duration-normal

Component Patterns

Glass Card
css
.glass-card {
  background: var(--lg-bg-primary);
  backdrop-filter: blur(var(--lg-blur-md));
  -webkit-backdrop-filter: blur(var(--lg-blur-md));
  border: 1px solid var(--lg-border-color);
  border-radius: var(--lg-radius-lg);
  box-shadow: var(--lg-shadow-elevated);
  transition: transform var(--lg-duration-normal) var(--lg-easing-spring);
}
 
.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lg-shadow-high);
}
Glass Toolbar
css
.glass-toolbar {
  background: var(--lg-bg-toolbar);
  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
  border-bottom: 1px solid var(--lg-border-subtle);
}
Glass Button
css
.glass-btn {
  background: var(--lg-bg-interactive);
  backdrop-filter: blur(var(--lg-blur-sm));
  border: 1px solid var(--lg-border-color);
  border-radius: var(--lg-radius-md);
  transition: all var(--lg-duration-fast) var(--lg-easing-spring);
}
 
.glass-btn:active {
  transform: scale(0.97);
  background: var(--lg-bg-pressed);
}
Glass Modal Overlay
css
.glass-overlay {
  background: var(--lg-bg-scrim);
  backdrop-filter: blur(var(--lg-blur-xl));
}
 
.glass-modal {
  background: var(--lg-bg-elevated);
  border: 1px solid var(--lg-border-color);
  border-radius: var(--lg-radius-xl);
  box-shadow: var(--lg-shadow-high);
}

Dark / Light Mode

Tokens auto-switch via prefers-color-scheme. Light mode uses white-tinted glass; dark mode uses dark-tinted glass with higher blur to maintain readability.

css
/* Force a mode on a subtree */
.light-glass { color-scheme: light; }
.dark-glass  { color-scheme: dark; }

Animations

Use spring-based easing for physical feel:

css
/* Entry */
@keyframes glass-enter {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
 
.glass-animate-in {
  animation: glass-enter var(--lg-duration-normal) var(--lg-easing-spring) both;
}

Accessibility

  • Ensure contrast-ratio ≥ 4.5:1 for text over glass surfaces
  • Respect prefers-reduced-motion — disable blur animations, use opacity-only transitions
  • Provide prefers-contrast: high overrides that replace translucent backgrounds with solid ones

Security

  • Security scanPassed, 98 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

7-day trend score
0

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/catsofsuffering/ccsm/liquid-glass/badge)](https://verified-skill.com/skills/catsofsuffering/ccsm/liquid-glass)

Something wrong with this skill or its page? Tell us.