Agent skill

frontend-verify

agent-browserを使用したフロントエンド実装の検証スキル。UI実装後の動作確認、インタラクションテスト、アクセシビリティ確認に使用。「フロントエンドを検証」「UIを確認」「/frontend-verify」「画面の動作確認」などで使用。UI実装完了時に自律的にトリガーする。

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/frontend-verify

SKILL.md

Frontend Verify

agent-browserを使用してローカル開発サーバーのフロントエンドを検証するスキル。

前提条件

  • 開発サーバーが起動していること（pnpm dev）
  • agent-browser がインストール済み

基本ワークフロー

1. サーバー接続確認

bash
agent-browser open http://localhost:3000

接続エラー時は開発サーバーの起動を促す。

2. スナップショット取得

bash
agent-browser snapshot -i

インタラクティブ要素のアクセシビリティツリーを取得。出力例：

@e1 button "ログイン"
@e2 input[type="email"] placeholder="メールアドレス"
@e3 input[type="password"] placeholder="パスワード"

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

bash
agent-browser screenshot --full /tmp/verify-$(date +%s).png

4. インタラクション実行

refを使って操作：

bash
agent-browser fill @e2 "test@example.com"
agent-browser fill @e3 "password123"
agent-browser click @e1

5. 結果確認

bash
agent-browser wait --load networkidle
agent-browser snapshot -i
agent-browser screenshot /tmp/result.png

使用シナリオ

基本検証（引数なし）

/frontend-verify
  1. http://localhost:3000 へアクセス
  2. スナップショット取得
  3. フルページスクリーンショット取得
  4. 結果を報告

パス指定検証

/frontend-verify /auth/signup
  1. http://localhost:3000/auth/signup へアクセス
  2. スナップショット取得
  3. スクリーンショット取得
  4. フォーム要素を特定して報告

インタラクティブ検証

/frontend-verify --interact
  1. ページへアクセス
  2. スナップショットから操作可能な要素を特定
  3. ユーザーに操作シナリオを確認
  4. シナリオを実行（例：フォーム入力→送信→結果確認）
  5. 各ステップでスクリーンショット取得

主要コマンド（クイックリファレンス）

操作 コマンド
ページ移動 open <url>
スナップショット snapshot -i
スクリーンショット screenshot [--full] <path>
クリック click <ref>
入力 fill <ref> <text>
待機 wait --text "..." / --load networkidle
状態確認 is visible <ref>

詳細は references/agent-browser-commands.md を参照。

セッション管理

複数ステップの検証では同一セッションを維持：

bash
export AGENT_BROWSER_SESSION="verify-session"
agent-browser open http://localhost:3000/auth/login
agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password"
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser snapshot -i  # ログイン後の状態を確認

エラーハンドリング

エラー 対応
接続エラー 「開発サーバーを起動してください: pnpm dev」
要素が見つからない スナップショットを再取得してrefを確認
タイムアウト wait コマンドで明示的に待機

/rams との使い分け

スキル 用途
/frontend-verify 詳細な動作検証、インタラクションテスト、デバッグ
/rams アクセシビリティ・ビジュアルデザインのレビュー

UI実装後は両方を実行することを推奨：

  1. /frontend-verify で動作確認
  2. /rams でデザイン・アクセシビリティレビュー

Didn't find tool you were looking for?

Be as detailed as possible for better results