mobile-redesign-screen について
mobile-redesign-screenは、単一のモバイル画面、または関連する2〜3画面のフローを監査・再設計するスキルです。ナビゲーションと操作の意味を保ち、範囲を限定したレビューと修正を進めます。
主な機能
- 01画面のトークン、レイアウト、操作を監査
- 02指摘を重要度別に評価
- 03焦点を絞った視覚変更を提案
- 04前後比較で個別修正を追跡
- 05範囲を限定し変更リスクを管理
- 06モバイルデザインの事前確認
活用シーン
- 01単一のモバイル画面の再設計
- 02短く関連性のある画面フローのレビュー
- 03ナビゲーションを変えずに画面を改善
- 04視覚変更と未解決の指摘を追跡
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ draftbit/ mobile-taste-skill --skill mobile-redesign-screenインストール後、Claude Code で/mobile-redesign-screenを入力して読み込まれたか確認します。
詳細
mobile-redesign-screen: 1 画面、まずは監査
対象範囲:1 画面、または共通の目的を持つ、範囲を絞ったフロー(2〜3 画面)。それ以上の場合は mobile-redesign-app を使用します。
メソッドファイル。まず全体を読んでください:../_shared/references/redesign-protocol.md(監査、
調整項目、修正ループ、リスクガバナー)と ../_shared/references/review-rubric.md(指摘事項の
形式)。../_shared/references/tells.md には、指摘事項に使う用語が記載されています。
フロー
- スタックの確認と監査(redesign-protocol.md):画面で現在使われているトークンまたは インラインスタイル、ダイヤルの読み取り値、ルートツリー内での位置、特徴的なインタラクション、 アクセシビリティ上の利点を確認します。デバイスまたはプレビューにアクセスできる場合は、 変更前の状態をスクリーンショットに撮ります。
- モード。 現状維持か全面的な見直しかを決めます。不明確な場合は、一度だけ確認します。
- 指摘事項。 この画面に限って、重要度を高・中・仕上げに評価します。
- 変更案を提示。 どの調整項目(タイポグラフィ/余白 → 色からトークンへの移行 → 状態 → フィードバック/モーション → 再構成)を使うか、それぞれでどの指摘事項を解消するか、 何を変更しないかを示します。短いメッセージを 1 つ送り、承認後、またはユーザーがすでに 「そのまま実行して」と伝えている場合は作業を進めます。
- 修正ループ(redesign-protocol.md):指摘事項ごとに個別のコミットを作成し、視覚的な変更 ごとに変更前/変更後のペアを用意します。リスクガバナーを適用します(20%を超えたら停止、 修正は最大20件)。
- 完了報告。 解消した指摘事項と残っている指摘事項、変更前/変更後のペアを報告します。
design-baseline.jsonまたはMOBILE-DESIGN.mdがある場合は、それらも更新します(差分を記載)。
厳守事項
- 変更禁止: ルート名、ディープリンク、ナビゲーションツリー内での位置、フォームフィールドの 意味、習得済みのジェスチャー。指摘事項の解消にこれらの変更が必要な場合は、対象範囲外として OUT-OF-SCOPE と報告し、mobile-redesign-app を案内します。
- ブロック優先: 画面がアーキタイプ(設定、フィード、認証、ペイウォール、空の状態)に
当てはまる場合は、対応する
../_shared/blocks/ブロックと差分を比較し、3つ目のパターンを 新たに作るよりも、ブロックに近づけることを優先します。 - 対象範囲を広げない: 他の画面と共有するコンポーネントを変更できるのは、その変更がほかの 画面に影響しない場合、またはユーザーが影響範囲を承認した場合のみです。リスクガバナーの ファイルあたり+5%という制限により、意図的に変更の負担が大きくなっています。
- 完了時に、画面はモバイルデザインのセクション14の事前チェックに合格する必要があります。 事前チェックに合格しない再設計済みの画面は、完了とはみなされません。
コメント
Markdown 対応