mobile-design-review について
mobile-design-review は、モバイルアプリのデザインを監査・採点し、デザインベースラインを管理するスキルです。既定ではアプリのファイルを変更せずにレポートを作成し、修正は依頼があった場合に限ります。
主な機能
- 01静的・実機でのデザインレビュー
- 0210カテゴリの評価基準と採点
- 03ベースラインとの回帰比較
- 04上限付きの任意修正フロー
活用シーン
- 01リリース前のモバイルアプリ監査
- 02新しいレビューとベースラインの比較
- 03指定画面のデザイン問題の特定
- 04依頼された修正とリスク管理
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/mobile-design-reviewを入力して読み込まれたか確認します。
詳細
mobile-design-review: 監査、スコア評価、ベースライン
デフォルトではレポートのみです。--fix を指定する（または、見つかった問題の修正をユーザーが依頼する）と、修正ループが有効になります。両方を黙って実行してはいけません。
手法は ../_shared/references/review-rubric.md（パス、ナレーション、Trunk Test、指摘事項の形式、10 のカテゴリ、スコア計算、ベースラインファイル）と ../_shared/references/tells.md（grep チェックリストと指摘事項のカタログ）に記載されています。修正の推奨事項では ../_shared/references/redesign-protocol.md（適用する改善策の順序）と ../mobile-taste/SKILL.md の各セクションを参照します。開始前に4つすべてを読んでください。
フロー
- スタックの確認。
package.json／app.json／テーマファイル／MOBILE-DESIGN.md／design-baseline.jsonを確認します。ベースラインが存在する場合、この実行は回帰確認です。差分をレポートの先頭に記載します。 - 対象範囲。 デフォルトではアプリ全体を対象とします。ユーザーが指定した場合は、名前が指定された画面／フローを対象にします。対象範囲を明確にするため、対象画面の一覧をルートツリーから作成します。
- 静的チェック（必ず実施）：まず
tells.mdの grep ブロックを実行し、次に10項目の評価カテゴリに沿ってコードを確認します。該当箇所はすべてトリアージします。 - 実機チェック（アクセス可能な場合）：シミュレーター／エミュレーター → Expo のウェブ版をスマートフォンのビューポートで確認 → ユーザー提供のスクリーンショットの順に実施します。画面ごとに、スクリーンショット、第一印象のナレーション、Trunk Test、タッチターゲットを確認します。可能であれば、ダークモードと大きなフォントも確認します。どれにもアクセスできない場合は、その旨を記載して静的チェックのみを続行します。
- 指摘事項。
review-rubric.mdの形式に従います：FINDING-NNN [影響度 | カテゴリ]、根拠、該当する場合は指摘番号、具体的な修正内容。 - スコア。 機械的なレター評価の計算方法に従って、Design Score と AI Slop Score を算出します。カテゴリごとの評価を表にまとめます。切り上げはしません。
- ベースライン。
design-baseline.jsonを作成／更新します。回帰確認では、差分表（カテゴリの変更、新規、解決済み）を最初に記載します。 - レポート。 ナレーション、Trunk Test の結果、影響度別の指摘事項、スコア、明示的な未検証項目の一覧（「デバイスにアクセスできないため、キーボード、スプラッシュ、スクロール性能、フォントスケール、エッジツーエッジは未検証」）、そしてレポートのみのモードでは、
../_shared/references/redesign-protocol.mdの改善策を適用する順序に基づく推奨修正順を記載します。
修正モード（オプトインのみ）
redesign-protocol.md の修正ループを実行します。指摘事項ごとに1つのアトミックコミット（style(design): FINDING-NNN ...）を作成し、実機チェックがある場合は修正前後のスクリーンショットを撮影し、再確認して解決済みにします。リスクガバナーを適用し、20％を超えた時点で停止します。修正数の上限は20件です。ベースラインでは指摘事項を fixed として記録します。制約：
- ナビゲーション構造、ルート名、ディープリンク、タブ順序、トークン名、フォームフィールドのセマンティクスは変更しません。これらは再デザインスキルの対象であり、そこで承認が必要です。
- 影響度の高い指摘事項から修正し、次に中程度のものを修正します。ユーザーが仕上げを依頼した場合に限り、見た目の微調整も行います。
- リスクガバナーで停止することは正常な完了状態です。修正済み／未対応／リスク計算をレポートします。
このスキルに適用されるルール
- レポートのみの場合、アプリファイルは一切編集しません。書き込みが認められるのは
design-baseline.json（レビュー自体の成果物）のみです。書き込みを一切行わないようユーザーから依頼された場合は、これも作成せず、代わりにレポート内に JSON を記載します。 - スコアはすべて計算方法に従います。却下した grep の該当箇所には、それぞれ1行で理由を記載します。
- プロジェクトでデザイン上の取り決め（
MOBILE-DESIGN.mdまたは同等のコミット済みデザインドキュメント）が定められている場合、指摘事項ではその取り決めからの逸脱も示します（宣言されたアクセントカラーの使用に一貫性がない、コードを読んでもナビゲーションが一致しないなど）。使用したドキュメント名を記載します。