UI Verify - 動作確認スキル

$ARGUMENTS

自動実行フロー

このスキルは以下の手順を自動的に実行する：

1. テスト対象の特定

引数なしで実行された場合、直近の変更内容からテスト対象を自動判定する：

•git diff --name-only HEAD でワーキングツリーの変更ファイル一覧を取得
•git diff --name-only HEAD~5..HEAD で直近5コミットの変更ファイル一覧を取得
•docs/plans/ 配下の Plan ファイルを読み、実装された機能の概要を把握
•変更されたフロントエンドファイル (packages/web/) を分析し、影響する画面・コンポーネントを特定
•変更されたバックエンドファイル (packages/server/src/routes/) から新規・変更APIエンドポイントを特定

判定ロジック:

•packages/web/components/ の変更 → 該当コンポーネントが使われている画面を特定して操作テスト
•packages/web/hooks/ の変更 → 該当 hook が使われている画面でデータ取得・更新をテスト
•packages/server/src/routes/ の変更 → 該当APIのネットワークリクエストを確認
•packages/web/messages/ の変更 → i18n テキストの表示確認

引数ありの場合はその指示に従う。

2. 起動中アプリの自動検出

bash

# 検出スクリプトを実行してURLを取得
.claude/skills/ui-verify/scripts/detect-app.sh

スクリプトが返すURLを使用してブラウザで開く。

3. テスト実行

特定したテスト対象に対して、以下のパターンでテストを実行する：

パターン A: 画面表示テスト

•対象画面にナビゲート
•take_snapshot で DOM 要素を確認
•take_screenshot でビジュアル確認
•期待する要素が存在するか検証

パターン B: ユーザー操作テスト

•ボタン/リンクのクリック、フォーム入力などの操作を実行

•注意: ポップオーバーが閉じやすい場合は evaluate_script で直接DOM操作する

() => {
  const btns = document.querySelectorAll('button');
  for (const b of btns) { if (b.textContent.includes('対象テキスト')) { b.click(); return 'ok'; } }
  return 'not found';
}

•操作後の状態変化を take_snapshot / take_screenshot で確認

パターン C: API連携テスト

•操作によって発火するAPIリクエストを list_network_requests で確認
•get_network_request でリクエスト/レスポンス詳細を検証
•ステータスコード、レスポンスボディの正しさを確認

パターン D: エラー確認

•list_console_messages でエラー・警告を確認
•
既知の問題を除外:
- •404 (既存のリソース問題)
- •CSS preload warning (既存)
•新しいエラーがあれば報告

4. レポート出力

テスト結果を以下の形式で報告する：

code

## UI Verification Report

### テスト対象
- 変更の概要（Plan / git diff から）

### テスト結果
| テスト | 結果 | 詳細 |
|--------|------|------|
| 画面表示 | OK/NG | ... |
| 操作テスト | OK/NG | ... |
| API連携 | OK/NG | ... |
| エラー確認 | OK/NG | ... |

### スクリーンショット
（必要に応じて撮影済み）

### 発見した問題
- （あれば記載）

ポート設定

環境	Web (Next.js)	API (Hono)
デフォルト	2626	2627
Worktree 1	2628	2629
Worktree 2	2630	2631

利用可能な操作

ブラウザ操作

•click - 要素クリック (uid で指定)
•fill - テキスト入力
•fill_form - フォーム入力
•press_key - キー入力 (Enter, Escape など)
•hover - ホバー
•navigate_page - URL に移動
•wait_for - テキスト出現を待機

状態確認

•take_snapshot - DOM スナップショット（要素の uid を取得）
•take_screenshot - スクリーンショット撮影
•list_pages - 開いているページ一覧

デバッグ

•list_console_messages - コンソールログ一覧
•get_console_message - 特定のログ詳細
•list_network_requests - ネットワークリクエスト一覧
•get_network_request - 特定のリクエスト詳細
•evaluate_script - JavaScript 実行

パフォーマンス

•performance_start_trace - トレース開始
•performance_stop_trace - トレース終了
•performance_analyze_insight - Core Web Vitals 分析

エミュレーション

•emulate - ダークモード、ネットワーク速度、CPU スロットリング
•resize_page - ビューポートサイズ変更

重要なルール

•example.com や仮のURLは絶対に使用しない
•必ず detect-app.sh でローカルアプリのURLを検出する
•アプリが起動していない場合はユーザーに pnpm dev の実行を促す
•テスト対象は git diff / Plan ファイルから動的に判断する
•操作前に take_snapshot で要素の存在を確認する
•ポップオーバーが閉じやすい場合は evaluate_script で直接DOM操作する
•操作後は結果を簡潔に報告する

使用例

code

/ui-verify                           # git diff / Plan から自動判定してテスト
/ui-verify ペルソナ作成を確認        # 特定機能のテスト
/ui-verify ブレスト画面を確認        # 特定画面のテスト
/ui-verify コンソールエラーを調査    # エラーログの調査
/ui-verify パフォーマンス計測        # Core Web Vitals の計測