npx claudepluginhub sean-sunagaku/claude-code-plugin --plugin ui-verifyThis skill is limited to using the following tools:
$ARGUMENTS
Runs adversarial UI tests in browser via browse CLI. Analyzes git diffs for changes or explores full app. Verifies functional correctness, accessibility, responsive layout, UX heuristics.
Opens running app in browser to verify recent UI changes work, checking functionality, forms, mobile view, console errors, and network requests. Use for smoke tests and sanity checks after UI work.
Tests local web applications using Playwright: verifies frontend functionality, debugs UI behavior, captures screenshots, views logs. Mandatory before declaring implementation complete.
Share bugs, ideas, or general feedback.
$ARGUMENTS
このスキルは以下の手順を自動的に実行する：
引数なしで実行された場合、直近の変更内容からテスト対象を自動判定する：
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 テキストの表示確認引数ありの場合はその指示に従う。
# 検出スクリプトを実行してURLを取得
.claude/skills/ui-verify/scripts/detect-app.sh
スクリプトが返すURLを使用してブラウザで開く。
特定したテスト対象に対して、以下のパターンでテストを実行する：
take_snapshot で DOM 要素を確認take_screenshot でビジュアル確認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 で確認list_network_requests で確認get_network_request でリクエスト/レスポンス詳細を検証list_console_messages でエラー・警告を確認テスト結果を以下の形式で報告する：
## 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 - ビューポートサイズ変更detect-app.sh でローカルアプリのURLを検出するpnpm dev の実行を促すtake_snapshot で要素の存在を確認するevaluate_script で直接DOM操作する/ui-verify # git diff / Plan から自動判定してテスト
/ui-verify ペルソナ作成を確認 # 特定機能のテスト
/ui-verify ブレスト画面を確認 # 特定画面のテスト
/ui-verify コンソールエラーを調査 # エラーログの調査
/ui-verify パフォーマンス計測 # Core Web Vitals の計測