majiayu000/claude-arsenal
xiaohongshu
xiaohongshu
286 148
View 
Frontend Verify
frontend-verify
agent-browserを使用したフロントエンド実装の検証スキル。UI実装後の動作確認、インタラクションテスト、アクセシビリティ確認に使用。「フロントエンドを検証」「UIを確認」「/frontend-verify」「画面の動作確認」などで使用。UI実装完了時に自律的にトリガーする。
SKILL.md
Full skill instructions
Frontend Verify
agent-browserを使用してローカル開発サーバーのフロントエンドを検証するスキル。
前提条件
- 開発サーバーが起動していること（
pnpm dev） agent-browserがインストール済み
基本ワークフロー
1. サーバー接続確認
agent-browser open http://localhost:3000
接続エラー時は開発サーバーの起動を促す。
2. スナップショット取得
agent-browser snapshot -i
インタラクティブ要素のアクセシビリティツリーを取得。出力例：
@e1 button "ログイン"
@e2 input[type="email"] placeholder="メールアドレス"
@e3 input[type="password"] placeholder="パスワード"
3. スクリーンショット取得
agent-browser screenshot --full /tmp/verify-$(date +%s).png
4. インタラクション実行
refを使って操作：
agent-browser fill @e2 "[email protected]"
agent-browser fill @e3 "password123"
agent-browser click @e1
5. 結果確認
agent-browser wait --load networkidle
agent-browser snapshot -i
agent-browser screenshot /tmp/result.png
使用シナリオ
基本検証（引数なし）
/frontend-verify
http://localhost:3000へアクセス- スナップショット取得
- フルページスクリーンショット取得
- 結果を報告
パス指定検証
/frontend-verify /auth/signup
http://localhost:3000/auth/signupへアクセス- スナップショット取得
- スクリーンショット取得
- フォーム要素を特定して報告
インタラクティブ検証
/frontend-verify --interact
- ページへアクセス
- スナップショットから操作可能な要素を特定
- ユーザーに操作シナリオを確認
- シナリオを実行（例：フォーム入力→送信→結果確認）
- 各ステップでスクリーンショット取得
主要コマンド（クイックリファレンス）
| 操作 | コマンド |
|---|---|
| ページ移動 | open <url> |
| スナップショット | snapshot -i |
| スクリーンショット | screenshot [--full] <path> |
| クリック | click <ref> |
| 入力 | fill <ref> <text> |
| 待機 | wait --text "..." / --load networkidle |
| 状態確認 | is visible <ref> |
詳細は references/agent-browser-commands.md を参照。
セッション管理
複数ステップの検証では同一セッションを維持：
export AGENT_BROWSER_SESSION="verify-session"
agent-browser open http://localhost:3000/auth/login
agent-browser fill @e1 "[email protected]"
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実装後は両方を実行することを推奨：
/frontend-verifyで動作確認/ramsでデザイン・アクセシビリティレビュー
More skills from majiayu000
majiayu000/claude-arsenal
technical-spec
technical spec
286 141
View majiayu000/claude-arsenal
product-ux-expert
product ux expert
286 133
View majiayu000/claude-arsenal
database-patterns
database patterns
286 119
View majiayu000/claude-skill-registry
agent-task-conductor
Conduct multi-agent task orchestration and workflow coordination.
663 1
View majiayu000/claude-skill-registry
conductor-setup
Initialize project with Conductor artifacts (product definition,
663 1
View majiayu000/claude-skill-registry
animation-designer
Expert in web animations, transitions, and motion design using Framer Motion and CSS
663 1
View majiayu000/claude-skill-registry
diagramming
Creates Mermaid and ASCII diagrams for flowcharts, architecture, ERDs, state machines, mindmaps, and more. Use when user mentions diagram, flowchart, mermaid, ASCII diagram, text diagram, terminal diagram, visualize, C4, mindmap, architecture diagram, sequence diagram, ERD, or needs visual docume...
663 1
View majiayu000/claude-skill-registry-data
h3-pg
PostgreSQL bindings for H3 hexagonal grid system. Use when working with H3 cells in Postgres, including spatial indexing, geometry/geography integration, and raster analysis.
23 1
View majiayu000/claude-skill-registry
conductor-development
Context-Driven Development skill for projects using Conductor. Use this skill when you detect a `conductor/` directory in the project, when working on tasks defined in a `plan.md` file, or when the user asks about tracks, specs, or plans. Automatically applies TDD workflow, tracks task completion...
663 1
View majiayu000/claude-skill-registry
conductor-status
Display project status, active tracks, and next actions
663 1
View majiayu000/claude-skill-registry
dockerization
Official Stakpak application containerization standard operating procedure, a step-by-step guidline to properly dockerize applications. This is a rule book curated by the Stakpak Team.
663 1
View Popular AI tools
Video
Kaiber
Generate, edit, and beat-sync AI video with leading models in one workspace.
Paid
View Productivity
Vimcal
The world's fastest calendar for remote work
Free
View I
Images
IMGCreator.ai
Transform Your Design with AI Designer by ImgCreator.ai
Freemium
View Content & writing
Akool AI
Revolutionizing Video Production with AI-Powered Creativity
Paid
View Images
Clipdrop Uncrop
Extend an image past the frame and let AI fill the new aspect ratio.
Freemium
View Security
StarByFace
Discover your celebrity doppelgänger with StarByFace!
Free
View C
Finance
ChainClarity
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Freemium
View Coding & apps
Opus Clip
Opus.ai: Revolutionize Your Web Experience
Free
View