Performance

Core Web Vitals

Improves Core Web Vitals in any stack - LCP 2.5 s, INP 200 ms and CLS 0.1 at the 75th percentile - with causes and fixes per framework (Next.js, Nuxt, Angular, Astro, SvelteKit, plain HTML), field measurement with web-vitals and the back/forward cache. Use when a page is slow to show, slow to respond or jumps, when PageSpeed or Search Console flags vitals, or when asked "why is LCP or INP bad".

fe-core-web-vitalsevery web project8 rules108 tokens always loaded, 956 tokens when used, 1518 tokens in references on demand.

Install

init installs this skill when the project uses every web project. Pick your agent to see where its files land.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

Agent	Found by
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

Where fe-core-web-vitals lands for Claude Code

.claude/skills/fe-core-web-vitals/SKILL.mdskill
.claude/skills/fe-core-web-vitals/references/vitals.mdskill
.claude/rules/fe-core-web-vitals.mdrule file
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-core-web-vitals.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.js"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
  - "**/*.css"
  - "**/*.scss"
---

# Core Web Vitals (frontend-skills)

Improves Core Web Vitals in any stack - LCP 2.5 s, INP 200 ms and CLS 0.1 at the 75th percentile - with causes and fixes per framework (Next.js, Nuxt, Angular, Astro, SvelteKit, plain HTML), field measurement with web-vitals and the back/forward cache. Use when a page is slow to show, slow to respond or jumps, when PageSpeed or Search Console flags vitals, or when asked "why is LCP or INP bad".

- Targets at the 75th percentile of real visits, mobile and desktop apart: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1.
- The LCP image is in the server HTML with `fetchpriority="high"`; a CSS background LCP image is preloaded (perf/lcp-image).
- Never `loading="lazy"` on the hero or a high-priority image (perf/lcp-image-not-lazy).
- Images and videos have `width` and `height`; embeds and ad slots reserve their space (perf/img-dimensions, perf/layout-shift).
- Head scripts use `defer` or `type="module"`; fonts use `font-display` with a matched fallback (perf/render-blocking-script, perf/font-display).
- Handlers paint first and yield; work over 50 ms is split or moved to a worker (perf/yield-long-tasks).
- Never listen to `unload`; use `pagehide` or `visibilitychange` (perf/bfcache-no-unload).
- Insert late content (banners, toasts, cookie bars) over the page, never above existing content.
- Use the framework's image, font and script components before hand-written tags.
- Judge vitals on field data; a lab run (Lighthouse) only explains the causes.

Before larger changes, read the full skill: `.claude/skills/fe-core-web-vitals/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-core-web-vitals lands for OpenAI Codex

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-core-web-vitals lands for Cursor

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
.cursor/rules/fe-core-web-vitals.mdcrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-core-web-vitals.mdc

---
description: Improves Core Web Vitals in any stack - LCP 2.5 s, INP 200 ms and CLS 0.1 at the 75th percentile - with causes and fixes per framework (Next.js, Nuxt, Angular, Astro, SvelteKit, plain HTML), field measurement with web-vitals and the back/forward cache. Use when a page is slow to show, slow to respond or jumps, when PageSpeed or Search Console flags vitals, or when asked "why is LCP or INP bad".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.js, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html, **/*.css, **/*.scss
alwaysApply: false
---

# Core Web Vitals (frontend-skills)

- Targets at the 75th percentile of real visits, mobile and desktop apart: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1.
- The LCP image is in the server HTML with `fetchpriority="high"`; a CSS background LCP image is preloaded (perf/lcp-image).
- Never `loading="lazy"` on the hero or a high-priority image (perf/lcp-image-not-lazy).
- Images and videos have `width` and `height`; embeds and ad slots reserve their space (perf/img-dimensions, perf/layout-shift).
- Head scripts use `defer` or `type="module"`; fonts use `font-display` with a matched fallback (perf/render-blocking-script, perf/font-display).
- Handlers paint first and yield; work over 50 ms is split or moved to a worker (perf/yield-long-tasks).
- Never listen to `unload`; use `pagehide` or `visibilitychange` (perf/bfcache-no-unload).
- Insert late content (banners, toasts, cookie bars) over the page, never above existing content.
- Use the framework's image, font and script components before hand-written tags.
- Judge vitals on field data; a lab run (Lighthouse) only explains the causes.

Before larger changes, read the full skill: `.agents/skills/fe-core-web-vitals/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-core-web-vitals lands for GitHub Copilot

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
.github/instructions/fe-core-web-vitals.instructions.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-core-web-vitals.instructions.md

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.js,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html,**/*.css,**/*.scss"
description: "Improves Core Web Vitals in any stack - LCP 2.5 s, INP 200 ms and CLS 0.1 at the 75th percentile - with causes and fixes per framework (Next.js, Nuxt, Angular, Astro, SvelteKit, plain HTML), field measurement with web-vitals and the back/forward cache. Use when a page is slow to show, slow to respond or jumps, when PageSpeed or Search Console flags vitals, or when asked \"why is LCP or INP bad\"."
---

