Automated summary
This skill standardizes browser behavior verification using Chrome MCP, going beyond visual inspection to include comprehensive operational testing.
Strengths
- Structured procedure covering display, CRUD operations, and network calls
- Mandatory mobile viewport check for UI changes
- Console error and network failure detection
- Handling of existing data scenarios to avoid false positives
Limitations
- Requires Chrome MCP extension installed and active
- Cannot parallelize checks with sub-agents
- Relies on specific ports (1357, 2460) that may vary
Use this skill when you need to visually and functionally validate UI changes or new features in a web application.
Avoid this skill for unit tests, backend-only changes, or when Chrome MCP is unavailable.
Security analysis
SafeUses Chrome MCP tools for legitimate browser testing; no destructive or exfiltrating actions.
No concerns found
How this analysis is madeExamples
Run a browser check on the frontend at port 1357. Verify the page loads, check for console errors, test the create/edit/delete flows, and also check mobile viewport at 375px width.Perform a browser verification on frontend-v2 at port 2460. Ensure the main page renders correctly, all CRUD operations work, and network requests succeed.Check the responsive layout on the frontend at port 1357. Resize to 375x812 and take screenshots of the header, modal, and form button visibility.name: browser-check description: Chrome MCPでブラウザ動作確認を標準化された手順で実施する。 user_invocable: true
ブラウザ動作確認
Chrome MCPを使った動作確認の標準手順。「表示されている」だけでなく「操作が正しく動く」まで検証する。
手順
Step 1: 対象アプリのポート確認
確認対象のvite.config.tsを読んでポートを特定する。推測しない。
| アプリ | ポート | |--------|--------| | frontend (v1) | 1357 | | frontend-v2 | 2460 | | backend API | 3456 |
Step 2: Chrome MCP接続
1. mcp__claude-in-chrome__tabs_context_mcp で現在のタブ情報を取得
2. 接続失敗時はユーザーに「Chrome拡張の再接続をお願いします」と依頼
3. mcp__claude-in-chrome__tabs_create_mcp で新しいタブを作成
4. mcp__claude-in-chrome__navigate で対象URLにアクセス
Step 3: ページ表示確認
1. mcp__claude-in-chrome__computer action=screenshot でスクリーンショット取得
2. mcp__claude-in-chrome__read_page で要素の存在を確認
3. mcp__claude-in-chrome__read_console_messages pattern="error|Error|ERR" でコンソールエラーチェック
Step 3.5: モバイルビューポート確認（UI変更時は必須）
UI変更を含む場合、375px幅でのレイアウトを確認する:
mcp__claude-in-chrome__resize_windowで幅375px、高さ812pxにリサイズ- スクリーンショットで表示確認
- 特に注意: ヘッダの中央寄せ、モーダル表示位置、フォームボタンの可視性、
autoFocusによるキーボード占有
Step 4: 操作検証（これが重要）
「表示されている」だけでは動作確認とは言えない。以下を実施する:
- 作成フロー: ボタンクリック → フォーム入力 → 送信 → 結果表示を確認
- 編集フロー: 既存データの編集 → 保存 → 反映を確認
- 削除フロー: 削除ボタン → 確認UI表示 → 実行 → 一覧から消えることを確認
- ネットワーク確認:
mcp__claude-in-chrome__read_network_requestsでAPIコールの成否を確認
Step 5: 結果報告
各ページ/フローごとに以下を報告:
- スクリーンショット（成功時）
- コンソールエラーの有無
- ネットワークリクエストの成否
- 操作検証の結果
Step 4補足: 空データだけで確認しない
- 新規ユーザー（データ0件）だけでなく、既存データがある状態でも確認する
- 特にグラフ・統計・プログレス表示は、データがないと正常に見えてバグを見逃す
- フォーム系は送信まで確認する（表示されている≠動く）
注意事項
- ポートを間違えない（v1: 1357, v2: 2460）。必ずStep 1で確認する
- 小さい要素はzoomで拡大して確認する
- フォーム送信ボタンのクリックが効かない場合はEnterキーで代替
- confirm()は使っていないはずだが、もし出たらセッションがブロックされるので注意
- サブエージェントにはChrome MCPのアクセス権がない。ブラウザ確認は並列化できない
From the file to a first result
The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.
View the source and supporting filesThis download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.
1. Download the file
Download SKILL.mdFrom the root of a test project, save the file as .skill-downloads/standardized-browser-testing-with-chrome-mcp-mm78nmra/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.
Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.
mkdir -p '.skill-downloads/standardized-browser-testing-with-chrome-mcp-mm78nmra' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/standardized-browser-testing-with-chrome-mcp-mm78nmra/download' --output '.skill-downloads/standardized-browser-testing-with-chrome-mcp-mm78nmra/SKILL.md.part' && mv '.skill-downloads/standardized-browser-testing-with-chrome-mcp-mm78nmra/SKILL.md.part' '.skill-downloads/standardized-browser-testing-with-chrome-mcp-mm78nmra/SKILL.md'2. Check prerequisites
Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.
No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.
The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.
3. Load the skill
After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.
Claude Code
test -f '.skill-downloads/standardized-browser-testing-with-chrome-mcp-mm78nmra/SKILL.md' && test -s '.skill-downloads/standardized-browser-testing-with-chrome-mcp-mm78nmra/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/browser-check' && cp -R '.skill-downloads/standardized-browser-testing-with-chrome-mcp-mm78nmra' '.claude/skills/browser-check'OpenSkills
OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.
Official OpenSkills installationopenskills install './.skill-downloads/standardized-browser-testing-with-chrome-mcp-mm78nmra'openskills read 'standardized-browser-testing-with-chrome-mcp-mm78nmra'Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.
For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.
openskills syncManual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.
4. Try a first task
Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:
Read .skill-downloads/standardized-browser-testing-with-chrome-mcp-mm78nmra/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.
ClickHouse Performance Comparison
Testing
Evaluate ClickHouse performance test results, check PR performance changes, compare with history, and assess whether a result is actionable.
Analyze CI Performance Reports
Testing
Analyze CI performance comparison reports for a ClickHouse PR. Cross-references master history to distinguish real regressions from flaky tests.
Santa Method
Testing
Multi-agent adversarial verification with two independent reviewers. Output is checked twice and iteratively fixed until both pass before shipping.