skills.rest
f4rkh4d
f4rkh4dCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

forge-performance

Enforce Core Web Vitals budgets for React, Next.js, and Vite interfaces.

Updated Aug 23, 2026
Search Tags:#lighthouse#web performance#core web vitals#image optimization#font loading#bundle audit
One-click install
npx skills add https://github.com/f4rkh4d/forge-skill --skill forge-performance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: forge-performance
Source: https://github.com/f4rkh4d/forge-skill/tree/main/skills/design/forge-performance
Command: npx skills add https://github.com/f4rkh4d/forge-skill --skill forge-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents AI-generated frontends from shipping oversized assets and bloated bundles that harm Core Web Vitals, causing slow first loads, janky interactions, and layout shifts that users feel immediately.

Core Features & Use Cases

  • Core Web Vitals-first guidance: Targets LCP ≤ 2.5s, INP ≤ 200ms, and CLS ≤ 0.1, with field-data measurement emphasis.
  • Practical asset discipline: Enforces modern image formats, responsive srcset + sizes, correct loading/fetchpriority, and explicit width/height (or aspect-ratio) to eliminate CLS.
  • Bundle, CSS, and font constraints: Covers code-splitting, tree-shake-friendly imports, critical CSS, and web font loading that avoids FOIT/FOUT via font-display: swap, plus critical font preloading and font subsetting.
  • Third-party and preloading rules: Requires deferring/asyncing third-party scripts, and prescribes “preload only the LCP asset” to avoid over-preloading penalties.
  • Verification checklist: Provides a manual audit list aligned to real performance regressions (bundle audits, Lighthouse, and CI budgets).

Quick Start

Use the forge-performance skill to audit and rewrite your proposed web UI changes so they meet LCP, INP, and CLS targets while applying modern images, correct font loading, and bundle/CSS discipline.

Frequently Asked Questions about forge-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I improve Core Web Vitals for a React or Next.js application?▼

Improve Core Web Vitals in React or Next.js by enforcing frontend asset discipline: use responsive images with explicit dimensions, apply font-display: swap with critical preloading, and limit gzipped bundle sizes via code-splitting to hit LCP, INP, and CLS targets.

What is the best way to prevent layout shift from web font loading?▼

Prevent layout shift from web font loading by using font-display: swap alongside critical font preloading and subsetting, ensuring text remains visible while avoiding FOIT and FOUT during page render.

Does Vite require code-splitting and tree-shaking to limit bundle size?▼

Yes, Vite requires code-splitting and tree-shaking to limit bundle size. Enforcing these constraints alongside critical CSS extraction ensures your frontend maintains acceptable gzipped bundle sizes and prevents total load cost regressions.

Why does over-preloading assets harm LCP performance?▼

Over-preloading assets harms LCP performance by unnecessarily consuming browser bandwidth and CPU, delaying the Largest Contentful Paint element download. You should preload only the LCP asset to avoid these penalties.

How do I audit third-party scripts that cause web performance regressions?▼

Audit third-party scripts causing web performance regressions by deferring or asyncing their execution, then validating their impact against an explicit performance checklist covering Lighthouse scores, bundle audits, and Core Web Vitals CI budgets.

Related Skills

Explore More Design & Creative Skills→
YouneslahlaliYouneslahlali

optimize

Analyze web performance metrics and implement optimization strategies for Core Web Vitals.

Community
Advanced
sigmadigitalzasigmadigitalza
1

web-performance

Analyze web application performance against Core Web Vitals metrics.

Official
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
EsdevenimentsEsdeveniments
2

bundle-optimization

Minimize JavaScript bundle sizes and optimize image delivery in Next.js applications.

Official
Intermediate