make-tweakable について
デザイン成果物内でバリエーション、色、コピー、機能フラグを変更するコントロールを追加するスキルです。小型のフローティングパネル、アクティベーションメッセージ、要約で明記する状態の永続化方式を定めています。
主な機能
- 01Tweaks という名前のパネル
- 02選択したデザイン値の調整コントロール
- 03親フレームとのアクティベーション通知
- 04調整状態の永続化
活用シーン
- 01レイアウトのバリエーションをプレビュー
- 02デザインの色や見出しコピーを調整
- 03成果物内で機能フラグを切り替え
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/make-tweakableを入力して読み込まれたか確認します。
詳細
ユーザーが、デザイン成果物内でバリアントの切り替え、色の変更、コピーの編集、機能フラグの切り替えを直接行える、デザイン内コントロールを求めている場合に読み込みます。
公開する内容
影響の大きい値を少数だけ公開します。候補として適しているのは、重要な色を1～2色、レイアウトバリアントの切り替え、機能フラグ、見出しのコピー入力欄です。公開しすぎないでください。コントロールを追加するたびにデザインのコストが増し、要点が薄れていきます。
ユーザーが調整可能な項目を指定していない場合は、興味深い項目を2～3個選び、その理由を概要で説明してください。
パネルの配置場所
右下に固定した小さなフローティングパネルを配置します。ホストが公開する外部切り替え機能と名前を合わせるため、タイトルは正確に Tweaks としてください。Tweaks が無効になったら、パネルを完全に非表示にします。余計な枠や要素を残さないでください。
コントロール部分は上品に保ちます。デザイン上どうしても必要な場合を除き、独自実装のフォームコンポーネントではなく、ネイティブ入力要素（<input type="color">、<select>、<input type="text">、<input type="range">）を使ってください。
有効化プロトコル
順序が重要です。以下の手順をこの順番で実行してください。
- 親フレームからの
activateとdeactivateを処理するメッセージリスナーを登録します。 - その後で、Tweaks に対応していることを知らせる利用可能メッセージを親フレームに送信します。
先に利用可能メッセージを送信すると、ハンドラーが存在する前にホストの activate メッセージが届き、切り替えが何も起こさないままになる可能性があります。
無効化と外部との同期
ユーザーがデザイン内からパネルを閉じたときは、親にメッセージを送信し、外部の切り替えも同時にオフにしてください。ホストとデザイン内パネルは、常に同じ状態である必要があります。
永続化
ホストが再読み込み後に読み戻せる場所に、Tweaks の状態を永続化します。成果物に合った方法を選んでください。
- ソース内のタグ付き JSON ブロック（ホストが再配信する単一ファイルの HTML 成果物向け）。
- 成果物 ID をキーとする
localStorage（長期間保持するプレビュー向け）。 - ホストが提供する書き戻しフック（ホストが公開している場合）。
永続化の方法を概要で明記してください。