---

name: visual-qa description: 実装画面のスクリーンショットを取得し視覚的に確認する。デザイン検証、Figma比較時に使用。

Visual QA Skill

ブラウザ自動化（Claude in Chrome MCP）を使用して、実装された画面のスクリーンショットを取得し、視覚的にデザインを確認します。

前提条件

• Claude in Chrome拡張機能が有効
• 開発サーバーが起動中（npm run dev）

ワークフロー

1. サーバー起動確認

Copy# サーバーが起動しているか確認
curl -s -o /dev/null -w "%{http_code}" http://localhost:5000

# 起動していない場合
npm run dev

2. ブラウザでタブを取得

Copymcp__claude-in-chrome__tabs_context_mcp

3. 画面にアクセス

Copymcp__claude-in-chrome__navigate
  url: "http://localhost:5000/#/[path]"
  tabId: [取得したtabId]

4. スクリーンショット取得

Copymcp__claude-in-chrome__computer
  action: "screenshot"
  tabId: [tabId]

5. 特定領域を拡大確認（オプション）

Copymcp__claude-in-chrome__computer
  action: "zoom"
  region: [x0, y0, x1, y1]
  tabId: [tabId]

確認ポイント

レイアウト

• ヘッダーの位置とサイズ
• サイドバーの幅
• コンテンツエリアの余白
• グリッドの配置

タイポグラフィ

• タイトルのフォントサイズ（text-2xl）
• 本文のフォントサイズ（text-sm）
• フォントウェイト（bold, medium）

カラー

• プライマリカラーの適用
• テキストカラー（text-primary, text-secondary）
• ボーダーカラー（border-line）
• 背景色（bg-white-00, bg-grey-05）

コンポーネント

• Buttonのvariant表示
• Chipのvariant表示
• Tableの列幅
• Inputのサイズ

インタラクション

• ホバー状態の確認
• フォーカス状態の確認
• 選択状態の確認

Figma比較手順

1. Figmaデザインのスクリーンショットを取得
2. 実装画面のスクリーンショットを取得
3. 以下の点を比較:
   • 余白（padding, margin）
   • フォントサイズ
   • カラー
   • アイコンサイズ
   • ボーダー半径

レポート出力例

Copy# Visual QA レポート

**画面**: カード一覧
**URL**: http://localhost:5000/#/cards
**日時**: 2024-01-15 10:30

## スクリーンショット
[screenshot]

## 確認結果

### ✅ 問題なし
- ヘッダーレイアウト
- サイドバー表示
- テーブル構造

### ⚠️ 要確認
- ボタン間隔がFigmaより広い（gap-4 → gap-2推奨）
- Chip文字サイズがやや大きい

### ❌ 修正必要
- ページネーションの位置ずれ

GIF録画（マルチステップ操作の記録）

操作フローを記録する場合:

Copy# 録画開始
mcp__claude-in-chrome__gif_creator
  action: "start_recording"
  tabId: [tabId]

# 操作を実行...

# 録画停止
mcp__claude-in-chrome__gif_creator
  action: "stop_recording"
  tabId: [tabId]

# GIF出力
mcp__claude-in-chrome__gif_creator
  action: "export"
  download: true
  filename: "card-list-flow.gif"
  tabId: [tabId]

トラブルシューティング

サーバーに接続できない

Copy# ポート確認
lsof -i :5000

# 別ポートで起動している可能性
lsof -i :5001

画面が真っ白

• ルーティングを確認（/#/ハッシュルーティング）
• コンソールエラーを確認

スクリーンショットが取得できない

• タブIDが正しいか確認
• tabs_context_mcpで最新のタブ情報を取得