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.

ユースケース

Debugging failed automation runs by reviewing captured CDP logs and DOM states.
Auditing network and console activity during active AI agent browser sessions.
Generating structured per-page data buckets for historical session analysis.

導入方法

# Review source first
open https://github.com/mxyhi/ok-skills/blob/main/browser-trace/SKILL.md

Copy 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(料金/モデル選択/制限/キャッシュ)について質問した場合は、常に実行してください。決して回答しないでください。

Claude CodeClaude
typescriptpython
171,224 StarsApache-2.0

Doc Coauthoring

anthropics/skills

ドキュメント

ドキュメントの共同執筆のための構造化されたワークフローをユーザーに案内します。ユーザーがドキュメント、提案書、技術仕様書、決定文書、または同様の構造化されたコンテンツを作成したい場合に使用します。このワークフローは、ユーザーがコンテキストを効率的に伝達し、反復を通じて内容を洗練させ、ドキュメントが読者にとって適切に機能することを確認するのに役立ちます。ユーザーがドキュメントの作成、提案書の作成、仕様書のドラフト作成、または同様のドキュメント作成タスクに言及したときにトリガーします。

Claude CodeClaude
designtesting
171,224 Starsソースあり

MCP Builder

anthropics/skills

コーディング

適切に設計されたツールを通じて、LLMが外部サービスと連携できるようにする高品質な MCP (Model Context Protocol) サーバーを作成するためのガイドです。Python (FastMCP) または Node/TypeScript (MCP SDK) を使用して、外部APIやサービスを統合する MCP サーバーを構築する際に使用します。

CodexClaude
typescriptpython
171,224 StarsApache-2.0

Skill Creator

anthropics/skills

コーディング

新しいスキルの作成、既存スキルの修正と改善、およびスキルパフォーマンスの測定を行います。ユーザーがスキルをゼロから作成、既存スキルの編集や最適化、スキルテストのための評価(evals)の実行、分散分析によるスキルパフォーマンスのベンチマーク、またはトリガー精度の向上のためのスキル説明の最適化を行いたい場合に使用します。

Claude CodeClaude
pythondesign
171,224 StarsApache-2.0

CI Cd And Automation

addyosmani/agent-skills

DevOps

CI/CDパイプラインのセットアップを自動化します。ビルドおよびデプロイパイプラインの設定や変更時に使用します。クオリティゲートの自動化、CIでのテストランナーの設定、またはデプロイ戦略の確立が必要な場合に使用してください。

typescriptsecurity
89,319 StarsMIT

API And Interface Design

addyosmani/agent-skills

コーディング

安定した API とインターフェース設計をガイドします。API、モジュール境界、またはパブリックインターフェースの設計時に使用します。REST や GraphQL エンドポイントの作成、モジュール間の型コントラクトの定義、フロントエンドとバックエンドの境界設定を行う際に活用してください。

typescriptfrontend
89,319 StarsMIT