What is the Interaction Replay Debugger?

It is a Claude Code skill that uses Playwright to instrument web pages and analyze user interaction performance in real-time by capturing granular timing data.

How does it help with the 'presentation delay' phase?

It identifies when the bottleneck occurs after the event handler completes, suggesting that the issue lies in expensive DOM mutations, layout, or style recalculations.

How does it calculate INP?

It captures all interactions using a PerformanceObserver, groups related events by interactionId, and computes the 98th percentile of durations to identify the Interaction to Next Paint value.

What browsers are supported?

This skill requires a Chromium-based browser (such as Chrome 123+) to support the Event Timing API and the script attribution features of Long Animation Frame entries.

Can it identify specific slow scripts?

Yes, by correlating interactions with Long Animation Frames, it can attribute slowness to specific source URLs, function names, and even character positions within the code.

Interaction Replay Debugger

Name: Interaction Replay Debugger
Author: anouar1991

byanouar1991

•

Browser Automation

Analyzes web performance by capturing detailed event timing and identifying responsiveness bottlenecks during user interactions.

The Interaction Replay Debugger is a specialized performance analysis skill that leverages the Event Timing API and Long Animation Frame (LoAF) data to diagnose UI lag. It automates the process of measuring Interaction to Next Paint (INP) by instrumenting Chromium browsers to track every click and keystroke. By breaking down interactions into input delay, processing time, and presentation delay, it helps developers pinpoint exactly whether slowness is caused by main-thread congestion, heavy event handlers, or expensive rendering cycles.

Key Features

01Correlation between slow interactions and Long Animation Frames (LoAF)

021 GitHub stars

03Full Event Timing API breakdown including input delay and presentation delay

04Automated INP (Interaction to Next Paint) calculation and rating

05Script attribution to identify specific functions causing main-thread blocking

06Console error tracking mapped to specific user interactions

Use Cases

01Debugging slow click or typing responses on complex web applications

02Measuring and optimizing Core Web Vitals for production readiness

03Identifying specific JavaScript functions causing UI thread bottlenecks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anouar1991/binarypetsclaude interaction-replay-debugger

For use in Claude.ai and ChatGPT

Download Skill