# Design Validation

> Design Validation

- Skill: `majiayu000/design-validation-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/design-validation-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/design-validation-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/design-validation-2

---


# デザイン検証スキル

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

## 確認手順

### 1. 変更ファイルの特定
```bash
git 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. 報告フォーマット

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

```
## デザイン検証結果

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

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

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