---

name: design-validation description: CSS/UIの変更後にブラウザでビジュアル確認を行う。レイアウト確認、余白チェック、デザイン要件との照合に使用。UIが崩れていないか確認したい時に呼び出す。 allowed-tools: Read, Bash, Grep, Glob

デザイン検証スキル

ZC-CastMenuプロジェクトのUI/CSS変更後の視覚確認を実施します。

確認手順

1. 変更ファイルの特定

Copygit diff --name-only HEAD~1 | grep -E '\.(tsx?|css)$'

2. デザイン要件の確認

docs/要件定義書.md を読んで以下を確認：

• ベースカラー：黒
• メインカラー：青
• アクセントカラー：白
• グリッド：縦3列、横5列

3. ブラウザ確認チェックリスト

ユーザーに以下の確認を依頼：

• ダークテーマ（黒背景）が維持されているか
• レイアウトの余白・間隔が適切か
• 要素同士が重なっていないか
• ヘッダー/フッターの高さが適切か
• グリッド表示が正しいか（縦3列/横5列）
• ホバーエフェクトが機能しているか

4. Tailwind CSS + カスタムプロパティの互換性確認

以下のパターンに注意：

• bg-white などのTailwindクラスがカスタムプロパティを上書きしていないか
• style={{ color: 'var(--xxx)' }} とTailwindクラスの競合

5. 報告フォーマット

確認後、以下の形式で報告：

Copy## デザイン検証結果

### 確認ページ
- URL: http://localhost:3000/xxx

### 結果
- ダークテーマ: OK / NG
- レイアウト余白: OK / NG
- グリッド表示: OK / NG

### 問題点（あれば）
- 詳細を記載