skills.rest
OysteinAmundsen
OysteinAmundsenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

debug-perf

Profile and diagnose performance bottlenecks in the @toolbox-web/grid component.

48|4|Updated Dec 22, 2025
Search Tags:#performance#e2e#profiling#devtools#playwright#grid#render-scheduler
One-click install
npx skills add https://github.com/OysteinAmundsen/toolbox --skill debug-perf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debug-perf
Source: https://github.com/OysteinAmundsen/toolbox/tree/main/.github/skills/debug-perf
Command: npx skills add https://github.com/OysteinAmundsen/toolbox --skill debug-perf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Profile and diagnose performance bottlenecks in the @toolbox-web/grid component across docs, demos, and live pages to accelerate fixes and prevent regressions.

Core Features & Use Cases

  • Live profiling workflows that guide you through browser MCP tracing, Playwright traces, and performance budgets.
  • Hot path optimization guidance for critical components like the scroll handler, row rendering, virtualization, and the render scheduler.
  • End-to-end performance regression guidance that ties profiling results to actionable fixes and verifications across CI and e2e tests.

Quick Start

Begin profiling by starting a performance trace on a live page and then reproduce the issue to collect actionable insights.

Frequently Asked Questions about debug-perf

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

FAQPage Schema
How do I profile grid performance bottlenecks in a live browser?▼

To profile grid performance bottlenecks in a live browser, start a performance trace on the live page and reproduce the issue to collect actionable insights. This workflow uses browser MCP tracing and Playwright traces to identify hot paths in rendering and virtualization.

What is a render scheduler and how does it affect virtualized rendering performance?▼

A render scheduler manages the timing of virtualized rendering tasks to prevent UI blocking. Optimizing it improves scroll handling and row rendering efficiency, which are critical paths evaluated through performance regression testing across e2e traces.

How do I set up end-to-end performance regression testing for a web grid component?▼

End-to-end performance regression testing for a web grid component is set up by configuring Playwright traces and performance budgets in CI. This ties profiling results to actionable fixes and verifies critical paths like virtualization across docs and demos.

Can I use Playwright traces to diagnose scroll handling issues in virtualized grids?▼

Yes, you can use Playwright traces to diagnose scroll handling issues in virtualized grids. The traces capture live browser profiling data, allowing you to measure and reproduce performance bottlenecks within the render scheduler and row rendering hot paths.

What is the best way to identify hot paths in a grid component during profiling?▼

The best way to identify hot paths in a grid component during profiling is to use MCP-based tracing alongside Playwright traces. This pinpoints critical rendering, virtualization, and scroll handling bottlenecks to guide targeted optimization and fixes.

Related Skills

Explore More Software Engineering Skills→
derHakenderHaken
437

systematic-debugging

Trace data flow and apply a four-phase process to fix root causes.

Community
Advanced
avsmavsm
35

memtrace

Instrument OCaml builds with memtrace to collect and compare allocation traces.

Community
Advanced
lem0n4idlem0n4id

chrome-devtools

Automate browser navigation, element interactions, and performance profiling via Chrome DevTools MCP.

Community
Advanced
JayRHaJayRHa
3

performance-profiler

Measure, profile, and validate performance improvements across Python, Node.js, Go, Java, SQL, and HTTP.

Community
Advanced