Wydajność

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-vitalskażdego projektu webowego8 regułładowane zawsze: 108 tokenów; przy użyciu: 956 tokenów; w referencjach na żądanie: 1518 tokenów.

Instalacja

init instaluje ten skill, gdy projekt używa: każdego projektu webowego. Wybierz agenta, aby zobaczyć, gdzie trafią jego pliki.

npx github:dawidolko/frontend-skills init

Ten sposób nie był jeszcze testowany. npx i pnpm dlx są przetestowane; jeśli ten zawiedzie, użyj jednego z nich.

Bez --agents polecenie init rozpoznaje agentów po tym, co projekt już ma, a gdy nie znajdzie żadnego, pyta:

Po czym init rozpoznaje każdego z agentów (17)

Agent	Rozpoznawany po
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`

Gdzie trafia fe-core-web-vitals dla: 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.mdplik reguł
CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: OpenAI Codex

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenAI Codex nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: Cursor

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
.cursor/rules/fe-core-web-vitals.mdcplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: 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.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: Gemini CLI

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
GEMINI.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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 nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: 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.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: 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.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: OpenCode

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenCode nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: Cline

.claude/skills/fe-core-web-vitals/SKILL.mdskill
.claude/skills/fe-core-web-vitals/references/vitals.mdskill
.clinerules/fe-core-web-vitals.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: Zed

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zed nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: JetBrains Junie

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

JetBrains Junie nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: Kiro

.kiro/skills/fe-core-web-vitals/SKILL.mdskill
.kiro/skills/fe-core-web-vitals/references/vitals.mdskill
.kiro/steering/fe-core-web-vitals.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: Augment

.agents/skills/fe-core-web-vitals/SKILL.mdskill
.agents/skills/fe-core-web-vitals/references/vitals.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Augment nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: Trae

.trae/skills/fe-core-web-vitals/SKILL.mdskill
.trae/skills/fe-core-web-vitals/references/vitals.mdskill
.trae/rules/fe-core-web-vitals.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: 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.mdplik reguł

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: 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.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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 nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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`.

Prawdziwy plik

Gdzie trafia fe-core-web-vitals dla: Aider

.frontend-skills/skills/fe-core-web-vitals/SKILL.mdskill
.frontend-skills/skills/fe-core-web-vitals/references/vitals.mdskill
CONVENTIONS.mdblok instrukcji
.aider.conf.ymlkonfiguracja

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Aider nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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`.

Prawdziwy plik

Jak go używać

Po instalacji agent sam ładuje skill, gdy zadanie pasuje do jego opisu. Możesz też poprosić o niego własnymi słowami, na przykład:

Frazy z opisu skilla, po których agent go wybiera (po angielsku, jak w skillu):

why is LCP or INP bad

A żeby sprawdzić i poprawić pracę:

Użyj skilla fe-core-web-vitals na tym pliku.
Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
Wyjaśnij perf/lcp-image i popraw to tutaj.

Reguły, których uczy

perf/lcp-image
The LCP image is in the initial HTML, not lazy, and has fetchpriority="high"; a CSS background LCP image is preloaded.
umiarkowanaw przeglądarce
perf/lcp-image-not-lazy
The image most likely to be the Largest Contentful Paint (hero, high priority) is never loading="lazy".
umiarkowanastatyczne
perf/layout-shift
Nothing moves after it appears - space is reserved for images, embeds, ads and late content (CLS 0.1 or less).
umiarkowanaw przeglądarce
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).
umiarkowanaręczne
perf/bfcache-no-unload
No code listens to the unload event; use pagehide or visibilitychange so the page can use the back/forward cache.
umiarkowanastatyczne
perf/img-dimensions
Every img has width and height attributes (or a CSS aspect ratio) so the browser reserves its space.
umiarkowanastatyczne
perf/render-blocking-script
A script in the head loads with defer, async or type="module", never as a plain blocking script.
umiarkowanastatyczne
perf/font-display
Every @font-face and Google Fonts URL sets font-display (swap or optional) so text is visible while the font loads.
drobnastatyczne

Skrót reguł

Ta część jest kopiowana do zawężonego pliku reguł każdego agenta, więc musi być zrozumiała sama w sobie:

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.

Kroki, które wykonuje agent

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.

Jak agent sprawdza swoją pracę

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.

Sprawdzane audytem

Testy statyczne tych reguł działają w audit; to prawdziwa sesja na przykładowym projekcie:

Nagranie terminala: audit wypisuje znaleziska według wagi z identyfikatorami reguł i miejscem plik:linia i kończy się błędem od progu serious. — `audit`: liczby według wagi, każda reguła z pierwszym miejscem, kod wyjścia.

Pliki referencyjne

references/vitals.md1518 tokenów

SKILL.md na GitHubie