# Core Web Vitals (frontend-skills)

- Targets at the 75th percentile of real visits, mobile and desktop apart: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1.
- The LCP image is in the server HTML with `fetchpriority="high"`; a CSS background LCP image is preloaded (perf/lcp-image).
- Never `loading="lazy"` on the hero or a high-priority image (perf/lcp-image-not-lazy).
- Images and videos have `width` and `height`; embeds and ad slots reserve their space (perf/img-dimensions, perf/layout-shift).
- Head scripts use `defer` or `type="module"`; fonts use `font-display` with a matched fallback (perf/render-blocking-script, perf/font-display).
- Handlers paint first and yield; work over 50 ms is split or moved to a worker (perf/yield-long-tasks).
- Never listen to `unload`; use `pagehide` or `visibilitychange` (perf/bfcache-no-unload).
- Insert late content (banners, toasts, cookie bars) over the page, never above existing content.
- Use the framework's image, font and script components before hand-written tags.
- Judge vitals on field data; a lab run (Lighthouse) only explains the causes.

Before larger changes, read the full skill: `.agents/skills/fe-core-web-vitals/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-core-web-vitals lands for Gemini CLI

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-core-web-vitals lands for Antigravity CLI

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
.agents/rules/fe-core-web-vitals.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-core-web-vitals.md

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.js, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html, **/*.css, **/*.scss"
description: "Improves Core Web Vitals in any stack - LCP 2.5 s, INP 200 ms and CLS 0.1 at the 75th percentile - with causes and fixes per framework (Next.js, Nuxt, Angular, Astro, SvelteKit, plain HTML), field measurement with web-vitals and the back/forward cache. Use when a page is slow to show, slow to respond or jumps, when PageSpeed or Search Console flags vitals, or when asked \"why is LCP or INP bad\"."
---

# Core Web Vitals (frontend-skills)

- Targets at the 75th percentile of real visits, mobile and desktop apart: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1.
- The LCP image is in the server HTML with `fetchpriority="high"`; a CSS background LCP image is preloaded (perf/lcp-image).
- Never `loading="lazy"` on the hero or a high-priority image (perf/lcp-image-not-lazy).
- Images and videos have `width` and `height`; embeds and ad slots reserve their space (perf/img-dimensions, perf/layout-shift).
- Head scripts use `defer` or `type="module"`; fonts use `font-display` with a matched fallback (perf/render-blocking-script, perf/font-display).
- Handlers paint first and yield; work over 50 ms is split or moved to a worker (perf/yield-long-tasks).
- Never listen to `unload`; use `pagehide` or `visibilitychange` (perf/bfcache-no-unload).
- Insert late content (banners, toasts, cookie bars) over the page, never above existing content.
- Use the framework's image, font and script components before hand-written tags.
- Judge vitals on field data; a lab run (Lighthouse) only explains the causes.

Before larger changes, read the full skill: `.agents/skills/fe-core-web-vitals/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-core-web-vitals lands for Devin / Windsurf

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
.devin/rules/fe-core-web-vitals.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-core-web-vitals.md

---
trigger: glob
globs: "**/*.html,**/*.jsx,**/*.tsx,**/*.js,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html,**/*.css,**/*.scss"
---

# Core Web Vitals (frontend-skills)

Improves Core Web Vitals in any stack - LCP 2.5 s, INP 200 ms and CLS 0.1 at the 75th percentile - with causes and fixes per framework (Next.js, Nuxt, Angular, Astro, SvelteKit, plain HTML), field measurement with web-vitals and the back/forward cache. Use when a page is slow to show, slow to respond or jumps, when PageSpeed or Search Console flags vitals, or when asked "why is LCP or INP bad".

