frontend-perf skill

Overview

This skill analyzes and optimizes frontend application performance to reduce load times and improve user experience. It targets bundle size, rendering efficiency, memoization opportunities, and Core Web Vitals to deliver measurable improvements. The output is a practical analysis report stored under docs/performance/.

How this skill works

The agent runs static and runtime inspections to identify large bundles, slow rendering paths, and wasted re-renders. It suggests concrete optimizations: code-splitting, tree-shaking, lazy loading, memoization, and layout/paint improvements tied to Core Web Vitals metrics. Recommendations include actionable code changes, prioritized fixes, and estimated impact on key metrics.

When to use it

• Before major releases to cut load time and shipping size
• When Core Web Vitals scores are low or dropping
• After adding new dependencies or large components
• When users report slow page loads or janky interactions
• During performance budgets or optimization sprints

Best practices

• Establish performance budgets for bundle size and TTFB/CLS/LCP
• Prioritize fixes that yield high metric improvements with low effort
• Measure before and after changes with lab and field data
• Apply memoization and pure-component patterns to reduce re-renders
• Split code and lazy-load noncritical routes and components

Example use cases

• Analyze a bundle that grew after a dependency update and recommend tree-shaking or replacement
• Find and fix long-running render functions causing high TBT and jank
• Suggest memoization and useCallback/useMemo placements to reduce unnecessary work
• Recommend asset delivery changes (compression, caching, preload) to improve LCP
• Create a prioritized action list to meet a 200 KB initial bundle budget

FAQ