Profile My skills Saved Collections Edit profile Submit a skill

Design Validation

Design Validation

majiayu000 d749b41 2 files · 2.3 KB Updated 567 repo stars
Coding & Dev Tools

File contents

デザイン検証スキル

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

確認手順

1. 変更ファイルの特定

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

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

majiayu000/claude-skill-registry-data/tree/main/design/design-validation-amattas-agentic-coding commit d749b41236

Browse category

Frequently asked questions

npx skillmds add majiayu000/design-validation-2