Verified:GitHub

interaction-replay-debugger

Analyze UI interaction timing data to measure INP and identify bottlenecks.

1|Updated Jan 9, 2026

Search Tags:#debugging #playwright #performance-analysis #inp #interaction-timing #event-timing-api #long-animation-frame

Ready to run

npx skills add https://github.com/anouar1991/binaryPetsClaude --skill interaction-replay-debugger

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: interaction-replay-debugger
Source: https://github.com/anouar1991/binaryPetsClaude/tree/main/plugins/playwright-toolkit/skills/interaction-replay-debugger
Command: npx skills add https://github.com/anouar1991/binaryPetsClaude --skill interaction-replay-debugger

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Captures and analyzes user interactions to diagnose UI responsiveness and compute INP, enabling precise bottleneck identification.

Core Features & Use Cases

Event Timing Observer collects all interaction events with timing breakdowns (inputDelay, processingTime, presentationDelay) to identify slow phases.
Long Animation Frame Observer records frame data and script attribution to pinpoint the exact code impact.
INP correlation and reporting aggregates data into a ranked list of slow interactions, with optional console error correlations for deeper debugging.
Use Cases include optimizing highly interactive pages, validating performance after changes, and QA regression testing.

Quick Start

Install instrumentation on a target page, perform a representative interaction sequence, and harvest results to identify bottlenecks.

Frequently Asked Questions about interaction-replay-debugger

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I measure INP to diagnose UI responsiveness issues?▼

To measure INP and diagnose UI responsiveness, analyze user interaction performance data by breaking down inputDelay, processingTime, and presentationDelay to identify slow phases. This isolates specific bottlenecks in clicks, key presses, and scrolls.

What is the best way to pinpoint the exact script causing a long animation frame?▼

To pinpoint the exact script causing a long animation frame, use a Long Animation Frame Observer to record frame data and script attribution. This correlates slow interactions with specific code impacts to identify the root cause.

How do I identify which interaction phase is slowing down my page?▼

To identify which interaction phase is slowing down your page, use an Event Timing Observer to collect interaction events. This provides a timing breakdown of inputDelay, processingTime, and presentationDelay to highlight the slowest phase.

Do I need the Event Timing API to perform interaction timing analysis?▼

Yes, you need the Event Timing API to perform interaction timing analysis. Instrumenting the target page with this API is required to harvest interaction data, correlate long animation frames, and generate a ranked list of slow interactions.

Can I use Playwright for INP analytics and QA regression testing?▼

Yes, you can use Playwright for INP analytics and QA regression testing. Install instrumentation on a target page, perform a representative interaction sequence, and harvest results to validate performance after changes.

Does interaction replay debugging require a specific browser environment?▼

Yes, interaction replay debugging requires a Chromium-based browser environment. This browser support is necessary to utilize the Event Timing API and Long Animation Frame Observer for harvesting and correlating performance results.