/mochi-redesign
ガイド付き再設計ワークフロー。固定された外観を当てるのではありません。固定されたプロセスを適用します。つまり、人物を理解し、コンセプトを見つけ、小さなデザインシステムを構築し、重要なものすべてを最初の画面にカードとして配置し、詳細をリッチなポップアップや専用ページに移し、正直なコピーを書き、実際の画面サイズですべての変更を確認してから表示します。
このワークフローは、実際のポートフォリオサイトが、オーナーからの何度ものフィードバックを経て、プレーンな1カラムテンプレートからベントースタイルのサイトへと変貌した経験から抽出されました。その過程で得られた教訓（何がうまくいき、何が却下され、何が壊れたか）は、以下および references/ に記録されています。
出力は、このスキルの元になったサイトのように見えてはいけません。同じ規律で、異なる個性：新しいコンセプト、新しいフォント、新しい色、新しい特徴的なディテール。もし「スキルがそうするから」という理由でマリーゴールドのブラシストローク、マスコット、ベントーグリッドに手を伸ばしている自分に気づいたら、立ち止まってフェーズ1に戻ってください。
実行方法
引数はオプションの自由テキストです。例：/mochi-redesign client/ または /mochi-redesign ホームページのみ、ブログは現状維持。
順番にフェーズを進めてください。各フェーズはゲートで終了します。結果をオーナーに見せ（説明ではなくスクリーンショット）、彼らの反応を待ってから次に進みます。未レビューの決定が積み重なると、再設計は失敗します。
| フェーズ | 最初に読む | ゲート |
|---|---|---|
| 0. インテークと監査 | references/01-intake-audit.md | オーナーが目標、ターゲット、範囲、変更してはいけないものを確認する |
| 1. コンセプトとシステム | references/02-concept-system.md | オーナーが1つの方向性を選ぶ。トークンが書き留められる |
| 2. コンテンツの真実 | references/03-content.md | オーナーが主張を承認する（過大主張なし） |
| 3. ファーストスクリーン | references/04-layout.md | すべてのターゲットサイズにおいて、1つのラップトップ画面に収まる |
| 4. 詳細レイヤー | references/05-interaction.md | ポップアップは内部でスクロールし、ページをロックし、レイアウトシフトがない |
| 5. セカンダリページ | references/06-content-pages.md | リストページとリーダーページがシステムと一致する |
| 6. メディア（オプション） | references/07-media.md | 実際のウォークスルー、圧縮済み、ビューポート内でのみ再生 |
| 7. ポリッシュとQA | references/08-qa.md | クリップチェック合格、両テーマ対応、モバイル対応、リント、ビルド |
| 8. ハンドオフ | references/09-feedback-and-handoff.md | クリーンディフ、デザインドキュメント更新、オーナーがコミットを決定 |
references/10-anti-patterns.md は、初回に犯したミスのリストです。フェーズ1の前に一度、フェーズ7の前に再度読んでください。
非妥協条件
- 変更する前に見る。 既存のコードを読み、サイトを実行し、ターゲットサイズでスクリーンショットを撮ってください。コードだけから再設計してはいけません。
- サイトごとに一つの個性。 コンセプトは対象（その人やプロダクトが実際に何であるか）から来るものであり、トレンドやこのスキルの出自から来るものではありません。
- すべての重要な情報をファーストスクリーンに。 訪問者はスクロールせずに、誰が、何を、そして証拠（ベストワーク）を見ることができるべきです。詳細はクリック一つ先にあり、5画面下にありません。
- 正直なコピー。 オーナーがインタビューで守れないような主張はしないでください。「すべて」「常に」「全て」よりも、「実践した」「やってきた」「適切な場面で」を好みます。形容詞の代わりに証拠（数字、出荷したもの）を示してください。
- 頭の中ではなく、サイズで検証する。 すべての視覚的変更の後には、クリップチェック（
scripts/clip-check.mjs）と少なくとも1枚のスクリーンショットが続きます。自分が見ていない変更を「完了」と報告してはいけません。 - 小さく、可逆的なステップ。 一つ変更し、見せ、聞く。オーナーが何かを二度却下したら、推測をやめてください。プレビュー付きの具体的な選択肢を2〜3提示し、選ばせてください。元に戻してほしいと言われたら、正確に以前のバージョンを復元し、「十分近い」再構築はしないでください。
- 公開中のものを壊さない。 古いルートは動作させ続け、無関係なページには触れず、変更する必要のなかったファイルを再フォーマットせず（フォーマッターの変更は実際の差分を隠します）、依頼されるまでコミットやプッシュをしないでください。
- アクセシビリティの最低基準。 キーボードで操作可能、可視のフォーカス、実際のボタンとリンク、
prefers-reduced-motionの尊重、両テーマでのコントラスト確認、ホバーだけで伝わる重要な情報がないこと。
「完了」の状態
- ラップトップ画面（1280×720〜1920×1080）に収まり、コンテンツが切れたり、水平スクロールがなく、明確な焦点があるファーストスクリーン。
- すべての新しいコンポーネントが使用する、小さく文書化されたデザインシステム（トークン、タイポグラフィ、角丸、モーションルール）。
- 長いスクロールの代わりに、リッチな詳細（ダイアログやページ）を開くカード。
- オーナーが行ごとに承認したコピー。
- 同じサイトだと感じられるセカンダリページ（リスト、リーダー、ケーススタディ）。
- リポジトリ内のデザインドキュメント（
DESIGN.mdなど）に、システムと決定事項が記述されており、次の担当者（またはエージェント）が一貫性を維持できるようにする。
このスキルのファイル
SKILL.md このファイル：ワークフロー、ゲート、ルール
references/01-intake-audit.md 質問すること、現在のサイトを監査する方法
references/02-concept-system.md コンセプトを見つけること。トークン、タイポグラフィ、特徴的なディテール
references/03-content.md 真実で、スキャン可能で、強調されたコピーを書くこと
references/04-layout.md ファーストスクリーンのベントーレイアウトとカードレシピ
references/05-interaction.md ダイアログ、ホバー、モーション、小さな楽しみ
references/06-content-pages.md 読者を引き続けるブログ/リスト/リーダーページ
references/07-media.md 実際の作業のウォークスルーとトレーラーの録画
references/08-qa.md ビューポートマトリックス、クリップチェック、テーマ、アクセシビリティ
references/09-feedback-and-handoff.md オーナーとの反復。きれいに終わらせること
references/10-anti-patterns.md 初回に何がうまくいかなかったか、とその修正
scripts/clip-check.mjs CDPスクリプト：切り取られたカード、オーバーフロー、折り返しの収まり
scripts/shots.mjs CDPスクリプト：ビューポートとテーマごとのスクリーンショット
templates/ フレームワークに依存しないスニペット（React + Tailwind）