21st-ui-review

エビデンスに基づく UI レビュー

確定的な不具合と主観的なデザイン提案を分けます。

ワークフロー

1. .21st/design.json、プロジェクトの指示、関連するソースを読みます。

2. まず確定的なレビューを実行します。

   21st review <path>
   21st review <path> --json
   

3. 実際のコンポーネント構成と実行時の状態を確認します。名前から動作を推測せず、コードに照らして指摘を検証します。

4. 指摘を次のカテゴリに分類します。

   • 確定的な不具合
   • デザインシステムからの逸脱
   • アクセシビリティと操作性の不具合
   • レスポンシブ対応のリスク
   • 主観的なプロダクト／デザインの提案

5. ユーザーへの影響に基づいて優先順位を付け、正確なファイル名と行番号を示します。

6. 21st review <path> --fix は、確定的で曖昧さの少ない修正にのみ使用します。暗黙のうちに再デザインしたり、ブランドアイデンティティを変更したり、プロダクトの動作を変更したりしてはいけません。

7. 修正後に関連するプロジェクトのテストを実行し、レビューを再実行して問題が解消されたことを確認します。

レビューの優先事項

• セマンティックなコントロールとアクセシブルな名前
• キーボード操作、フォーカスの視認性、ダイアログ／メニューの動作
• 画像の代替テキストと意味のあるラベル
• タッチターゲットのサイズと、無効状態／読み込み状態
• レスポンシブ時のはみ出しと固定幅を前提とした設計
• 動きを減らす設定への対応
• プロジェクトのトークンと競合するハードコードされた視覚的な値
• 既存のコンポーネントの代わりに重複したプリミティブを使用していないか
• タイポグラフィ、角丸、余白、シャドウ、アイコンの不統一
• ダミーデータ、プレースホルダーの文言、空状態／エラー状態の欠落

出力

重大度の高い順に、対応可能な指摘から記載します。主観的な提案には明確なラベルを付けます。問題が確認されない場合は、その旨を述べ、何を確認したかを記載します。