Harness UI向けリキッドガラススイッチ
このスキルは、ユーザーがパッケージ化されたガラススイッチをWebインターフェース、AIコーディングハーネス、または類似のプロジェクトUIに追加するよう依頼した場合に使用します。目的は、コンポーネントをホストプロジェクトのフレームワークと状態モデルに適応させることであり、ハーネスの無関係な部分を再設計することではありません。
このスキルをCodexまたはClaudeにインストールすると、コーディングエージェントは再利用可能な指示とコンポーネントファイルを取得しますが、それらのプロダクト自身のアプリケーションチャームを変更するためのAPIを付与するわけではありません。代わりに、ユーザーの編集可能なプロジェクトまたはハーネスソースで作業を行ってください。
ワークフロー
- 編集前にホストプロジェクトを検査します。UIエントリポイント、フレームワーク、既存のセグメントコントロール、状態の所有者、スタイリングアプローチ、利用可能なビルドまたはプレビューコマンドを見つけます。プロジェクトのローカルな
AGENTS.md、CLAUDE.md、およびその他のプロジェクト指示に従ってください。 - ユーザーが切り替えたい状態のペアを特定します。このコンポーネントは正確に2つの選択肢（例：Plane/Sphere、Global/Local）のためのものです。ユーザーがより多くの選択肢を求めた場合は、パッケージ化されたコントロールはバイナリであることを説明し、要求されたインタラクションがそれでも意味をなす場合にのみ適応させてください。
references/harness-porting.mdとassets/以下のファイルを読みます。DOM契約が適合する場合はassets/liquid-controls.jsとassets/liquid-controls.cssを再利用します。そうでない場合は、それらのインタラクションモデルをホストフレームワークに移植します。- 選択をホストの実際の状態ソースに接続します。クリックまたはドラッグは、選択された視覚状態と表示されているビューの両方を更新する必要があります。宣言的フレームワークでは、フレームワークの背後でDOMを直接変更する代わりに、アクティブなスタイリングと
aria-pressedをフレームワークの状態から導出します。 - キーとなるインタラクション動作を保持します：連続ポインタードラッグ、1つのジェスチャー中の方向反転の繰り返し、70%の移動閾値でのスイッチ、選択されたオプションでセトリング、レンズのオーバーハングを片側あたり最大20CSSピクセルに制限。
prefers-reduced-motionを尊重します。 - ホストアプリがすでに
.view-switch、.view-button、または.view-lensを使用している場合は、CSSセレクタのスコープを設定するか名前を変更します。ハーネスの無関係なナビゲーション、パネル、ルーティング、または永続化を変更しないでください。 - 利用可能なビルド、テスト、またはブラウザプレビューワークフローを使用して、実際のホストUIを検証します。マウスとタッチのドラッグ、直接ボタン起動、反転/高速ジェスチャー、リサイズ、キーボードフォーカス、低モーションを確認します。どのチェックを実行したか、およびホストハーネスの制限事項を報告します。
パッケージ化されたリソース
assets/liquid-controls.js：依存関係のないポインターおよびレンズアニメーション動作。assets/liquid-controls.css：ライトおよびダークガラス外観。assets/demo.html：スタンドアロンのブラウザ例。references/harness-porting.md：フレームワークおよびハーネス統合ガイダンス。
スイッチはネイティブボタンを使用します。ホストプロジェクトは、ボタンの通常のclickイベントに応答して選択状態を変更する責任を引き続き負います。