메뉴
Test and verify local web applications using browser automation. Triggers: 「ブラウザでテスト」「UIの動作確認」「スクリーンショット」「実際に動かして確認」 Use when: Verifying frontend functionality, debugging UI behavior, capturing screenshots. Uses AntiGravity's browser_subagent for browser interaction.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | webapp-testing |
| description | Test and verify local web applications using browser automation. Triggers: 「ブラウザでテスト」「UIの動作確認」「スクリーンショット」「実際に動かして確認」 Use when: Verifying frontend functionality, debugging UI behavior, capturing screenshots. Uses AntiGravity's browser_subagent for browser interaction. |
ブラウザ自動化を使用してローカルWebアプリケーションをテスト・検証するスキル。
[!NOTE] エージェントによって使用するツールが異なります:
- AntiGravity:
browser_subagent(内蔵ツール)- Claude Code:
playwright(MCPツール)[!WARNING] このスキルはAntiGravityの
browser_subagentに最適化されています。Claude Codeで使用する場合は、browser_subagentツールが利用できないため、手動でplaywrightMCPツールを呼び出す必要があります。自動実行は失敗する可能性があります。
タスク → 静的HTML?
├─ Yes → HTMLファイルを直接読んでセレクタを特定
│ └─ browser_subagent / Playwright MCP
│
└─ No (動的Webapp) → サーバーが起動している?
├─ No → run_commandでサーバーを起動
│ → browser_subagent / Playwright MCP
│
└─ Yes → Reconnaissance-then-action
browser_subagent ツールを呼び出す際のタスク記述例:
1. http://localhost:<port> にアクセス
2. ページのロードを待つ
3. [対象要素]が表示されていることを確認
4. スクリーンショットを撮影
5. 結果を報告
Claude Codeでは、Playwright MCPサーバーを使用してブラウザ操作を行います。
必要に応じてPlaywrightブラウザをインストール:
npx playwright install --with-deps chromium
主要ツール:
playwright_navigate: ページ遷移playwright_click: 要素のクリックplaywright_fill: フォーム入力playwright_evaluate: JS実行playwright_screenshot: スクリーンショットテストコードを作成する場合の推奨パターン:
// pages/LoginPage.ts
export class LoginPage {
constructor(private page: Page) {}
get emailInput() { return this.page.getByLabel('Email'); }
get loginButton() { return this.page.getByRole('button', { name: 'Login' }); }
async login(email: string) {
await this.emailInput.fill(email);
await this.loginButton.click();
}
}
playwright_navigate(url="http://localhost:3000")playwright_screenshot でページ状態を確認playwright_click(selector="text=Login")重要: 動的アプリでは、DOM検査の前にページの完全なロードを待つこと。
run_command で行い、バックグラウンドで実行browser_subagent のタスク記述は具体的かつ明確にするtext=, role=, aria属性）React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Guide users through a structured workflow for co-authoring documentation. Triggers: 「ドキュメントを書いて」「仕様書を作成」「READMEを更新」「提案書を作って」「PRD」「設計ドキュメント」 Use when: Writing documentation, proposals, technical specs, decision docs, or similar structured content. Workflow: Context Gathering → Refinement & Structure → Reader Testing
Analyze and fix failing E2E tests. Includes CI auto-repair mode for GitHub Actions failures. Triggers: 「テストが失敗」「CIが落ちている」「テストをデバッグ」「test failed」「flaky test」 Use when: E2E tests are failing, tests are flaky/unstable, error messages need investigation. Outputs: Fixed Page Object and spec files, error analysis reports.
Create new E2E tests using Playwright with Page Object Model pattern and semantic locators. Triggers: 「E2Eテストを書いて」「テストを作成して」「新機能のテストが必要」「E2E test」「create test」 Use when: Creating E2E tests for new pages or components, after implementing new features. Outputs: Page Object files (frontend/e2e/pages/) and spec files (frontend/e2e/*.spec.ts)
Guide for creating MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Triggers: 「MCPサーバーを作成」「外部API連携」「ツール統合」「MCP開発」 Use when: Building MCP servers to integrate external APIs or services. Recommended stack: TypeScript + MCP SDK
Master Next.js 16+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.