- Targets at the 75th percentile of real visits, mobile and desktop apart: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1.
- The LCP image is in the server HTML with `fetchpriority="high"`; a CSS background LCP image is preloaded (perf/lcp-image).
- Never `loading="lazy"` on the hero or a high-priority image (perf/lcp-image-not-lazy).
- Images and videos have `width` and `height`; embeds and ad slots reserve their space (perf/img-dimensions, perf/layout-shift).
- Head scripts use `defer` or `type="module"`; fonts use `font-display` with a matched fallback (perf/render-blocking-script, perf/font-display).
- Handlers paint first and yield; work over 50 ms is split or moved to a worker (perf/yield-long-tasks).
- Never listen to `unload`; use `pagehide` or `visibilitychange` (perf/bfcache-no-unload).
- Insert late content (banners, toasts, cookie bars) over the page, never above existing content.
- Use the framework's image, font and script components before hand-written tags.
- Judge vitals on field data; a lab run (Lighthouse) only explains the causes.

Before larger changes, read the full skill: `.agents/skills/fe-core-web-vitals/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-core-web-vitals lands for OpenCode

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-core-web-vitals lands for Cline

.claude/skills/fe-core-web-vitals/SKILL.mdskill
.claude/skills/fe-core-web-vitals/references/vitals.mdskill
.clinerules/fe-core-web-vitals.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-core-web-vitals.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.js"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
  - "**/*.css"
  - "**/*.scss"
---

# Core Web Vitals (frontend-skills)

Improves Core Web Vitals in any stack - LCP 2.5 s, INP 200 ms and CLS 0.1 at the 75th percentile - with causes and fixes per framework (Next.js, Nuxt, Angular, Astro, SvelteKit, plain HTML), field measurement with web-vitals and the back/forward cache. Use when a page is slow to show, slow to respond or jumps, when PageSpeed or Search Console flags vitals, or when asked "why is LCP or INP bad".

- Targets at the 75th percentile of real visits, mobile and desktop apart: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1.
- The LCP image is in the server HTML with `fetchpriority="high"`; a CSS background LCP image is preloaded (perf/lcp-image).
- Never `loading="lazy"` on the hero or a high-priority image (perf/lcp-image-not-lazy).
- Images and videos have `width` and `height`; embeds and ad slots reserve their space (perf/img-dimensions, perf/layout-shift).
- Head scripts use `defer` or `type="module"`; fonts use `font-display` with a matched fallback (perf/render-blocking-script, perf/font-display).
- Handlers paint first and yield; work over 50 ms is split or moved to a worker (perf/yield-long-tasks).
- Never listen to `unload`; use `pagehide` or `visibilitychange` (perf/bfcache-no-unload).
- Insert late content (banners, toasts, cookie bars) over the page, never above existing content.
- Use the framework's image, font and script components before hand-written tags.
- Judge vitals on field data; a lab run (Lighthouse) only explains the causes.

Before larger changes, read the full skill: `.claude/skills/fe-core-web-vitals/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-core-web-vitals lands for Zed

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-core-web-vitals lands for JetBrains Junie

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-core-web-vitals lands for Kiro

.kiro/skills/fe-core-web-vitals/SKILL.mdskill
.kiro/skills/fe-core-web-vitals/references/vitals.mdskill
.kiro/steering/fe-core-web-vitals.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-core-web-vitals.md

---
inclusion: fileMatch
fileMatchPattern: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.js", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html", "**/*.css", "**/*.scss"]
---

# Core Web Vitals (frontend-skills)

Improves Core Web Vitals in any stack - LCP 2.5 s, INP 200 ms and CLS 0.1 at the 75th percentile - with causes and fixes per framework (Next.js, Nuxt, Angular, Astro, SvelteKit, plain HTML), field measurement with web-vitals and the back/forward cache. Use when a page is slow to show, slow to respond or jumps, when PageSpeed or Search Console flags vitals, or when asked "why is LCP or INP bad".

- Targets at the 75th percentile of real visits, mobile and desktop apart: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1.
- The LCP image is in the server HTML with `fetchpriority="high"`; a CSS background LCP image is preloaded (perf/lcp-image).
- Never `loading="lazy"` on the hero or a high-priority image (perf/lcp-image-not-lazy).
- Images and videos have `width` and `height`; embeds and ad slots reserve their space (perf/img-dimensions, perf/layout-shift).
- Head scripts use `defer` or `type="module"`; fonts use `font-display` with a matched fallback (perf/render-blocking-script, perf/font-display).
- Handlers paint first and yield; work over 50 ms is split or moved to a worker (perf/yield-long-tasks).
- Never listen to `unload`; use `pagehide` or `visibilitychange` (perf/bfcache-no-unload).
- Insert late content (banners, toasts, cookie bars) over the page, never above existing content.
- Use the framework's image, font and script components before hand-written tags.
- Judge vitals on field data; a lab run (Lighthouse) only explains the causes.

