Browser Testing With Devtools
Chrome DevTools MCP を介して実際のブラウザでテストを実行します。ブラウザで動作するものの構築やデバッグ時に使用します。DOM の検査、コンソールエラーのキャプチャ、ネットワークリクエストの分析、パフォーマンスのプロファイリング、または実際のランタイムデータによる視覚的出力の検証が必要な場合に使用してください。chrome-devtools MCP サーバーの設定が必要です。
概要
Chrome DevTools MCP を使用して、エージェントにブラウザ内を確認する機能を提供します。これにより、静的コード解析と実際のブラウザ実行の間のギャップを埋めることができます。エージェントはユーザーが見ているものを確認し、DOM を検査し、コンソールログを読み取り、ネットワークリクエストを分析し、パフォーマンスデータを取得できます。実行時に何が起きているかを推測するのではなく、実際に検証してください。
ユースケース
導入方法
# Review source first
open https://github.com/addyosmani/agent-skills/blob/main/skills/browser-testing-with-devtools/SKILL.md確認済みのスキルフォルダを、互換性のあるエージェントが使用する skills ディレクトリにコピーしてください。
セキュリティ
AIToolly は公開されたソース構造とライセンスを自動的に検証しました。ワークスペース、コマンド、またはネットワークへのアクセスを許可する前に、addyosmani/agent-skills と同梱のスクリプトを再度確認してください。
関連Skills
MCP Builder
anthropics/skills
適切に設計されたツールを通じて、LLMが外部サービスと連携できるようにする高品質な MCP (Model Context Protocol) サーバーを作成するためのガイドです。Python (FastMCP) または Node/TypeScript (MCP SDK) を使用して、外部APIやサービスを統合する MCP サーバーを構築する際に使用します。
Claude API
anthropics/skills
Claude API / Anthropic SDK のリファレンス — model ids、pricing、params、streaming、tool use、MCP、agents、caching、token counting、model migration。 TRIGGER — 対象ファイルを開くBEFORE読むこと。「1行のように見える」からといってスキップしないこと — プロンプトが何らかの形式でClaude/Anthropic（Claude、Anthropic、Fable、Opus、Sonnet、Haiku、`anthropic`、`@anthropic-ai`、`claude-*`、`us.anthropic.*`、`[1m]`）を指定している場合、またはユーザーがLLM（pricing/model choice/limits/caching）について尋ねている場合は常に — 決して回答しない
Skill Creator
anthropics/skills
新しいスキルの作成、既存スキルの修正と改善、およびスキルパフォーマンスの測定を行います。ユーザーがスキルをゼロから作成、既存スキルの編集や最適化、スキルテストのための評価（evals）の実行、分散分析によるスキルパフォーマンスのベンチマーク、またはトリガー精度の向上のためのスキル説明の最適化を行いたい場合に使用します。
API And Interface Design
addyosmani/agent-skills
安定した API とインターフェース設計をガイドします。API、モジュール境界、またはパブリックインターフェースの設計時に使用します。REST や GraphQL エンドポイントの作成、モジュール間の型コントラクトの定義、フロントエンドとバックエンドの境界設定を行う際に活用してください。
Windows Builder
hashicorp/agent-skills
WinRM communicatorとPowerShell provisionersを使用して、PackerでWindowsイメージを構築します。Windows AMI、Azureイメージ、またはVMwareテンプレートを作成する際に使用します。