1仕組みと動作原理
信頼性のあるガラスは4つの要素（霜のようなぼかし / 半透明度 / ガラスのエッジ / 奥行き）から合成され、1つでも欠けると単なる半透明のボックスに見えてしまいます。
skills/glassmorphism/SKILL.md
Glass is never one property. Every panel needs all four, or it reads as a plain translucent box:
4つの要素それぞれにコピー可能なCSSを提供し（backdrop-filterのblurにsaturateを加算、alpha 0.08–0.18、発光border、2層のbox-shadow）、軽量UI向け（8–12px）と重厚なモーダル向け（24–40px）のプリセットを用意しています。
backdrop-filterのスコープセマンティクスを活用します。要素の背後にあるコンテンツのみをぼかすため、実際のビジュアル要素やグラデーション背景の上に重ねる必要があり、単色背景では効果が成立しません。
skills/glassmorphism/SKILL.md
**`backdrop-filter` only blurs content that sits behind the element.** Over a flat background color it does nothing visible — glass needs a busy backdrop (image, gradient, video) to frost.
これは検収基準の説明にもなります。デモは本物の背景の上に配置されなければならず、そうでなければデモとして成立しません。
ディテールへのこだわり：平坦なborderではなく、マスクされた::beforeを用いて単一方向からの受光エッジを表現し、::afterのfeTurbulenceノイズにより強烈なぼかし処理下でのカラーバンディング（階調飛び）を解消します。
skills/glassmorphism/SKILL.md
Draw a masked 1px ring with a lit corner via `::before`, and dither away gradient **banding**
ノイズのopacityは0.06以下に抑え、一見施されていないように見えて実際に効いている職人技レイヤーとして機能します。完全なレシピはreferencesに記載されています。
リキッドガラス（2026年進化基準）ではSVGフィルターを用いた屈折を実装します。動的なfeTurbulenceでfeDisplacementMapを駆動し、backdrop-filterによるすりガラス面の上に重ね合わせます。
skills/glassmorphism/SKILL.md
<feDisplacementMap in="SourceGraphic" in2="n" scale="22" xChannelSelector="R" yChannelSelector="G"/>
scale/baseFrequency/durの3つのパラメータ範囲を指定し、ヒーロー要素1点のみに限定して使用します（フィルター処理の負荷が高いため、グリッド状に多用しないでください）。
アクセシビリティとパフォーマンスは厳格な制約です。prefers-reduced-transparencyではソリッドパネルへフォールバックし、prefers-reduced-motionでは屈折を停止し、backdrop-filter非対応環境では@supportsで対応し、テキストのコントラスト比は≥4.5:1を確保します。
skills/glassmorphism/SKILL.md
**Contrast over busy backgrounds**: translucent panels over photos can drop text below WCAG.
「ガラスは装飾であり、コンテンツは可読でなければならない」というルールを明文化し、背景の最も明るい領域を基準にコントラスト比を検証することを義務付けます。
2コア機能
01基本ガラスパネル（すりガラス面、半透明の塗り、発光エッジ、階層化シャドウ、ライト/ダーク対応）
02鏡面受光エッジ（マスクされた::beforeによる単一方向ハイライト）およびバンディング防止ノイズ（::afterのfeTurbulence）
03ガラス質感のアニメーション（ホバー時のすりガラス・ハイライト強調、パネル浮上、@starting-styleによる出現、鏡面スイープ）
04SVGリキッドガラス屈折フィルター（feTurbulenceで駆動するfeDisplacementMap、パラメータ調整範囲付き）
053重のフォールバック：prefers-reduced-transparency / prefers-reduced-motion / @supports not(backdrop-filter)
06パフォーマンス管理（ガラス要素数の制限、ぼかしのネスト回避、半径・面積の制限、不要になったwill-changeの即時解除）
07状態と時間のデュアルフリーズハーネス（?state=hoverおよび?t=NによるCSSアニメーションとSVG屈折の同時固定）
08referencesにおけるパフォーマンスルールの定量化（ガラス要素数とスクロールFPSの相関）
09ビルド不要のゼロビルド納品（インラインSVGフィルターを含む単一HTML、バンドラー不使用を明記）
10アクセシビリティ判定基準：reduced-transparencyでのソリッド化、reduced-motionでの屈折停止、テキストコントラスト比≥4.5:1
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| api | CSS backdrop-filter（Safari 需 -webkit- 前缀）与 prefers-reduced-transparency |
| api | SVG 滤镜原语 feTurbulence / feDisplacementMap（含 SMIL animate 驱动 baseFrequency） |
| network | 无第三方库、无 CDN 依赖（纯 CSS 加内联 SVG；references 的噪点是 data: URI 内联，非网络请求） |
| cli | npx / Playwright（宿主侧截图工具；SKILL.md 在 verify 段示范） |
| cli | scripts/seek-shot.sh + scripts/contact-sheet.sh + ffmpeg（仓库根打包助手，被 Packaged helper 段点名） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
作業ディレクトリを限定
管理者向け
操作ログを保持
判定根拠（ファイルパスと抜粋）
- 本地工作目录: ファイル読み書きと成果物出力: 本スキルディレクトリ内へのディスク書き込みはゼロ。納品物はエージェントが出力する自己完結型の.htmlファイル1点（背景画像＋ガラスパネル＋インラインSVGフィルター）。
監査ノート： 評価基準はスキル自身のディレクトリ（skills/glassmorphism/ = SKILL.md + 0バイトのREADME.md + references/glass-recipes.md、findコマンドで全量確認済み）のみに基づいています。スクリプトなし、クレデンシャルなし、実行時外部送信なし（tokenスキャン fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval( のヒット件数ゼロ）、ディスク書き込みなし。ディレクトリ全体のURLスキャンでは、references内のインラインノイズ用data:image/svg+xmlとiart.aiのutmプロモーションリンクのみが検出されましたが、前者はネットワークリクエストではなく、後者はMarkdownのリンクテキストであり、いずれもリクエスト命令ではありません。納品ページ内の背景画像やフォントがリモートから取得される場合、それは成果物生成時の参照に該当し、セキュリティ判定の対象外として注意事項にのみ記載します。
5二重目の独立検証
- [ok] backdrop-filter 只能模糊身后内容这一关键前提是否自洽 — SKILL.md 核心段与 references 第 1 节都写明该语义，并据此推出演示必须压在真实杂物背景上；验收第 1 条与之对齐（glass overlaps a real busy backdrop, not a flat color）。
- [unlocatable] prefers-reduced-transparency 的可验证性（正文把它列为必过项） — SKILL.md 要求加载 reduced-transparency 并确认实心兜底可读，但给的建议含糊（Playwright --color-scheme-style flags, or a ?reduced=1 query）——Playwright 并无该媒体特性的专用开关，?reduced=1 需自行在页面实现。全文未给可用的确定性取证命令，故该验收项在源码内不可定位为可行步骤（对比 accessible-animation 用的是真实存在的 --reduced-motion=reduce）。
- [ok] 液态玻璃滤镜的性能告诫是否与实现一致 — 正文说明 filter（不是 backdrop-filter）作用于元素自身像素，需叠在霜面之上；references 第 5 节同样表述，并给 baseFrequency/scale/dur 的调参表与只用一块 hero 的限制，前后一致。
- [discrepancy] Packaged helper 的路径基准 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3，但 scripts/ 在仓库根而非本 skill 目录，单装形态下相对路径不成立。
6結論
最適な用途： 適している用途：① 画像、動画、グラデーション背景上にオーバーレイ、カード、ナビゲーションバー、モーダル、ツールバーを配置するUI。② Appleのリキッドガラスの質感（屈折と流動的なハイライト）を再現したいヒーローセクション。③ 適切なフォールバック（reduced-transparency/motion、backdrop-filter非対応）を備えた規格準拠の実装が求められる場合。④ ブラウザで直接表示でき、状態や時間を固定して検証可能なガラスデモを入手したい場合。
不向きな用途： 適していない用途：① 単色または極めてシンプルな背景のUI（ぼかす対象が存在しないため、効果が発揮されません）。② 大面積または大半の要素をガラス化する必要がある情報密度の高いUI（パフォーマンスと可読性の双方が損なわれます）。③ 厳格なコントラスト保証が要求される本文中心のページ（ソリッドなパネルに切り替えるべきです）。④ 低スペック端末が主対象の環境（屈折フィルターの処理負荷が高いため）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload glassmorphism.tar.gz
sha256:
Option B · Copy Guide for Agent282f840f1bf8a217…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit b6dba3eb75.