Before larger changes, read the full skill: `.kiro/skills/fe-core-web-vitals/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-core-web-vitals lands for Augment

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-core-web-vitals lands for Trae

.trae/skills/fe-core-web-vitals/SKILL.mdskill
.trae/skills/fe-core-web-vitals/references/vitals.mdskill
.trae/rules/fe-core-web-vitals.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-core-web-vitals.md

---
description: "Improves Core Web Vitals in any stack - LCP 2.5 s, INP 200 ms and CLS 0.1 at the 75th percentile - with causes and fixes per framework (Next.js, Nuxt, Angular, Astro, SvelteKit, plain HTML), field measurement with web-vitals and the back/forward cache. Use when a page is slow to show, slow to respond or jumps, when PageSpeed or Search Console flags vitals, or when asked \"why is LCP or INP bad\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.js,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html,**/*.css,**/*.scss
alwaysApply: false
---

# Core Web Vitals (frontend-skills)

- Targets at the 75th percentile of real visits, mobile and desktop apart: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1.
- The LCP image is in the server HTML with `fetchpriority="high"`; a CSS background LCP image is preloaded (perf/lcp-image).
- Never `loading="lazy"` on the hero or a high-priority image (perf/lcp-image-not-lazy).
- Images and videos have `width` and `height`; embeds and ad slots reserve their space (perf/img-dimensions, perf/layout-shift).
- Head scripts use `defer` or `type="module"`; fonts use `font-display` with a matched fallback (perf/render-blocking-script, perf/font-display).
- Handlers paint first and yield; work over 50 ms is split or moved to a worker (perf/yield-long-tasks).
- Never listen to `unload`; use `pagehide` or `visibilitychange` (perf/bfcache-no-unload).
- Insert late content (banners, toasts, cookie bars) over the page, never above existing content.
- Use the framework's image, font and script components before hand-written tags.
- Judge vitals on field data; a lab run (Lighthouse) only explains the causes.

Before larger changes, read the full skill: `.trae/skills/fe-core-web-vitals/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-core-web-vitals lands for Continue

.frontend-skills/skills/fe-core-web-vitals/SKILL.mdskill
.frontend-skills/skills/fe-core-web-vitals/references/vitals.mdskill
.continue/rules/fe-core-web-vitals.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-core-web-vitals.md

---
name: "Core Web Vitals"
description: "Improves Core Web Vitals in any stack - LCP 2.5 s, INP 200 ms and CLS 0.1 at the 75th percentile - with causes and fixes per framework (Next.js, Nuxt, Angular, Astro, SvelteKit, plain HTML), field measurement with web-vitals and the back/forward cache. Use when a page is slow to show, slow to respond or jumps, when PageSpeed or Search Console flags vitals, or when asked \"why is LCP or INP bad\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.js", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html", "**/*.css", "**/*.scss"]
alwaysApply: false
---

# Core Web Vitals (frontend-skills)

- Targets at the 75th percentile of real visits, mobile and desktop apart: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1.
- The LCP image is in the server HTML with `fetchpriority="high"`; a CSS background LCP image is preloaded (perf/lcp-image).
- Never `loading="lazy"` on the hero or a high-priority image (perf/lcp-image-not-lazy).
- Images and videos have `width` and `height`; embeds and ad slots reserve their space (perf/img-dimensions, perf/layout-shift).
- Head scripts use `defer` or `type="module"`; fonts use `font-display` with a matched fallback (perf/render-blocking-script, perf/font-display).
- Handlers paint first and yield; work over 50 ms is split or moved to a worker (perf/yield-long-tasks).
- Never listen to `unload`; use `pagehide` or `visibilitychange` (perf/bfcache-no-unload).
- Insert late content (banners, toasts, cookie bars) over the page, never above existing content.
- Use the framework's image, font and script components before hand-written tags.
- Judge vitals on field data; a lab run (Lighthouse) only explains the causes.

