agentleFS
viasrijanviasrijan/crazy-skills/skills/performance/performance-optimization/SKILL.md

performance-optimization

Skill0 starsChanged 3 months agoMITView on GitHub

Use when optimizing performance — measure first, then profile, bundle, and fix loading or runtime. Covers Core Web Vitals targets, profiling workflows, and React/Next.js patterns.

125 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use constraint-driven-development, using-agent-skills and 3 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • MrCipherSmithSkill

    constraint-driven-development

    Use when a project needs a persistent, measurable quality bar — starting a project without documented standards, 'set up constraints', or when coverage/perf/a11y thresholds get re-debated per-PR. Produces CONSTRAINTS.md with enforceable numbers, ratchets, and a guard against silent weakening. NOT for throwaway prototypes or a one-off CI setup.

    Also in 15 projects that use this

  • LLl0k0laDSkill

    using-agent-skills

    Use when starting a session or when you need to discover which skill applies to the current task. This is the meta-skill that governs how all other skills are discovered and invoked.

    Also in 33 projects that use this

  • LLl0k0laDSkill

    shipping-and-launch

    Use when preparing to deploy to production. Use when you need a pre-launch checklist, when setting up monitoring, when planning a staged rollout, or when you need a rollback strategy.

    Also in 42 projects that use this

  • HK-hubSkill

    deprecation-and-migration

    Manages deprecation and migration. Use when removing old systems, APIs, or features. Use when migrating users from one implementation to another. Use when deciding whether to maintain or sunset existing code.

    Also in 39 projects that use this

  • ukanwatSkill

    input-systems

    Architect game input — action mapping (abstracting keys into named actions), rebinding with conflict detection and persistence, multi-device support (keyboard, gamepad, touch), analog deadzones, and feel features like input buffering and coyote time, plus accessibility. Engine-neutral. Use when the user mentions input mapping, rebind controls, gamepad support, deadzone, input buffering, coyote time, or accessible controls.

    Also in 4 projects that use this

The file

Files
SKILL.md

Performance Optimization

Measure-first performance. Composite of addyosmani/agent-skills performance-optimization + web-quality/performance + vercel-labs/vercel-react-best-practices (663k).

When to use

  • Performance requirements exist or you suspect regressions
  • LCP, INP, CLS are outside thresholds or bundle is large
  • React/Next.js data fetching, bundle, or cache needs review

Workflow

  1. Measure first — Do not optimize without numbers. Collect field (CrUX/RUM) + lab (Lighthouse, trace). Record baseline: LCP, INP, CLS, bundle size, JS ≤300KB compressed.
  2. Profile — Identify the bottleneck (critical rendering path, bundle, images, fonts, server response, N+1). Use performance traces, bundle analyzer, query plan.
  3. Fix the bottleneck only — One fix at a time (code splitting, image optimization, font subsetting, caching, server response). Keep measured failures separate from hypotheses.
  4. Verify — Re-measure with same tooling. Confirm improvement at 75th percentile, no regression elsewhere.

Verification

  • Baseline measured before any optimization
  • Single bottleneck identified and fixed (not speculative batch)
  • Re-measurement shows improvement, thresholds met (LCP ≤2.5s, INP ≤200ms, CLS ≤0.1 at p75)
  • Bundle budgets respected: JS <300KB, CSS <100KB, above-fold images <500KB (compressed)

References

  • Source: addyosmani/agent-skills performance-optimization, addyosmani/web-quality-skills performance, vercel-labs/agent-skills vercel-react-best-practices

Download now (ZIP)

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
What did you use it for? e.g. Reviewing pull requests in a Rails app

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.