agentsclimarketplace

Frontend performance

Skill MartinOlivero/saas-builder/skills/frontend-performance

Build a complete, secure SaaS end to end in Claude Code: prevention-first security (not audit), real Stripe payments (not just a catalog), and 15 lifecycle skills. Pairs with Superpowers — needs nothing else.

Install
npx -y skills add MartinOlivero/saas-builder --skill frontend-performance

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

This skill should be used when a frontend feels slow, fails Core Web Vitals, has a large bundle, or needs performance optimization. Trigger phrases include "make it faster", "improve performance", "Core Web Vitals", "LCP", "INP", "CLS", "reduce bundle size", "code splitting", "lazy load", "it's slow to load", "optimize images", "bundle too big", "Lighthouse score". It targets the real Core Web Vitals thresholds with stack-specific fixes for React + Vite + Vercel.

SKILL.md

3.6 KB, as published. Nobody here has run it

Frontend Performance

This skill makes a React + Vite app hit the Core Web Vitals bar — the same metrics Google uses for ranking and that users feel as "fast." It optimizes against real thresholds, not vibes.

Analogy: shipping a fast app is like packing for a flight. You don't drag every possession to the gate — you pack the carry-on with what's needed now (above-the-fold) and check the rest (lazy-load below-the-fold). Overpacking the initial bundle is what makes the page heavy.

The targets (field data, 75th percentile)

  • LCP < 2.5s — largest content paint.
  • INP < 200ms — interaction to next paint (replaced FID in March 2024).
  • CLS < 0.1 — cumulative layout shift.

Discovery (max 3 questions, only if unknown)

  1. What's slow — first load (LCP/bundle) or interactions (INP)?
  2. Do you have field data (real users) or only a Lighthouse lab score?
  3. What's the biggest payload — JS bundle, images, or fonts?

Step 1 — Measure real users first

Install web-vitals (attribution build) and report onLCP/onINP/onCLS to your analytics. Lab tools (Lighthouse) miss field INP — optimize against real-user data, not just a local score. The Vercel Speed Insights package gives this with no backend.

Step 2 — Cut the bundle

  • Route-level code splitting with React.lazy + <Suspense>. Lazy-load below-the-fold and modal/dialog components so the initial bundle ships only above-the-fold code.
  • Split vendors in vite.config.ts via build.rollupOptions.output.manualChunks (separate react/react-dom, charts, icons) for long-term cache hits.
  • Keep the largest initial chunk under ~200KB gzipped. Treat Vite's "chunks larger than 500KB" warning as a budget failure, not a suggestion.
  • Enforce the budget in CI with size-limit; fail the build on regression. Inspect with vite-bundle-visualizer.
  • Tree-shake via named imports; prefer lucide-react over monolithic icon packs.

Step 3 — Fix LCP

  • Preload the LCP image: <link rel="preload" fetchpriority="high">. Never lazy-load the hero.
  • Serve images as AVIF/WebP through Vercel image optimization; always set explicit width/height (or aspect-ratio) to prevent CLS.
  • Self-host or preconnect fonts; use font-display: swap.

Step 4 — Fix INP

  • Break up long tasks; defer non-critical JS.
  • Use useTransition / startTransition for non-urgent React updates so input handlers stay responsive.
  • Avoid synchronous work inside input/click handlers.

Step 5 — Fix CLS

  • Reserve space for images, ads, and embeds (explicit dimensions / aspect-ratio).
  • Don't inject content above existing content after load.
  • Animate only transform/opacity (GPU-composited) — never width/height/top/left, which trigger layout and hurt both CLS and INP.

Output

Deliver: a before/after of the three vitals (or the targets if no baseline), the concrete vite.config.ts chunk config, the React.lazy split points, the image/font fixes, and the CI bundle-budget step.

Reference

GoogleChrome/web-vitals (~8.5k⭐), web.dev Core Web Vitals, Vite build docs (manualChunks), Vercel image optimization, size-limit.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.