mcpField
T
tuning-panel

tuning-panel

github.com/petekpデザイン・UI1049 回インストール21 週間前に更新
リポジトリ

tuning-panel について

tuning-panelは、開発時のみ表示するパラメータパネルを構築するスキルです。視覚的な調整と、変更分だけをLLM向け形式で出力する方法を案内し、React、SwiftUI、Vanilla JavaScriptを扱います。

主な機能

  1. 01出力に関わるパラメータの特定
  2. 02開発時限定パネルの設計
  3. 03コントロールのグループ化とプリセット
  4. 04デフォルト値へのリセット
  5. 05変更値のみをエクスポート

活用シーン

  1. 01アニメーションやレイアウト値の調整
  2. 02ビジュアルスタイルやタイポグラフィの変更
  3. 03変更した設定のLLMへの共有

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/petekp/agent-skills --skill tuning-panel

インストール後、Claude Code で/tuning-panelを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

examples/
export-format.md
react-leva-animation.tsx
references/
parameter-categories.md
react-leva.md
swiftui.md
vanilla-js.md

詳細

チューニングパネルスキル

ユーザーが調整中の値を視覚的に操作できる、カスタムのパラメータチューニングパネルを作成します。これらのパネルでは、現在のタスクに関連するすべてのパラメータを表示し、リアルタイムで調整できるようにして、チューニングした値をLLMが扱いやすい形式でエクスポートします。

基本理念

網羅性を優先してください。 ユーザーが何かを調整する場合、結果に影響する可能性のあるパラメータはすべて表示してください。パラメータが不足するとコンテキストの切り替えが必要になりますが、「多すぎる」場合のコストはスクロール量だけです。

デバッグモードでのみ表示してください。 チューニングパネルを本番環境で表示してはいけません。環境チェック、ビルドフラグ、またはURLパラメータを使用してください。

変更した値のみをエクスポートしてください。 LLM向けのエクスポートには、100個以上のパラメータすべてではなく、調整した値のみを表示してください。

プラットフォームの選択

プラットフォームライブラリリファレンス
ReactLeva（推奨）references/react-leva.md
SwiftUIネイティブコントロールreferences/swiftui.md
Vanilla JSTweakpane または dat.GUIreferences/vanilla-js.md

実装ワークフロー

ステップ 1: 調整可能なパラメータをすべて特定する

チューニング対象のコードを分析し、出力に影響するすべてのパラメータを抽出します。ドメインごとの網羅的な一覧については、references/parameter-categories.md を参照してください。

一般的なカテゴリ：

  • アニメーション: duration、delay、easing、スプリング物理特性（stiffness、damping、mass）
  • レイアウト: padding、margin、gap、width、height、position
  • ビジュアル: 色、不透明度、シャドウ、ボーダー、変形
  • タイポグラフィ: フォントサイズ、行の高さ、文字間隔、ウェイト

調査方法：

  1. マジックナンバー（ハードコードされた数値）を検索します
  2. スタイルオブジェクト（CSS-in-JS、インラインスタイル、テーマ値）を探します
  3. アニメーションの定義（Framer Motion、CSS トランジション、SwiftUI アニメーション）を見つけます
  4. ファイル内の色の値（hex、RGB、HSL）を特定します
  5. 数値または色のデフォルト値を持つコンポーネントの props を確認します
  6. CSS カスタムプロパティ（--var-name 宣言）を調べます
ステップ 2: デバッグモードのパネルを作成する

チューニングパネルが開発環境でのみ表示されるようにします。

  • React: process.env.NODE_ENV === 'development'
  • SwiftUI: #if DEBUG
  • Vanilla JS: URL パラメータ ?debug または環境チェック

コードパターンについては、プラットフォーム別のリファレンスを参照してください。

ステップ 3: コントロールを実装する

以下の原則に従ってください。

  1. フォルダーやセクションを使って、関連するパラメータをグループ化します
  2. 適切なコントロールの種類を使用します。数値にはスライダー、色にはカラーピッカー、列挙型にはドロップダウンを使います
  3. パラメータのドメインに基づいて、適切な最小値、最大値、ステップ値を設定します
  4. よく使われる設定用のプリセットを含めます
  5. デフォルト値に戻すリセットボタンを追加します
ステップ 4: LLM 向けエクスポートを追加する

重要な要件：

  1. 比較できるよう、初期化時にデフォルト値を保存します
  2. 浮動小数点数には許容誤差を使用します（例：Math.abs(a - b) > 0.001）
  3. 変更された値のみをフィルタリングして表示します。変更されていないパラメータは表示しません
  4. カテゴリごとにグループ化し、人が読みやすい名前を使って、読みやすい形式にします

エクスポート形式：

## Tuned Parameters for [ComponentName]

### Changed Values
- Duration: 300 → 450
- Spring Damping: 0.80 → 0.65
- Corner Radius: 12 → 16

### Apply These Values
Update the component at `src/components/Card.tsx:42` with the values above.

重要な理由：

  • パネルに100個以上のパラメータを表示する場合があります
  • すべての値をエクスポートするとトークンを浪費し、変更箇所がわかりにくくなります
  • default → current 形式にすると、差分をすばやく確認できます

その他のリソース

リファレンスファイル
サンプルファイル

コメント

Markdown 対応