菜单
UI改善案、配色案、レイアウト案、情報密度の異なる案を、複数の静的HTMLモックとして比較・選択したいときに使う。「UI案をHTMLで比較して」「見た目を複数案出して」のような自然言語でも適用する。調査結果や技術比較を説明資料として残す依頼、単一案の実装、挙動・product logicだけの変更には使わない。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
コードベース全体、特定分野、ブランチ差分の改善候補を監査し、根拠付きで優先順位を付け、改善バックログとして残すときに使う。ユーザーが「$improve」「/improve」「コードベースを監査して」「改善候補を優先順位付きで出して」「改善バックログを作って」「このブランチで増えた問題を調べて」「改善バックログを再照合して」「リポジトリの次の方向性を考えて」と依頼した場合に使う。既知のバグ修正、直接の実装、通常のコードレビュー、設計済み作業の計画書作成、実装結果の受け入れ検証には使わない。
設計済みの作業を別エージェントへ渡すため、実装計画書や handoff プロンプトの作成を求められたときに使う。未確定要件の壁打ちや自分で実装する依頼では使わない。
他エージェントへのレビュー依頼、実装結果の受け入れ検証、レビュー結果の妥当性確認を求められたときに使う。PRレビューコメント対応や通常のセルフレビューでは使わない。
別のtmux paneで動いているAIエージェント（Claude Code / Codex / opencode等）へ指示やレビュー依頼を送信する、応答の完了を待って回収する、他paneのエージェントの出力や作業ログを読む、レビュー往復ループを回すときに使う。「%Nのpaneに送って」「隣のpaneのCodexにレビューを依頼して」「あのpaneが終わったら続きをやって」「右のpaneの作業を読んでまとめて」のような依頼で発動する。送る文面の作成自体（レビュー依頼文・handoffプロンプト）では使わず、agent-review-request / agent-handoff-plan に任せる。tmuxを介さないsubagent起動や並列化にも使わない。
Claude Code の /compact 前に、セッション状態の checkpoint を手動で保存するときに使う。「/compact-state」「compact 前に状態を保存して」「checkpoint を保存して」と依頼されたときに発動する。圧縮後の復旧作業、通常の進捗報告、plan 作成では使わない。
調査・監査・技術選定比較・性能検証・実装結果について、ユーザーが「結果をHTMLで読みやすく整理して」「HTMLの説明資料・レポートとして残して」のように、後から読み返せる静的HTML成果物を求めたときに使う。説明を補助する表、限定的な図解・定量グラフ・折りたたみ・定型指摘フィルタにも対応する。内容の調査・整理を伴わないHTML断片への変換、UI案や配色の比較モック、スライド、単体の探索的グラフ、任意JavaScriptを要する対話ツールには使わない。
| name | ui-mock-proposals |
| description | UI改善案、配色案、レイアウト案、情報密度の異なる案を、複数の静的HTMLモックとして比較・選択したいときに使う。「UI案をHTMLで比較して」「見た目を複数案出して」のような自然言語でも適用する。調査結果や技術比較を説明資料として残す依頼、単一案の実装、挙動・product logicだけの変更には使わない。 |
実装可能なUIの見た目を、現状と複数案を並べた単一HTMLで比較し、安定案IDを使って選択と実装へつなげる。
build-technical-explainerに任せる。current 1件と、方向性の異なる3〜5案を基本とする。明示された案数がある場合は2〜5案の範囲で従う。<target>-proposals.html、配色中心なら<target>-compare.html。tmp/などgitignore済みの場所、記録として残すなら規約に沿ってdocs/へ置く。current、各proposalの順にする。id="current"、各案はid="proposal-<id>" data-proposal-id="<id>"を持つsectionかarticleにする。proposal-a、proposal-dense。#currentと全proposal anchorへlinkする。script-src 'none'にする。視覚状態の比較に最小限のinline scriptが不可欠な場合だけ、共通契約のui-mock profileが許可する範囲で使う。prefers-color-schemeを使う。複数theme自体が比較対象なら、同じHTML内へ静的に並べる。skillディレクトリを<skill-dir>として実行する。
ruby <skill-dir>/scripts/validate_proposals.rb <proposals.html>
validatorは共通契約に加え、current、2〜5件のproposal、安定案ID、data-proposal-id、navigation linkを検証する。
Agentによるブラウザ目視は完了条件に含めない。HTMLの絶対pathと案IDを報告し、ユーザーが任意の方法で確認できるようにする。
related_artifacts.hrefを#proposal-<id>へ更新する。validation規則を変更した場合は次を実行する。
<shared-dir>は<skill-dir>/../_shared/html-artifactsを指す。
ruby <skill-dir>/scripts/test_validate_proposals.rb
ruby <shared-dir>/scripts/test_validate_html.rb
uv run --with pyyaml python <skill-creator-dir>/scripts/quick_validate.py <skill-dir>
ブラウザ目視は保守時にも必須にしない。ユーザーが明示した場合だけ行う。
scripts/validate_proposals.rb: 共通契約とproposal固有規則のvalidator。scripts/test_validate_proposals.rb: proposal固有規則の回帰テスト。../_shared/html-artifacts/: Explainerと共有する成果物契約と基礎validator。