Performance Profiling Skill for Claude Code and Chrome DevTools
Use a local performance trace to identify expensive script, layout, or paint work and repeat the same interaction after a focused change.
中文Install in Claude Code
Use a local page with a stable fixture and Chrome DevTools. The included Lighthouse script separately requires Python and the Lighthouse CLI.
- Get the complete `cli-tool/components/skills/development/performance-profiling` directory from the pinned GitHub commit.
- Copy it into the target project's `.claude/skills/`. Check `.claude/skills/performance-profiling/SKILL.md`, start Claude Code at the project root, and call `/performance-profiling`.
Example task
Load 2,000 synthetic items in a local catalog. Record typing camera in Chrome's Performance panel. Locate the most expensive filter call, recompute only when the query changes, and record again with the same settings.What to check
Two traces identify the function and show its measured runtime. The filter result count should remain consistent.
Original SKILL.md on GitHub · Updated
Frequently asked question
Can a Lighthouse score identify the slowest filter function?
Use DevTools Performance call trees and flame charts to attribute interaction cost. Use Lighthouse for complementary page-load and lab metrics.