Skip to content
cccskills
FreePublished on GitHub

liquid-glass-ui-design

Design and implement authentic Apple Liquid Glass UI and physics-based optical glass controls on the web. Covers multi-pass refractive shaders, SDF displacement maps, chromatic dispersion, specular highlight arcs, spring-physics transitions, and Apple HIG design principles for glass materials.

The English summary is being prepared. Showing the original description.

wmasfoe/md-editor40 stars(GitHub 40 + cccskills 0)

Run score Not tested

See how to install

Files included (1)

  • SKILL.md1.6 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Liquid Glass UI Design Skill

1. Core Principles (Apple HIG & Physics-Based Glass)

  1. Physical Authenticity: Real glass bends light, refracts content, disperses RGB wavelengths at the contour, and reflects environment highlights. It is never just a flat translucent white rectangle or Gaussian blur.
  2. Hierarchy & Purpose: Glass is for interactive controls, floating toolbars, and navigation chrome, not heavy text body backgrounds.
  3. Multi-Layer Optical Anatomy:
    • Layer 1: Ambient Track / Environment: Soft translucent backing with high saturation boost (saturate(180~200%)).
    • Layer 2: SDF Refraction Lens: Physical coordinate displacement (feDisplacementMap / SDF shader) with RGB chromatic aberration.
    • Layer 3: Specular Highlight Rim: Top 1~1.5px pure white diamond highlight arc capturing directional ambient light.
    • Layer 4: Interactive Floating Shadow: Soft ambient contact shadow + deep floating elevation shadow when lifted/dragged.
  4. Motion & Fluid Interaction:
    • Motion uses Apple fluid deceleration curves (cubic-bezier(0.16, 1, 0.3, 1) or underdamped springs).
    • Touch/drag lifts the glass droplet with subtle scale (1.02~1.04x) and deeper elevation shadow.
    • Transitions glide smoothly between discrete anchor positions rather than jumping.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

[OMX] Run an anti-slop cleanup/refactor/deslop workflow

The English summary is being prepared. Showing the original description.

wmasfoe/md-editor40Updated Oct 28, 2026

[OMX] Run read-only deep repository analysis and return a ranked synthesis with explicit confidence, concrete file references, and clear evidence-vs-inference boundaries. Use when a user says 'analyze', 'investigate', 'why does', 'what's causing', or needs grounded cross-file explanation before any changes are proposed.

The English summary is being prepared. Showing the original description.

wmasfoe/md-editor40Updated Oct 28, 2026

ask

Free

[OMX] Ask a local external advisor CLI (Claude or Gemini) and capture a reusable artifact

The English summary is being prepared. Showing the original description.

wmasfoe/md-editor40Updated Oct 28, 2026

[OMX] Strict autonomous loop: $deep-interview -> $ralplan -> $ultragoal (+ $team if needed) -> $code-review -> $ultraqa

The English summary is being prepared. Showing the original description.

wmasfoe/md-editor40Updated Oct 28, 2026

[OMX] Stateful validator-gated research loop with native-hook persistence

The English summary is being prepared. Showing the original description.

wmasfoe/md-editor40Updated Oct 28, 2026

[OMX] Durable professor-critic research workflow over Codex goal mode without reviving deprecated omx autoresearch

The English summary is being prepared. Showing the original description.

wmasfoe/md-editor40Updated Oct 28, 2026

See all skills by wmasfoe

Report a problem with this skill