本文へ移動
cccskills
無料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.

日本語の概要は準備中です。原文の説明を表示しています。

wmasfoe/md-editorスター 40(GitHub 40 + cccskills 0)

実行スコア 未検証

インストール方法を見る

含まれるファイル（1）

  • SKILL.md1.6 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

ai-slop-cleaner

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

wmasfoe/md-editor402026年10月28日 更新

analyze

無料

[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.

日本語の概要は準備中です。原文の説明を表示しています。

wmasfoe/md-editor402026年10月28日 更新

ask

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

wmasfoe/md-editor402026年10月28日 更新

autopilot

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

wmasfoe/md-editor402026年10月28日 更新

autoresearch

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

wmasfoe/md-editor402026年10月28日 更新

autoresearch-goal

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

wmasfoe/md-editor402026年10月28日 更新

wmasfoe のスキルをすべて見る

このスキルの問題を報告する