Web Performance & Core Web Vitals Optimization

What it does

Web Performance & Core Web Vitals Optimization is a Cursor skill: a SKILL.md playbook that AgenticKit installs at .cursor/skills/performance-web. Cursor's agent loads it when the task matches the skill description, instead of stuffing the same rules into every chat.

Optimization techniques for achieving 95+ Google Lighthouse scores, eliminating layout shifts, minimizing render blocking, and caching assets.

LCP, FID/INP, CLS optimization, image preloading, and font subsetting. The file is domain knowledge, not a slash macro. You do not type it. The agent reads it when the job is performance web.

Why it exists

Default Cursor has no memory of how your team ships code, schema, and tests. Founders paste the same conventions into chat, then watch the model drift on the next turn. This skill exists so those conventions live on disk and load only when relevant.

It ships in the Engineering Kit. It is wired to the React 19 & Next.js Specialist (react-specialist) and Design Systems & UI Specialist (design-engineer) agents. It is wired to the /build-page: UI Page & Responsive Component Builder and /landing-fix: Landing Page CRO Audit & Copy Optimizer commands. That graph is the point: the skill is the standard, the agent is the role, the command is the trigger.

When to use it

• Use Web Performance & Core Web Vitals Optimization when the work is specifically about lcp, fid/inp, cls optimization, image preloading, and font subsetting.
• Load it before a long session that will touch this surface more than once. A one-line edit does not need the full playbook.
• Use it on production SaaS work (multi-tenant apps, paid features, anything that will be reviewed) rather than a throwaway prototype.

When not to use it

• Do not treat the skill as a replacement for a slash command. Skills teach. Commands run a pipeline.
• Do not paste the whole SKILL.md into chat. If Cursor is not loading it, fix the description or invoke the matching command.
• Do not use it as a generic 'write better code' rule. Scope is this domain only.

Example workflow

1. Install the Engineering Kit so .cursor/skills/performance-web lands in the repo.
2. Open a new Cursor agent chat pointed at the files this skill governs.
3. Ask the React 19 & Next.js Specialist (react-specialist) to read the skill, or run /build-page: UI Page & Responsive Component Builder.
4. Review the first artifact against the practices below. If it violates one, stop and correct the file. Do not prompt 'just finish it'.
5. Commit the skill-guided files with the rest of the slice so the next session inherits the same standard.

Example usage

Example prompt: "Read .cursor/skills/performance-web and apply it to this change. Do not invent extra conventions."

Or trigger the pipeline: /build-page: UI Page & Responsive Component Builder. That command is written to load this skill.

Check the output against: Preload Largest Contentful Paint (LCP) hero images and critical web fonts

Example output

• The skill itself does not write a single output file. It changes what the agent is allowed to produce in code, schema, and tests.
• When you run /build-page: UI Page & Responsive Component Builder, expect repo files plus notes under docs/, not a chat-only answer.

Best practices

• Preload Largest Contentful Paint (LCP) hero images and critical web fonts
• Reserve explicit width and height dimensions on all images to eliminate CLS
• Use next/font or Google Fonts font-display: swap with preconnected origins
• Defer non-critical third-party analytics scripts using strategy='afterInteractive'

Common mistakes

• Ignoring "Preload Largest Contentful Paint (LCP) hero images and critical web fonts" and hoping a later prompt will clean it up.
• Copying the skill into .cursor/rules as always-on. That burns context and fights Cursor's load-on-match design.
• Running two overlapping skills that contradict each other in the same turn.
• Letting the agent skip tests or types because 'the skill is about architecture'.