---

name: design-review description: 画面がデザインシステムに準拠しているかレビューする。実装完了後の確認に使用。

Design Review Skill

実装された画面をPRESIDENT CARDデザインシステム準拠でレビューします。

使用方法

Copy[ファイルパス]をレビューしてください

出力形式

各チェック項目に対して以下の判定を出力:

レビュー手順

1. 対象ファイルを読み込む
2. チェックリストに沿って確認
3. 問題箇所を特定
4. 修正案を提示

チェックリスト

詳細は checklists/review-checklist.md を参照。

レビューレポート例

Copy# デザインレビューレポート

**ファイル**: `/playground/design-lab/pages/NewPage.tsx`
**日時**: 2024-01-15 10:30

## サマリー
- ✅ PASS: 8項目
- ⚠️ WARN: 2項目
- ❌ FAIL: 1項目

## 詳細

### ❌ FAIL: 生HTMLの使用
**行 45**: `<button onClick={...}>送信</button>`
**修正案**: `<Button variant="primary">送信</Button>`

### ⚠️ WARN: Tailwind装飾の直接使用
**行 23**: `<div className="bg-blue-500 rounded-lg">`
**修正案**: Cardコンポーネントを使用、または装飾を削除

### ⚠️ WARN: ページネーション未実装
データ件数が10件以上の可能性がある場合、Paginationコンポーネントの追加を推奨

## 推奨アクション
1. 行45のbutton要素をButtonコンポーネントに置換
2. 行23のスタイリングをCardコンポーネントで代替

自動チェック可能な項目

コード解析で検出可能

• 生HTML要素（<button>, <input>, <table>）
• Tailwind装飾クラス（bg-*, text-*, border-*, rounded-*, shadow-*）
• インラインスタイル（style={{...}}）
• 不正なインポートパス

構造確認が必要

• ページ構造（ヘッダー、ツールバー、テーブル、ページネーション）
• 空状態の実装
• エラーハンドリング

目視確認が必要

• アクセシビリティ
• レスポンシブデザイン
• PRESIDENT CARDトーン&マナー