interface-craft

インターフェースの仕上げ

装飾で磨きをかけるのではなく、UI に意図が感じられるようにするために、このスキルを使用します。

モードを判断する

• Build：UI の実装時に、適切な仕上げの詳細を加えます。
• Polish：既存の UI を直接改善し、影響の大きい変更点を説明します。
• Review：依頼がない限り編集せず、ファイルと行番号の根拠を添えて簡潔な指摘を示します。

ユーザーの意図が曖昧な場合、既存コードには Review を、新しい UI には Build を選びます。

ワークフロー

1. 対象の領域を特定します：フォーム、ボタン、ナビゲーション、読み込み状態、空の状態、コンテンツ表示、モーション、またはプラットフォームのシェル。
2. references/interface-craft-rules.md を読み、関連するセクションだけを確認します。
3. 詳細を提案する前に、抑制の基準を適用します。
4. Build／Polish モードでは、関連する画面全体に一貫性のある最小限の改善を実装します。
5. Review モードでは、影響の大きい指摘を少数に絞って優先順位を付け、依頼された状態をすべて確認したうえで、最小限の実装計画を提示します。

ガードレール

次の質問にすべて「はい」と答えられない場合は、その詳細を省きます。

• ユーザーがタスクを完了したり、内容を理解したりするのに役立ちますか？
• キーボード、スクリーンリーダー、タッチ操作、および動きを減らす設定への対応を維持できますか？
• プロダクトの既存のシステムと一貫していますか？
• 操作が頻繁な場合、効果をより控えめにできますか？
• 改善点を、観察可能な言葉で説明できますか？

出力形式

P0 — path/to/File.tsx:42 — ic-form-1
Issue: Label is visually present but not programmatically associated with the input.
Fix: connect label and input with htmlFor/id or wrap the input in the label.

Implementation plan:
1. Fix P0 accessibility and state blockers first.
2. Add loading/error/success/focus/reduced-motion tests or stories.
3. Apply the same pattern to sibling controls only after the first surface is verified.

レビューの指摘は、重要度の高いものに絞ります。見た目だけの指摘を20件挙げるより、重要な修正を3〜6件提示してください。チェックアウト／決済画面では、プロンプトに該当する状態が含まれている場合、無効状態、読み込み中、二重送信、エラー、成功、フォーカス、モバイルでのタッチターゲット、動きを減らす設定への対応を必ず取り上げてください。

使用しない場合

• 依頼された成果物がインターフェースの実装、磨き込み、またはレビューではない場合、ブランドアイデンティティの考案、デザインシステム全体の抽出、正式なアクセシビリティ適合性の認定には使用しないでください。
• 関連するコード、スクリーンショット、または操作状態を確認せずに、ファイル単位の指摘をしないでください。その場合は、根拠が不足していることを伝え、代わりに確認計画を提示してください。