無料GitHub で公開

ui-verify

フロントエンドの動作確認。起動中サーバーを自動検出し、Chrome DevTools で操作・デバッグ・パフォーマンス分析を実行。

sean-sunagaku/claude-code-plugin

インストール方法を見る

含まれるファイル（2）

SKILL.md5.9 KB
scripts/detect-app.sh1.3 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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. 起動中アプリの自動検出

# 検出スクリプトを実行して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. レポート出力

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

## 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操作する
操作後は結果を簡潔に報告する

使用例

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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

agent-team

無料

This skill should be used when the user asks to "create a team", "spawn agents", "parallel execution", "delegate tasks to agents", "use a swarm", "team workflow", "split work across agents", "run tasks in parallel", or mentions wanting multiple agents to collaborate on a complex task.

日本語の概要は準備中です。原文の説明を表示しています。