performance-budget
Skill0 starsChanged 2 months agoMITView on GitHub
Set and enforce Core Web Vitals budgets, then hit them — LCP/CLS/INP diagnosis, bundle dieting, image strategy, and the profiling workflow that finds the real bottleneck. Use when a page is slow, before a release, or when adding any dependency.
4 other projects use a version of this.
Adopted by
Most recently taken up by
- jammyfu/open-game-skillstheir own version, first seen Oct 11, 2026
- Mozurok/fhorja.devtheir own version, first seen Oct 8, 2026
- Abdox-menara/guard-skillstheir own version, first seen Aug 24, 2026
- charanjit-singh/lovable-skillstheir own version, first seen May 22, 2026
Other versions4 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 4
- jammyfu/open-game-skills★ 12same name
- charanjit-singh/lovable-skills★ 10same name
- Mozurok/fhorja.dev★ 10same name
- Abdox-menara/guard-skills★ 0same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository11 other files it gives its agents.
- api-contract-designSkill
- browser-debuggingSkill
- component-reviewSkill
- css-architectureSkill
- frontend-testing-strategySkill
- nextjs-performanceSkill
- react-hooks-disciplineSkill
- state-managementSkill
- typescript-strictnessSkill
- vue3-compositionSkill
- web-a11ySkill
The file
We split this skill into the rules it gives an agent
4 rules. 0 are common, 3 are distinctive, and 1 is very specific to this project.
0
Common
Most of the 3 edited versions we read keep these.
3
Distinctive
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 10
Write the numbers into CI.
- Distinctive: line 31
If LCP data comes from an API, stream the shell and suspend only below the fold.
- Very specific: line 36
No content injected above existing content (banners, cookie bars animate in transform, never push).
- Distinctive: line 55
Every new dependency must state: size gzipped, what it replaces, why built-in/one-liner isn't enough.
“Common” is measured: kept by at least 6 in 10 of the 3 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Performance budgets that mean something
Budget first, build second
Write the numbers into CI; a budget that isn't enforced is a wish:
| Metric | Budget | Why |
| LCP | ≤ 2.5s (p75) | users judge speed by it |
| CLS | ≤ 0.1 | layout shift = rage clicks |
| INP | ≤ 200ms | responsiveness |
| JS (initial route) | ≤ 170KB gzip | ~3G mid-tier phone parse time |
bundlesize/size-limit in CI fails the PR, not the quarter.
Diagnose before optimizing
- Lab: Lighthouse on throttled "Slow 4G / mid-tier mobile" — not your dev machine.
- Field: real-user data (web-vitals lib → your analytics) — lab lies, p75 users don't.
- Trace the specific slow metric (Performance panel), don't shotgun "optimizations".
LCP
- The LCP element is usually the hero image or headline. Server-render it;
fetchpriority="high"/priorityon the image. - Kill render-blocking chains: critical CSS inline, defer the rest; no sync third-party scripts in
<head>. - If LCP data comes from an API, stream the shell and suspend only below the fold.
CLS
- Reserve space: explicit
width/height(oraspect-ratio) on images/iframes/embeds. - No content injected above existing content (banners, cookie bars animate in
transform, never push). - Web fonts:
font-display: swapwith metric-matched fallbacks (size-adjust) to avoid swap shift.
INP
- Long tasks > 50ms: split with
scheduler.yield()/setTimeout; move heavy work to a Worker. - Event handlers do the minimum and update UI optimistically; heavy validation debounced.
- Hydration giants (big trees going interactive) are an INP factory — shrink the client island instead.
Bundle diet (the repeatable one)
- Analyze:
webpack-bundle-analyzer/rollup-plugin-visualizer. - Duplicates:
npm lsfor doubled deps; dedupe lockfile. - Date (
dayjs/date-fnsovermoment), icons (per-icon ESM), lodash (named imports). - Dynamic-import the heavy tail: editors, charts, maps, xlsx.
- Tree-shake blockers: side-effectful barrel files — import from module paths.
Dependency rule
Every new dependency must state: size gzipped, what it replaces, why built-in/one-liner isn't enough. A 2KB problem doesn't deserve a 40KB solution.
Definition of done (agent checklist)
- CI budget check green on changed routes
- LCP element identified and optimized (priority/fetchpriority)
- All media has reserved space (CLS)
- No sync third-party in head
- New deps justified with size + replacement note
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.