skills.rest
YeomanYe
YeomanYeCOMMUNITY
Explore all skills by this author →
GitHub

webperf-interaction

Analyze interaction latency with INP and main-thread blocking via PerformanceObserver.

Updated May 12, 2026
Search Tags:#monitoring#interaction#web-performance#performance-analysis#inp#main-thread#layout-shift
One-click install
npx skills add https://github.com/YeomanYe/skills --skill webperf-interaction
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webperf-interaction
Source: https://github.com/YeomanYe/skills/tree/main/webperf-interaction
Command: npx skills add https://github.com/YeomanYe/skills --skill webperf-interaction

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Intelligent interaction performance analysis to quickly diagnose INP issues, scroll jank, and main-thread blocking, enabling targeted optimizations.

Core Features & Use Cases

  • Automated INP audit workflows that attribute slow interactions to inputs, processing, or rendering delays.
  • Scroll-jank investigation with layout-shift correlation and long-animation-frame attribution.
  • Cross-skill integration with Core Web Vitals and Loading workflows for end-to-end performance debugging.
  • Decision trees that trigger follow-up scripts (e.g., attribution, breaking up tasks, code-splitting) when slow frames are detected.
  • Exportable, structured results for automated tooling and reporting.

Quick Start

Run a complete INP audit on the current page and review the interaction breakdown and recommendations.

Frequently Asked Questions about webperf-interaction

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

FAQPage Schema
How do I diagnose high INP and identify what causes interaction latency?▼

To fix scroll jank caused by layout shifts, investigate long-animation-frame attribution and correlate layout-shift metrics with main-thread blocking to identify and resolve rendering delays during scrolling.

How does PerformanceObserver help with real-time web performance analysis?▼

PerformanceObserver enables real-time web performance analysis by observing interaction entries and long tasks on the main thread, immediately triggering decision trees to attribute slow frames and recommend code-splitting or task-breaking fixes.

Can I integrate INP audits with Core Web Vitals monitoring workflows?▼

Yes, you can integrate INP audits with Core Web Vitals monitoring workflows through cross-skill integration, enabling end-to-end performance debugging across loading and interaction metrics to comprehensively assess page responsiveness.

What is the best way to export structured performance analysis results for reporting?▼

The best way to export structured performance analysis results is to use the audit workflow's exportable structured outputs, allowing automated tooling and reporting systems to directly consume interaction latency breakdowns and optimization recommendations.

Related Skills

Explore More Software Engineering Skills→
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-web-vitals

Measure Core Web Vitals and performance regressions on live web pages.

Community
Advanced
agentic-inagentic-in
577

Web Search

Perform targeted public-web searches and summarize results with source attribution.

Official
Basic
HieubkavHieubkav

web-performance-audit

Measure Core Web Vitals and identify web performance bottlenecks.

Community
Advanced
statick88statick88
1

core-web-vitals

Optimize Core Web Vitals LCP, INP, and CLS with checklists and debugging techniques.

Community
Advanced