Frontend Performance Skills Pack for Claude Code

The Frontend Performance Skills Pack for Claude Code equips your AI‑driven development environment with four targeted skills and a single /perf command that let you pinpoint and resolve the most common frontend bottlenecks. By automating Lighthouse fixes, bundle size reductions, image optimizations, and Core Web Vitals adjustments, you can raise Lighthouse scores by 10‑20 points, cut page‑load time by up to 40 %, and see measurable improvements in SEO ranking and conversion rates.

What You Get

• Lighthouse Optimization Skill – Parses Lighthouse audit results, applies focused changes to performance, accessibility, best practices, and SEO, and reports before/after metrics.
• Bundle Analysis Skill – Detects oversized dependencies, recommends code‑splitting and tree‑shaking configurations, and replaces heavy libraries with lighter alternatives to shrink JavaScript bundles.
• Image Optimization Skill – Converts assets to WebP or AVIF, builds responsive srcset markup, adds lazy loading, and sets up CDN‑based transformation pipelines.
• Core Web Vitals Skill – Targets LCP, FID/INP, and CLS with layout‑shift prevention, interaction timing tweaks, and framework‑specific paint optimizations.
• /perf Command – Executes a full performance audit on any page or component, then outputs a prioritized list of fixes with estimated impact.

How to Use

Extract the pack into your .claude/ directory. Open Claude Code, open a terminal, and run /perf on the page or component you want to evaluate. Claude Code will run the audit, apply the relevant skill actions, and display a before/after report. Review the suggested changes, accept or modify them, and re‑run /perf to verify the improvements. Repeat as needed for new pages or after significant code changes.

Who This Is For

Front‑end engineers who need reliable, repeatable performance improvements without manual audit cycles; teams that ship React applications styled with Tailwind and want consistent Lighthouse and Core Web Vitals outcomes; and developers using Claude Code who prefer AI‑assisted diagnostics over ad‑hoc debugging.