Liquid Glass Skillは、Apple風のフロスト（すりガラス）調で、背景を歪ませるLiquid Glass UIスタイルを実装するためのClaude Codeスキルです。

このスキルは、CSSレイヤーによるティント（色合い）とリム（縁取り）の描画、およびSVGのディスプレイスメントフィルターによる背景の歪みを組み合わせることで、本物のガラスのようなUIを実現します。多くの「ガラスモーフィズム」実装が `backdrop-filter: blur()` と白いオーバーレイのみであるのに対し、このスキルはガラスの持つ「屈折」の要素と、ガラスらしく見せるためのルールのセットを提供します。

Claude Codeでは `/plugin marketplace add stormaref/LiquidGlassSkill` および `/plugin install liquid-glass@stormaref-skills` コマンドでインストールし、「このカードをフロストガラスにして」「サイドバーにガラスモーフィズムを追加して」といった自然言語で指示できます。直接実行する場合は `/liquid-glass:liquid-glass` コマンドを使用します。

スキルは `plugins/liquid-glass/skills/liquid-glass/` に配置され、主なファイルとして、ガラスのモデルとルールを記述した `SKILL.md`、依存関係のないCSSファイル `assets/liquid-glass.css`、Angularディレクティブ形式の屈折レイヤー `assets/liquid-glass.directive.ts`、CSSレイヤーのデモページ `assets/demo.html`、そして屈折のメカニズムと数式を解説した `references/refraction.md` が含まれます。

Claudeを使わずに使用する場合、`assets/liquid-glass.css` をリンクし、`liquid-glass-backdrop` クラスで背景を、`liquid-glass` クラスでパネルに適用します。Angularプロジェクトではディレクティブを直接インポートできます。その他のフレームワークでは `references/refraction.md` を参照してポートすることが可能です。

注意点として、ガラスは背景を映し出すため、平坦な背景では効果がありません。また、屈折機能はChromiumベースのブラウザのみで機能し、他のブラウザではCSSによるぼかし効果のフォールバックが適用されます。

この屈折フィールドは、Armagan Amcalar氏の`liquid-glass-js` のフラグメントシェーダーをポートしたもので、SVGディスプレイスメントフィルターを使用することで、スクロールやテーマ変更、コンテンツ更新にリアルタイムで追従します。