design-mind

name	design-mind
description	UI・フロントエンドの実装・修正・レビューで必ず使う skill。画面、コンポーネント、フォーム、ダイアログ、スタイル、文言、状態管理、UX を扱うときに、既存デザインシステムの再利用、i18n、操作性の定番作法、再レンダリング、日本語入力(IME)の観点で判断する。バックエンドのみ・CLI のみの作業では使わない。

Design Mind

UI を「それっぽく新しく作る」のではなく、既存の体系に揃え、実際の利用者が自然に操作できる形にするための skill。

最初に確認する

1. 既存コンポーネント: 同種の UI(ダイアログ、テーブル、フォーム、セレクタ)が既にないか探し、あれば必ず再利用または踏襲する。同じ機能の画面が複数あるなら UI・挙動を揃える。新規実装は既存に該当がない場合の最終手段。
2. デザインシステム: プロジェクトが採用している UI ライブラリ(shadcn/ui、Chakra 等)とテーマトークンを確認し、素の HTML やアドホックな CSS で自作しない。
3. 参照実装: 「◯◯を参考に」と指定されたら、見た目だけでなく構成・コンポーネント・挙動まで揃える。正となる環境(本番・staging)がある場合は、値・色・罫線・レイアウトの parity を取る。

i18n

• ユーザー向け文字列を直書きしない。必ず i18n キー経由にし、対象言語すべて(最低限 日本語と英語)の翻訳を同時に追加する。
• キー名は英語で意味が通る形にする。日本語をキーにしない。
• 言語切替時のフォールバック挙動(未翻訳キーがどう表示されるか)を確認する。
• 確認は必ず複数言語の両軸で行う(quality-mind / automatic-e2e の i18n 観点と同じ)。

操作性の定番作法

• 実行できない操作はボタンを隠すのではなく disabled にし、理由を tooltip で示す。
• 必須項目が埋まっていない状態で submit できる見た目にしない(disabled 制御)。
• クリック可能な要素には cursor: pointer。時間のかかる操作にはスピナー・ローディング表示。二重送信を防ぐ。
• エラー・完了の通知は toast に集約する。同時に複数生やさない。エラーの生メッセージや内部情報をそのまま画面に出さない。
• 選択肢が多いセレクタは検索可能な combobox にする。並び替えが要る一覧はドラッグ&ドロップ等の自然な操作にする。
• アイコンは採用済みのアイコンライブラリ(lucide 等)を使う。絵文字で代用しない。
• 内部 ID(UUID 等)をユーザーに見せない。表示は名前、URL 上の識別子は仕様に従う。
• 数値はカンマ区切り・単位(千円、% 等)・桁をドメインの慣習に合わせる。
• キーボード操作(↑↓ 選択、Enter 確定、Esc 閉じる)を壊さない。

状態管理とパフォーマンス

• useState + useEffect の連鎖や props のバケツリレーによる不要な再レンダリングを避ける。状態管理ライブラリや導出状態を適切に使う。
• 早期リターンでネストを浅くする。重い計算・再計算で UI スレッドをブロックしない(進行表示を出す)。
• 開発サーバーが動いている環境で、指示なくプロダクションビルドを実行しない(dev サーバーを壊す)。型チェック・lint で確認する。

日本語入力・実利用のエッジ

• IME での入力途中(composing)に、再レンダリング・自動保存・他ユーザーの更新でフォーカスや入力内容が壊れないか確認する。
• 全角/半角・カタカナ/ひらがな・結合文字など日本語特有の入力揺れを、検索・突合・バリデーションでどう扱うか仕様として確認する。
• 複数タブ・同時編集・リロード・戻る進むで表示が壊れないか(quality-mind の状態整合性観点)を UI 側でも確認する。

完了前

• 実ブラウザ(agent-browser、headless)で対象導線を操作し、スクリーンショットを残す。ブラウザコンソールのエラーを確認し、残っていたら直すか報告する。
• 変更した画面だけでなく、同じコンポーネントを使う他画面へのリグレッションを確認する。