Before larger changes, read the full skill: `.frontend-skills/skills/fe-core-web-vitals/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-core-web-vitals lands for Amazon Q Developer

.frontend-skills/skills/fe-core-web-vitals/SKILL.mdskill
.frontend-skills/skills/fe-core-web-vitals/references/vitals.mdskill
.amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-core-web-vitals` (Core Web Vitals): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.js`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, `**/*.css`, `**/*.scss`, first read `.frontend-skills/skills/fe-core-web-vitals/SKILL.md`.

The real file

Where fe-core-web-vitals lands for Aider

.frontend-skills/skills/fe-core-web-vitals/SKILL.mdskill
.frontend-skills/skills/fe-core-web-vitals/references/vitals.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-core-web-vitals` (Core Web Vitals): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.js`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, `**/*.css`, `**/*.scss`, first read `.frontend-skills/skills/fe-core-web-vitals/SKILL.md`.

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

Phrases from the skill description that make the agent pick it:

why is LCP or INP bad

And to check and fix the work:

Use the fe-core-web-vitals skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain perf/lcp-image and fix it here.

Rules it teaches

perf/lcp-image
The LCP image is in the initial HTML, not lazy, and has fetchpriority="high"; a CSS background LCP image is preloaded.
moderatebrowser
perf/lcp-image-not-lazy
The image most likely to be the Largest Contentful Paint (hero, high priority) is never loading="lazy".
moderatestatic
perf/layout-shift
Nothing moves after it appears - space is reserved for images, embeds, ads and late content (CLS 0.1 or less).
moderatebrowser
perf/yield-long-tasks
Main-thread work over 50 ms is split and yields, and event handlers do the visible update first (INP 200 ms or less).
moderatemanual
perf/bfcache-no-unload
No code listens to the unload event; use pagehide or visibilitychange so the page can use the back/forward cache.
moderatestatic
perf/img-dimensions
Every img has width and height attributes (or a CSS aspect ratio) so the browser reserves its space.
moderatestatic
perf/render-blocking-script
A script in the head loads with defer, async or type="module", never as a plain blocking script.
moderatestatic
perf/font-display
Every @font-face and Google Fonts URL sets font-display (swap or optional) so text is visible while the font loads.
minorstatic

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

Targets at the 75th percentile of real visits, mobile and desktop apart: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1.
The LCP image is in the server HTML with fetchpriority="high"; a CSS background LCP image is preloaded (perf/lcp-image).
Never loading="lazy" on the hero or a high-priority image (perf/lcp-image-not-lazy).
Images and videos have width and height; embeds and ad slots reserve their space (perf/img-dimensions, perf/layout-shift).
Head scripts use defer or type="module"; fonts use font-display with a matched fallback (perf/render-blocking-script, perf/font-display).
Handlers paint first and yield; work over 50 ms is split or moved to a worker (perf/yield-long-tasks).
Never listen to unload; use pagehide or visibilitychange (perf/bfcache-no-unload).
Insert late content (banners, toasts, cookie bars) over the page, never above existing content.
Use the framework's image, font and script components before hand-written tags.
Judge vitals on field data; a lab run (Lighthouse) only explains the causes.

Steps the agent follows

Find the slow metric in field data (PageSpeed Insights field section, Search Console, or web-vitals in the app) for the page type that fails.
LCP: find the LCP element in DevTools Performance; fix in order TTFB (cache the HTML, CDN), discovery (in HTML, not lazy, preload), priority (fetchpriority), size (AVIF or WebP, srcset), render delay (blocking CSS and JS).
CLS: open the layout shift culprits insight; size images, reserve slots, fix font fallbacks, stop inserting content above.
INP: record the slow interaction; shorten the handler, yield before non-visual work, avoid layout reads after writes, render less (virtualise long lists).
Use the framework: Next.js next/image (preload or fetchPriority), next/font, next/script; Nuxt @nuxt/image and @nuxt/fonts; Angular NgOptimizedImage with priority and @defer; Astro islands with client:visible; SvelteKit preloading.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed finds lazy hero images, unsized images, blocking head scripts, missing font-display and unload listeners.
audit --url <page> runs Lighthouse (lab: LCP, CLS, TBT as the INP stand-in) and maps the LCP discovery and layout shift insights to rule ids.
Field: add web-vitals with the attribution build for a week, or read the CrUX data in PageSpeed Insights.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Reference files

references/vitals.md1518 tokens

SKILL.md on GitHub