Communityコーディング&開発github.com

Leluth/underpixel

Chrome拡張機能とMCPサーバー — ピクセルの背後にあるものを記録、再生、理解します。Claude Codeや任意のMCPクライアント向けのタイムスタンプ付きビジュアル・API相関。

underpixel とは?

Leluth/underpixelは、Chrome拡張機能とMCP(Model Context Protocol)サーバーを統合したツールで、Webページ上の視覚的操作とその背後で発生するAPI呼び出しを正確に記録・関連付けます。開発者は、タイムスタンプ付きのビジュアルログとAPIログを同期して確認できるため、UIイベントがどのAPIをトリガーしたかを即座に把握できます。主にClaude CodeやMCP対応のAIエージェントで利用され、E2Eテストのデバッグ、ユーザー行動の分析、およびUIとバックエンドの不整合の調査に役立ちます。このツールは、Chrome DevTools ProtocolとカスタムMCPサーバーを組み合わせることで、ブラウザの操作をリプレイ可能なデータとして保存し、開発フローにシームレスに統合します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add Leluth/underpixel

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

underpixel は何をしますか?

Chrome拡張機能 + MCPサーバー — ピクセルの背後にあるものを記録、再生、理解します。Claude Codeや任意のMCPクライアント向けのタイムスタンプ付きビジュアル・API相関。

関連スキル