How does the profiling workflow function?

The skill follows a strict 4-step process: establishing a baseline, identifying specific bottlenecks, implementing targeted fixes, and validating the improvements with data.

What runtime issues can this skill identify?

It helps identify long tasks (>50ms) that block the UI, memory leaks caused by retained references, and layout thrashing that causes visual instability.

What is the Performance Profiling Claude Code skill?

It is a specialized capability that helps Claude measure, analyze, and optimize web application performance using industry-standard tools and metrics like Lighthouse and DevTools.

Can this skill help with Core Web Vitals?

Yes, it provides specific targets and measurement strategies for Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).

Performance Profiling & Optimization

Name: Performance Profiling & Optimization
Author: claudiodearaujo

byclaudiodearaujo

0•

分析と監視

Analyzes and optimizes web application performance using Core Web Vitals, bundle analysis, and runtime profiling techniques.

This skill equips Claude with the systematic methodology required to measure, analyze, and optimize web applications. It provides structured guidance for tracking Core Web Vitals like LCP and INP, performing automated Lighthouse audits, and conducting deep-dive bundle analysis to eliminate dead code. By following a 'baseline-identify-fix-validate' workflow, this skill helps developers resolve runtime bottlenecks, memory leaks, and rendering issues to ensure production-grade application speed and stability.

主な機能

01Runtime profiling for detecting UI-blocking tasks and rendering bottlenecks.

02Automated Lighthouse performance auditing and Core Web Vitals benchmark tracking.

03Detailed JavaScript bundle analysis to identify large dependencies and tree-shaking opportunities.

040 GitHub stars

05Prioritized optimization checklists for caching, lazy loading, and code splitting.

06Memory heap analysis to identify leaks and detached DOM elements.

ユースケース

01Improving page load speeds and search engine rankings by optimizing Core Web Vitals.

02Debugging complex runtime issues like scroll jank, layout thrashing, and memory growth.

03Reducing application bundle size to improve performance on low-bandwidth devices.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front performance-profiling

For use in Claude.ai and ChatGPT

Download Skill

主な機能

01Runtime profiling for detecting UI-blocking tasks and rendering bottlenecks.

02Automated Lighthouse performance auditing and Core Web Vitals benchmark tracking.

03Detailed JavaScript bundle analysis to identify large dependencies and tree-shaking opportunities.

040 GitHub stars

05Prioritized optimization checklists for caching, lazy loading, and code splitting.

06Memory heap analysis to identify leaks and detached DOM elements.

ユースケース

01Improving page load speeds and search engine rankings by optimizing Core Web Vitals.

02Debugging complex runtime issues like scroll jank, layout thrashing, and memory growth.

03Reducing application bundle size to improve performance on low-bandwidth devices.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front performance-profiling

For use in Claude.ai and ChatGPT

Download Skill