Browser Trace
Capture a full DevTools-protocol trace of any browser automation — CDP firehose, screenshots, and DOM dumps — then bisect the stream into per-page searchable buckets. Use when the user wants to debug a failed run, audit network/console/DOM activity, attach a trace to an in-progress session, or feed structured per-page
概要
Browser Trace is a specialized utility for AI agents, part of the mxyhi/ok-skills repository. It enables comprehensive monitoring of browser automation by capturing full DevTools-protocol traces. The tool records a Chrome DevTools Protocol (CDP) firehose, including screenshots and DOM dumps, which it then organizes into searchable, page-specific buckets. This functionality allows developers to audit network activity, console logs, and DOM states across different session stages. Compatible with agents like Claude, Cursor, and Codex, it provides structured data for debugging failed automation runs or auditing in-progress sessions. By bisecting the data stream, it simplifies the analysis of complex web interactions, making it easier to feed per-page context back into AI models for more accurate troubleshooting.
ユースケース
導入方法
# Review source first
open https://github.com/mxyhi/ok-skills/blob/main/browser-trace/SKILL.mdCopy or clone the skill folder into your agent skills directory after reviewing its instructions and scripts.
セキュリティ
Users should be aware that capturing full DevTools-protocol traces, including DOM dumps and screenshots, may record sensitive information visible during the browser session. Access to the resulting data buckets should be restricted to authorized users to prevent exposure of credentials or private data captured during the automation process.
関連Skills
Claude API
anthropics/skills
Claude API / Anthropic SDK のリファレンス — モデルID、料金、パラメータ、ストリーミング、ツール利用、MCP、エージェント、キャッシュ、トークン計測、モデル移行。 TRIGGER — ターゲットファイルを開いて BEFORE を読んでください。「1行だけに見える」という理由でスキップしないでください。プロンプトに Claude/Anthropic の名称(Claude, Anthropic, Fable, Opus, Sonnet, Haiku, `anthropic`, `@anthropic-ai`, `claude-*`, `us.anthropic.*`, `[1m]`)が含まれる場合、またはユーザーが LLM(料金/モデル選択/制限/キャッシュ)について質問した場合は、常に実行してください。決して回答しないでください。
Doc Coauthoring
anthropics/skills
ドキュメントの共同執筆のための構造化されたワークフローをユーザーに案内します。ユーザーがドキュメント、提案書、技術仕様書、決定文書、または同様の構造化されたコンテンツを作成したい場合に使用します。このワークフローは、ユーザーがコンテキストを効率的に伝達し、反復を通じて内容を洗練させ、ドキュメントが読者にとって適切に機能することを確認するのに役立ちます。ユーザーがドキュメントの作成、提案書の作成、仕様書のドラフト作成、または同様のドキュメント作成タスクに言及したときにトリガーします。
MCP Builder
anthropics/skills
適切に設計されたツールを通じて、LLMが外部サービスと連携できるようにする高品質な MCP (Model Context Protocol) サーバーを作成するためのガイドです。Python (FastMCP) または Node/TypeScript (MCP SDK) を使用して、外部APIやサービスを統合する MCP サーバーを構築する際に使用します。
Skill Creator
anthropics/skills
新しいスキルの作成、既存スキルの修正と改善、およびスキルパフォーマンスの測定を行います。ユーザーがスキルをゼロから作成、既存スキルの編集や最適化、スキルテストのための評価(evals)の実行、分散分析によるスキルパフォーマンスのベンチマーク、またはトリガー精度の向上のためのスキル説明の最適化を行いたい場合に使用します。
CI Cd And Automation
addyosmani/agent-skills
CI/CDパイプラインのセットアップを自動化します。ビルドおよびデプロイパイプラインの設定や変更時に使用します。クオリティゲートの自動化、CIでのテストランナーの設定、またはデプロイ戦略の確立が必要な場合に使用してください。
API And Interface Design
addyosmani/agent-skills
安定した API とインターフェース設計をガイドします。API、モジュール境界、またはパブリックインターフェースの設計時に使用します。REST や GraphQL エンドポイントの作成、モジュール間の型コントラクトの定義、フロントエンドとバックエンドの境界設定を行う際に活用してください。