Synthèse automatique
Cette compétence standardise la vérification du comportement des applications web via Chrome MCP, en allant au-delà de la simple inspection visuelle pour inclure des tests opérationnels complets.
Points forts
- Procédure structurée couvrant l'affichage, les opérations CRUD et les appels réseau
- Vérification obligatoire du viewport mobile pour les modifications UI
- Détection des erreurs console et échecs réseau
- Gestion des cas de données existantes pour éviter les faux positifs
Limites
- Nécessite l'extension Chrome MCP installée et active
- Impossible de paralléliser les vérifications avec des sous-agents
- Dépend de ports spécifiques (1357, 2460) qui peuvent varier
Utilisez cette compétence lorsque vous devez valider visuellement et fonctionnellement des modifications UI ou de nouvelles fonctionnalités dans une application web.
Évitez cette compétence pour les tests unitaires, les modifications backend uniquement, ou lorsque Chrome MCP n'est pas disponible.
Analyse de sécurité
SûrUses Chrome MCP tools for legitimate browser testing; no destructive or exfiltrating actions.
Aucun point d'attention détecté
Comment cette analyse est faiteExemples
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のアクセス権がない。ブラウザ確認は並列化できない
Du fichier au premier essai
Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.
Consulter la source et ses fichiers annexesCe téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.
1. Télécharger le fichier
Télécharger SKILL.mdDepuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/standardized-browser-testing-with-chrome-mcp-mm78nmra/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.
Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.
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. Vérifier les prérequis
Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.
Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.
Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.
3. Charger la skill
Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.
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 doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.
Installation officielle d’OpenSkillsopenskills install './.skill-downloads/standardized-browser-testing-with-chrome-mcp-mm78nmra'openskills read 'standardized-browser-testing-with-chrome-mcp-mm78nmra'La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.
Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.
openskills syncMode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.
4. Faire un premier essai
Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :
Lis .skill-downloads/standardized-browser-testing-with-chrome-mcp-mm78nmra/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.
Comparaison de performances ClickHouse
Testing
Évaluez les résultats de tests de performance ClickHouse, analysez les régressions de PR, comparez avec l'historique et vérifiez la fiabilité des mesures.
Analyse des rapports de performance CI
Testing
Analyse les rapports de comparaison de performance CI pour une PR ClickHouse. Recoupe l'historique master pour distinguer les vraies régressions des tests instables.
Méthode Santa
Testing
Vérification adversarial multi-agents avec deux réviseurs indépendants. La sortie est vérifiée deux fois et corrigée itérativement jusqu'à ce que les deux acceptent avant publication.