mcpField
M
mobile-redesign-screen

mobile-redesign-screen

github.com/draftbitデザイン・UI972 回インストール17 週間前に更新
リポジトリ

mobile-redesign-screen について

mobile-redesign-screenは、単一のモバイル画面、または関連する2〜3画面のフローを監査・再設計するスキルです。ナビゲーションと操作の意味を保ち、範囲を限定したレビューと修正を進めます。

主な機能

  1. 01画面のトークン、レイアウト、操作を監査
  2. 02指摘を重要度別に評価
  3. 03焦点を絞った視覚変更を提案
  4. 04前後比較で個別修正を追跡
  5. 05範囲を限定し変更リスクを管理
  6. 06モバイルデザインの事前確認

活用シーン

  1. 01単一のモバイル画面の再設計
  2. 02短く関連性のある画面フローのレビュー
  3. 03ナビゲーションを変えずに画面を改善
  4. 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 には、指摘事項に使う用語が記載されています。

フロー

  1. スタックの確認と監査(redesign-protocol.md):画面で現在使われているトークンまたは インラインスタイル、ダイヤルの読み取り値、ルートツリー内での位置、特徴的なインタラクション、 アクセシビリティ上の利点を確認します。デバイスまたはプレビューにアクセスできる場合は、 変更前の状態をスクリーンショットに撮ります。
  2. モード。 現状維持か全面的な見直しかを決めます。不明確な場合は、一度だけ確認します。
  3. 指摘事項。 この画面に限って、重要度を高・中・仕上げに評価します。
  4. 変更案を提示。 どの調整項目(タイポグラフィ/余白 → 色からトークンへの移行 → 状態 → フィードバック/モーション → 再構成)を使うか、それぞれでどの指摘事項を解消するか、 何を変更しないかを示します。短いメッセージを 1 つ送り、承認後、またはユーザーがすでに 「そのまま実行して」と伝えている場合は作業を進めます。
  5. 修正ループ(redesign-protocol.md):指摘事項ごとに個別のコミットを作成し、視覚的な変更 ごとに変更前/変更後のペアを用意します。リスクガバナーを適用します(20%を超えたら停止、 修正は最大20件)。
  6. 完了報告。 解消した指摘事項と残っている指摘事項、変更前/変更後のペアを報告します。 design-baseline.json または MOBILE-DESIGN.md がある場合は、それらも更新します(差分を記載)。

厳守事項

  • 変更禁止: ルート名、ディープリンク、ナビゲーションツリー内での位置、フォームフィールドの 意味、習得済みのジェスチャー。指摘事項の解消にこれらの変更が必要な場合は、対象範囲外として OUT-OF-SCOPE と報告し、mobile-redesign-app を案内します。
  • ブロック優先: 画面がアーキタイプ(設定、フィード、認証、ペイウォール、空の状態)に 当てはまる場合は、対応する ../_shared/blocks/ ブロックと差分を比較し、3つ目のパターンを 新たに作るよりも、ブロックに近づけることを優先します。
  • 対象範囲を広げない: 他の画面と共有するコンポーネントを変更できるのは、その変更がほかの 画面に影響しない場合、またはユーザーが影響範囲を承認した場合のみです。リスクガバナーの ファイルあたり+5%という制限により、意図的に変更の負担が大きくなっています。
  • 完了時に、画面はモバイルデザインのセクション14の事前チェックに合格する必要があります。 事前チェックに合格しない再設計済みの画面は、完了とはみなされません。

コメント