liquid-glass-skill について
liquid-glass-skillは、iOS 26とmacOS 26のApple Liquid Glassを扱うデザインスキルです。SwiftUI APIやプラットフォームごとの差異、移行手順、よくある問題を解説します。
主な機能
- 01SwiftUIのglassEffectとボタンスタイル
- 02GlassEffectContainerによるグループ化
- 03Apple各プラットフォームでの動作差
- 0426以前のデザインからの移行
- 05パフォーマンス、重なり、コントラストの問題
活用シーン
- 01SwiftUI画面へのLiquid Glass適用
- 02アプリのiOS 26デザインへの移行
- 03ガラス効果の重なりやコントラストの確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/liquid-glass-skillを入力して読み込まれたか確認します。
同梱ファイルstub.yaml
詳細
liquid-glass-skill
カタログのスタブ — 完全なパッケージはこちら：haider-nawaz/liquid-glass-skill
判断ツリー
-
パッケージはすでにインストールされていますか？ 確認：
~/.design-agent-skills/skills/liquid-glass-skill/SKILL.mdが存在します。- はい →
liquid-glass-skillを呼び出して続行します - いいえ → ステップ 2 に進みます
- はい →
-
シェルにアクセスできますか？
- はい → 以下のインストールコマンドを実行してから、スキルを呼び出します
- いいえ → インストールコマンドを表示します。Claude Code では、
!で始まるチャットメッセージとして送信します。グローバルにインストールする場合は-gを追加し、プロジェクトのみにインストールする場合は省略します
インストールコマンド
/plugin marketplace add haider-nawaz/liquid-glass-skill
インストール後の呼び出し
- スキル名：
liquid-glass-skill - トリガーフレーズ：「Liquid Glass」、「iOS 26 design」、「glassEffect」、「GlassEffectContainer」
機能
iOS 26 および macOS 26 で導入された、Apple の Liquid Glass マテリアルシステムに関する包括的な知識を提供します。SwiftUI の .glassEffect() ビューモディファイア、インタラクティブな要素向けの .buttonStyle(.glass)、ガラスサーフェスをグループ化する GlassEffectContainer、iOS、macOS、tvOS、visionOS 間のプラットフォーム固有の動作の違い、26 より前のデザインからアップグレードするアプリ向けの段階的な移行方法、そしてテスト済みの解決策とともに、既知の落とし穴（パフォーマンス、レイヤー構成、コントラスト）をまとめたカタログを扱います。
使用しないケース
- iOS 26 より前の iOS バージョンを対象とするアプリ — Liquid Glass API は利用できません
- Android またはクロスプラットフォームのデザイン — 代わりに mobile-app-design を使用します
- Liquid Glass 以外の一般的な SwiftUI パターン — swiftui-claude-skills または swiftui-patterns を使用します
コメント
Markdown 対応