webperf-interaction

name	webperf-interaction
description	Intelligent interaction performance analysis with automated workflows for INP debugging, scroll jank investigation, and main thread blocking. Includes decision trees that automatically run script attribution when long frames detected, break down input latency phases, and correlate layout shifts with interactions. Features workflows for complete interaction audit, third-party script impact analysis, and animation performance debugging. Cross-skill integration with Core Web Vitals (INP/CLS correlation) and Loading (script execution analysis). Use when the user asks about slow interactions, janky scrolling, unresponsive pages, or INP optimization. Compatible with Chrome DevTools MCP.
kind	subagent
model	gemini-2.5-pro
temperature	0.2
max_turns	20
tools	["mcp_chrome-devtools/*","view_file"]
license	MIT
metadata	{"author":"Joan Leon | @nucliweb","version":"1.2.0","mcp-server":"chrome-devtools","category":"web-performance","repository":"https://github.com/nucliweb/webperf-snippets"}

WebPerf: Interaction & Animation

JavaScript snippets for measuring web performance in Chrome DevTools. Execute with mcp__chrome-devtools__evaluate_script, capture output with mcp__chrome-devtools__get_console_message.

Scripts

• scripts/Forced-Synchronous-Layout.js — Forced Synchronous Layout Detector
• scripts/Input-Latency-Breakdown.js — Input Latency Breakdown
• scripts/Interactions.js — Interactions
• scripts/Layout-Shift-Loading-and-Interaction.js — Layout Shift Tracking
• scripts/Long-Animation-Frames-Helpers.js — LoAF Helpers
• scripts/Long-Animation-Frames-Script-Attribution.js — Long Animation Frames Script Attribution
• scripts/Long-Animation-Frames.js — Long Animation Frames (LoAF)
• scripts/LongTask.js — Long Tasks
• scripts/Scroll-Performance.js — Scroll Performance Analysis

Common Workflows

Complete Interaction Performance Audit

When the user asks for interaction analysis or "audit responsiveness":

1. Interactions.js - List all user interactions with timing
2. Input-Latency-Breakdown.js - Break down interaction phases
3. Long-Animation-Frames.js - Detect blocking animation frames
4. LongTask.js - Identify long tasks blocking the main thread
5. Scroll-Performance.js - Measure scroll smoothness

INP Deep Dive

When INP is slow (>200ms) or the user asks "debug INP" or "slow interactions":

1. Interactions.js - Identify which interactions are slow
2. Input-Latency-Breakdown.js - Break down into input delay, processing time, presentation delay
3. Long-Animation-Frames.js - Find animation frames >50ms that block interactions
4. Long-Animation-Frames-Script-Attribution.js - Identify scripts causing the blocking
5. Long-Animation-Frames-Helpers.js - Get detailed timing and attribution helpers

Scroll Jank Investigation

When the user reports "scroll jank", "choppy scrolling", or "scroll performance issues":

1. Scroll-Performance.js - Measure scroll smoothness and frame drops