detail-observation について
detail-observationは、会話中に画面の細部を調べるデザイン分析スキルです。具体的な数値と根拠を用いて、文字、余白、境界線、色、画面状態を記録します。
主な機能
- 01画面上の文字サイズを数える
- 02余白の値とスケールを特定
- 03角丸の一貫性を比較
- 04フォントウェイトの役割を評価
- 05色と画面状態を記録
活用シーン
- 01画面の文字サイズと余白の記録
- 02コンポーネント間の角丸差の確認
- 03操作状態の不足をレビュー
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/detail-observationを入力して読み込まれたか確認します。
詳細
詳細観察
ほかの人が見落とすような、細かな意思決定を記録します。
使い方
/detail-observationこの会話に詳細レベルの分析制約を適用します。
制約
記録する項目
- MUST 実際に使われている文字サイズの数を数えること（システムの設定ではなく、画面上の表示を基準にします）
- MUST 余白のスケールを特定すること（4/8/16/24/32なのか、それとも不規則な値なのか）
- MUST 角丸の一貫性を確認すること（ボタン、カード、入力欄で同じか、それとも異なるか）
- MUST フォントウェイトの使い方を確認すること（何種類あり、それぞれに明確な役割があるか）
- SHOULD 色数と各色の役割（プライマリ、ニュートラル、アクセント、セマンティック）を特定すること
- SHOULD ホバー、フォーカス、アクティブ、無効、読み込み中、空、エラー、成功の各状態を確認すること
主観よりも精度を重視
- MUST 具体的な値を使うこと：「ゆとりのある余白」ではなく「16pxのマージン」
- MUST 根拠を示して不一致を記録すること：「ボタンは角丸4px、カードは8px、入力欄は6px」
- NEVER 具体的な不一致を示さずに「一貫性がないように感じる」と述べないこと
- SHOULD デザインシステムがある場合は、観察した値と比較すること
アンチパターン
- 表面的な評価で終わること（「タイポグラフィがよく見える」など）
- すべての不一致を誤りとして扱うこと（意図的な違いもあります）
- ユーザー体験に影響しない細部に時間をかけること
コメント
Markdown 対応