mcpField
A
apply-tweaks

apply-tweaks

github.com/bluzirデザイン・UI10746 回インストール27 週間前に更新
リポジトリ

apply-tweaks について

YAMLの状態ファイルに保留されたデザイン調整をソースHTMLへ反映するスキルです。Claudeによるファイル編集を前提とし、値の検証、変更記録、キューの消去、取り消しを行います。

主な機能

  1. 01調整セッションと保留状態の読み込み
  2. 02スキーマに基づくキーと値の検証
  3. 03HTMLマーカーまたはCSS変数への反映
  4. 04変更記録と保留項目の消去
  5. 05直近の変更の取り消し

活用シーン

  1. 01保留中の画面調整をHTMLに適用
  2. 02編集前に不正な調整値を検出
  3. 03デザイン変更の記録を保持
  4. 04直近に適用した調整を取り消す

インストール

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

$npx skills add https://github.com/bluzir/claude-code-design --skill apply-tweaks

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

詳細

調整を適用

キューに入っている調整内容（pending.yaml 内）を Edit でソース HTML に反映します。claude-pipe のパターンです。ファイルが状態を保持し、Claude が書き込みます。

セッションの検索

<html-path> の session-id = tweaks-{slugify(basename html-path without ext)}-{today YYYYMMDD}。 セッションディレクトリ：artifacts/tweaks/<session-id>/。

日付の一致をスキップする場合（例：昨日のセッションを再開する場合）、Bash(ls artifacts/tweaks/) を実行し、最も新しい一致するプレフィックスを探します。

パイプライン

  1. セッションの状態を読み取る：

    Read artifacts/tweaks/<session-id>/state.yaml
Read artifacts/tweaks/<session-id>/pending.yaml

    pending.yaml が存在しないか空の場合は、「保留中の調整はありません」と報告して終了します。

  2. HTML とスキーマを読み取る：

    • 対象の HTML を Read で読み取ります（パスは state.yaml または $0 から取得）
    • __tweak_schema ブロック（<script id="__tweak_schema"> 内の JSON）を抽出します

  3. 保留中の各キーを検証する：

    • pending.yaml 内のすべてのキーがスキーマに存在する必要があります
    • 値の型がスキーマと一致する必要があります（色 = hex、数値 = [min..max] の範囲内、ブール値）
    • キーが無効な場合は、どのキーかを報告して終了します（一部だけ適用することはありません）

  4. 適用： pending 内の各キー → 値について：

    • 主なパターン — :root の CSS 変数： --tweak-<key>: <old>; を探し、新しい値に Edit します
    • 副次的なパターン — マーカーブロック： ... を探し、内容を Edit します
    • どちらのマーカーも見つからない場合は、明確にエラーを報告します（HTML が /make-tweakable パターンを使用していません）

  5. Edit によるアトミックな書き込み： Claude Code では各 Edit がすでにアトミックなので、一時ファイルへの書き込みと名前変更は不要です。

  6. ログに追記：

    ts=$(date -u +%Y%m%dT%H%M%SZ)
Write artifacts/tweaks/<session-id>/applied/$ts.yaml:
  applied_at: $ts
  changes:
    <copy of pending.yaml>

  7. 保留中の内容をクリア： Write artifacts/tweaks/<session-id>/pending.yaml で空の内容（または {}）を書き込みます

  8. 状態を更新：

    Edit artifacts/tweaks/<session-id>/state.yaml:
  phase: idle → idle (no-op but bump timestamp)
  last_applied_at: <ts>

  9. 検証： /done <html-path> — ファイルが引き続きレンダリングされ、新しい値がプレビューに表示されることを確認します。

  10. 報告：「N 件の調整を適用しました。artifacts/tweaks/<session-id>/applied/<ts>.yaml に記録しました。保留中の内容をクリアしました。」

元に戻す方法

ユーザーが「最後の調整を元に戻して」と指示した場合：

  1. Bash(ls -t artifacts/tweaks/<session-id>/applied/) — 最新のファイルを取得します
  2. そのファイルを Read で読み取り、差分を取得します
  3. 各変更を逆に適用します（HTML 内の現在の値を探し、以前の値に戻します）
  4. type: revert と、元に戻したファイルへの参照を含む新しい適用エントリーを追記します
  5. /done

コメント

Markdown 対応