Wydajność

Lighthouse and PageSpeed

Runs and reads Lighthouse 13 for performance, accessibility, best practices and SEO - locally, in Chrome DevTools, PageSpeed Insights and CI with Lighthouse CI - and turns the report into fixes without chasing the score. Use when asked to run Lighthouse or PageSpeed, set up performance budgets or a CI gate, explain a score or an insight, or "get the page to green".

fe-lighthousekażdego projektu webowego6 regułładowane zawsze: 82 tokeny; przy użyciu: 820 tokenów; w referencjach na żądanie: 1485 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-lighthouse dla: Claude Code

.claude/skills/fe-lighthouse/SKILL.mdskill
.claude/skills/fe-lighthouse/references/lighthouse.mdskill
.claude/rules/fe-lighthouse.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-lighthouse.md

---
paths:
  - "**/lighthouserc*"
  - "**/.lighthouserc*"
  - "**/*.html"
---

# Lighthouse and PageSpeed (frontend-skills)

Runs and reads Lighthouse 13 for performance, accessibility, best practices and SEO - locally, in Chrome DevTools, PageSpeed Insights and CI with Lighthouse CI - and turns the report into fixes without chasing the score. Use when asked to run Lighthouse or PageSpeed, set up performance budgets or a CI gate, explain a score or an insight, or "get the page to green".

- The performance score weights TBT 30, LCP 25, CLS 25, FCP 10, Speed Index 10; fix the heaviest failing metric first.
- Run the mobile preset (the default) and `--preset=desktop` separately; report which one.
- Run at least three times and use the median; never gate CI on one run or on 100 (perf/lighthouse-ci).
- A lab score is not a Core Web Vitals result; vitals come from field data at p75 (perf/field-data-p75).
- Lighthouse 13 shows insights (LCP discovery, layout shift culprits, render blocking, third parties) instead of the old opportunities; read them for causes (perf/lcp-image, perf/layout-shift, perf/code-split).
- Accessibility 100 means no automated audit failed, not that the page is accessible; do the manual checks.
- Keep the console free of errors and deprecated APIs (tooling/console-clean).
- Test production builds on a quiet machine in a clean profile (no extensions), not the dev server.
- Never optimise for the score by hiding content from Lighthouse or detecting its user agent.

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

Prawdziwy plik

Gdzie trafia fe-lighthouse dla: OpenAI Codex

.agents/skills/fe-lighthouse/SKILL.mdskill
.agents/skills/fe-lighthouse/references/lighthouse.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-lighthouse dla: Cursor

.agents/skills/fe-lighthouse/SKILL.mdskill
.agents/skills/fe-lighthouse/references/lighthouse.mdskill
.cursor/rules/fe-lighthouse.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-lighthouse.mdc

---
description: Runs and reads Lighthouse 13 for performance, accessibility, best practices and SEO - locally, in Chrome DevTools, PageSpeed Insights and CI with Lighthouse CI - and turns the report into fixes without chasing the score. Use when asked to run Lighthouse or PageSpeed, set up performance budgets or a CI gate, explain a score or an insight, or "get the page to green".
globs: **/lighthouserc*, **/.lighthouserc*, **/*.html
alwaysApply: false
---

# Lighthouse and PageSpeed (frontend-skills)

- The performance score weights TBT 30, LCP 25, CLS 25, FCP 10, Speed Index 10; fix the heaviest failing metric first.
- Run the mobile preset (the default) and `--preset=desktop` separately; report which one.
- Run at least three times and use the median; never gate CI on one run or on 100 (perf/lighthouse-ci).
- A lab score is not a Core Web Vitals result; vitals come from field data at p75 (perf/field-data-p75).
- Lighthouse 13 shows insights (LCP discovery, layout shift culprits, render blocking, third parties) instead of the old opportunities; read them for causes (perf/lcp-image, perf/layout-shift, perf/code-split).
- Accessibility 100 means no automated audit failed, not that the page is accessible; do the manual checks.
- Keep the console free of errors and deprecated APIs (tooling/console-clean).
- Test production builds on a quiet machine in a clean profile (no extensions), not the dev server.
- Never optimise for the score by hiding content from Lighthouse or detecting its user agent.

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

Prawdziwy plik

Gdzie trafia fe-lighthouse dla: GitHub Copilot

.agents/skills/fe-lighthouse/SKILL.mdskill
.agents/skills/fe-lighthouse/references/lighthouse.mdskill
.github/instructions/fe-lighthouse.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-lighthouse.instructions.md

---
applyTo: "**/lighthouserc*,**/.lighthouserc*,**/*.html"
description: "Runs and reads Lighthouse 13 for performance, accessibility, best practices and SEO - locally, in Chrome DevTools, PageSpeed Insights and CI with Lighthouse CI - and turns the report into fixes without chasing the score. Use when asked to run Lighthouse or PageSpeed, set up performance budgets or a CI gate, explain a score or an insight, or \"get the page to green\"."
---

# Lighthouse and PageSpeed (frontend-skills)

- The performance score weights TBT 30, LCP 25, CLS 25, FCP 10, Speed Index 10; fix the heaviest failing metric first.
- Run the mobile preset (the default) and `--preset=desktop` separately; report which one.
- Run at least three times and use the median; never gate CI on one run or on 100 (perf/lighthouse-ci).
- A lab score is not a Core Web Vitals result; vitals come from field data at p75 (perf/field-data-p75).
- Lighthouse 13 shows insights (LCP discovery, layout shift culprits, render blocking, third parties) instead of the old opportunities; read them for causes (perf/lcp-image, perf/layout-shift, perf/code-split).
- Accessibility 100 means no automated audit failed, not that the page is accessible; do the manual checks.
- Keep the console free of errors and deprecated APIs (tooling/console-clean).
- Test production builds on a quiet machine in a clean profile (no extensions), not the dev server.
- Never optimise for the score by hiding content from Lighthouse or detecting its user agent.

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

Prawdziwy plik

Gdzie trafia fe-lighthouse dla: Gemini CLI

.agents/skills/fe-lighthouse/SKILL.mdskill
.agents/skills/fe-lighthouse/references/lighthouse.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-lighthouse dla: Antigravity CLI

.agents/skills/fe-lighthouse/SKILL.mdskill
.agents/skills/fe-lighthouse/references/lighthouse.mdskill
.agents/rules/fe-lighthouse.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-lighthouse.md

---
trigger: glob
globs: "**/lighthouserc*, **/.lighthouserc*, **/*.html"
description: "Runs and reads Lighthouse 13 for performance, accessibility, best practices and SEO - locally, in Chrome DevTools, PageSpeed Insights and CI with Lighthouse CI - and turns the report into fixes without chasing the score. Use when asked to run Lighthouse or PageSpeed, set up performance budgets or a CI gate, explain a score or an insight, or \"get the page to green\"."
---

# Lighthouse and PageSpeed (frontend-skills)

- The performance score weights TBT 30, LCP 25, CLS 25, FCP 10, Speed Index 10; fix the heaviest failing metric first.
- Run the mobile preset (the default) and `--preset=desktop` separately; report which one.
- Run at least three times and use the median; never gate CI on one run or on 100 (perf/lighthouse-ci).
- A lab score is not a Core Web Vitals result; vitals come from field data at p75 (perf/field-data-p75).
- Lighthouse 13 shows insights (LCP discovery, layout shift culprits, render blocking, third parties) instead of the old opportunities; read them for causes (perf/lcp-image, perf/layout-shift, perf/code-split).
- Accessibility 100 means no automated audit failed, not that the page is accessible; do the manual checks.
- Keep the console free of errors and deprecated APIs (tooling/console-clean).
- Test production builds on a quiet machine in a clean profile (no extensions), not the dev server.
- Never optimise for the score by hiding content from Lighthouse or detecting its user agent.

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

Prawdziwy plik

Gdzie trafia fe-lighthouse dla: Devin / Windsurf

.agents/skills/fe-lighthouse/SKILL.mdskill
.agents/skills/fe-lighthouse/references/lighthouse.mdskill
.devin/rules/fe-lighthouse.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-lighthouse.md

---
trigger: glob
globs: "**/lighthouserc*,**/.lighthouserc*,**/*.html"
---

# Lighthouse and PageSpeed (frontend-skills)

Runs and reads Lighthouse 13 for performance, accessibility, best practices and SEO - locally, in Chrome DevTools, PageSpeed Insights and CI with Lighthouse CI - and turns the report into fixes without chasing the score. Use when asked to run Lighthouse or PageSpeed, set up performance budgets or a CI gate, explain a score or an insight, or "get the page to green".

- The performance score weights TBT 30, LCP 25, CLS 25, FCP 10, Speed Index 10; fix the heaviest failing metric first.
- Run the mobile preset (the default) and `--preset=desktop` separately; report which one.
- Run at least three times and use the median; never gate CI on one run or on 100 (perf/lighthouse-ci).
- A lab score is not a Core Web Vitals result; vitals come from field data at p75 (perf/field-data-p75).
- Lighthouse 13 shows insights (LCP discovery, layout shift culprits, render blocking, third parties) instead of the old opportunities; read them for causes (perf/lcp-image, perf/layout-shift, perf/code-split).
- Accessibility 100 means no automated audit failed, not that the page is accessible; do the manual checks.
- Keep the console free of errors and deprecated APIs (tooling/console-clean).
- Test production builds on a quiet machine in a clean profile (no extensions), not the dev server.
- Never optimise for the score by hiding content from Lighthouse or detecting its user agent.

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

Prawdziwy plik

Gdzie trafia fe-lighthouse dla: OpenCode

.agents/skills/fe-lighthouse/SKILL.mdskill
.agents/skills/fe-lighthouse/references/lighthouse.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-lighthouse dla: Cline

.claude/skills/fe-lighthouse/SKILL.mdskill
.claude/skills/fe-lighthouse/references/lighthouse.mdskill
.clinerules/fe-lighthouse.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-lighthouse.md

---
paths:
  - "**/lighthouserc*"
  - "**/.lighthouserc*"
  - "**/*.html"
---

# Lighthouse and PageSpeed (frontend-skills)

Runs and reads Lighthouse 13 for performance, accessibility, best practices and SEO - locally, in Chrome DevTools, PageSpeed Insights and CI with Lighthouse CI - and turns the report into fixes without chasing the score. Use when asked to run Lighthouse or PageSpeed, set up performance budgets or a CI gate, explain a score or an insight, or "get the page to green".

- The performance score weights TBT 30, LCP 25, CLS 25, FCP 10, Speed Index 10; fix the heaviest failing metric first.
- Run the mobile preset (the default) and `--preset=desktop` separately; report which one.
- Run at least three times and use the median; never gate CI on one run or on 100 (perf/lighthouse-ci).
- A lab score is not a Core Web Vitals result; vitals come from field data at p75 (perf/field-data-p75).
- Lighthouse 13 shows insights (LCP discovery, layout shift culprits, render blocking, third parties) instead of the old opportunities; read them for causes (perf/lcp-image, perf/layout-shift, perf/code-split).
- Accessibility 100 means no automated audit failed, not that the page is accessible; do the manual checks.
- Keep the console free of errors and deprecated APIs (tooling/console-clean).
- Test production builds on a quiet machine in a clean profile (no extensions), not the dev server.
- Never optimise for the score by hiding content from Lighthouse or detecting its user agent.

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

Prawdziwy plik

Gdzie trafia fe-lighthouse dla: Zed

.agents/skills/fe-lighthouse/SKILL.mdskill
.agents/skills/fe-lighthouse/references/lighthouse.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-lighthouse dla: JetBrains Junie

.agents/skills/fe-lighthouse/SKILL.mdskill
.agents/skills/fe-lighthouse/references/lighthouse.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-lighthouse dla: Kiro

.kiro/skills/fe-lighthouse/SKILL.mdskill
.kiro/skills/fe-lighthouse/references/lighthouse.mdskill
.kiro/steering/fe-lighthouse.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-lighthouse.md

---
inclusion: fileMatch
fileMatchPattern: ["**/lighthouserc*", "**/.lighthouserc*", "**/*.html"]
---

# Lighthouse and PageSpeed (frontend-skills)

Runs and reads Lighthouse 13 for performance, accessibility, best practices and SEO - locally, in Chrome DevTools, PageSpeed Insights and CI with Lighthouse CI - and turns the report into fixes without chasing the score. Use when asked to run Lighthouse or PageSpeed, set up performance budgets or a CI gate, explain a score or an insight, or "get the page to green".

- The performance score weights TBT 30, LCP 25, CLS 25, FCP 10, Speed Index 10; fix the heaviest failing metric first.
- Run the mobile preset (the default) and `--preset=desktop` separately; report which one.
- Run at least three times and use the median; never gate CI on one run or on 100 (perf/lighthouse-ci).
- A lab score is not a Core Web Vitals result; vitals come from field data at p75 (perf/field-data-p75).
- Lighthouse 13 shows insights (LCP discovery, layout shift culprits, render blocking, third parties) instead of the old opportunities; read them for causes (perf/lcp-image, perf/layout-shift, perf/code-split).
- Accessibility 100 means no automated audit failed, not that the page is accessible; do the manual checks.
- Keep the console free of errors and deprecated APIs (tooling/console-clean).
- Test production builds on a quiet machine in a clean profile (no extensions), not the dev server.
- Never optimise for the score by hiding content from Lighthouse or detecting its user agent.

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

Prawdziwy plik

Gdzie trafia fe-lighthouse dla: Augment

.agents/skills/fe-lighthouse/SKILL.mdskill
.agents/skills/fe-lighthouse/references/lighthouse.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-lighthouse dla: Trae

.trae/skills/fe-lighthouse/SKILL.mdskill
.trae/skills/fe-lighthouse/references/lighthouse.mdskill
.trae/rules/fe-lighthouse.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-lighthouse.md

---
description: "Runs and reads Lighthouse 13 for performance, accessibility, best practices and SEO - locally, in Chrome DevTools, PageSpeed Insights and CI with Lighthouse CI - and turns the report into fixes without chasing the score. Use when asked to run Lighthouse or PageSpeed, set up performance budgets or a CI gate, explain a score or an insight, or \"get the page to green\"."
globs: **/lighthouserc*,**/.lighthouserc*,**/*.html
alwaysApply: false
---

# Lighthouse and PageSpeed (frontend-skills)

- The performance score weights TBT 30, LCP 25, CLS 25, FCP 10, Speed Index 10; fix the heaviest failing metric first.
- Run the mobile preset (the default) and `--preset=desktop` separately; report which one.
- Run at least three times and use the median; never gate CI on one run or on 100 (perf/lighthouse-ci).
- A lab score is not a Core Web Vitals result; vitals come from field data at p75 (perf/field-data-p75).
- Lighthouse 13 shows insights (LCP discovery, layout shift culprits, render blocking, third parties) instead of the old opportunities; read them for causes (perf/lcp-image, perf/layout-shift, perf/code-split).
- Accessibility 100 means no automated audit failed, not that the page is accessible; do the manual checks.
- Keep the console free of errors and deprecated APIs (tooling/console-clean).
- Test production builds on a quiet machine in a clean profile (no extensions), not the dev server.
- Never optimise for the score by hiding content from Lighthouse or detecting its user agent.

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

Prawdziwy plik

Gdzie trafia fe-lighthouse dla: Continue

.frontend-skills/skills/fe-lighthouse/SKILL.mdskill
.frontend-skills/skills/fe-lighthouse/references/lighthouse.mdskill
.continue/rules/fe-lighthouse.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-lighthouse.md

---
name: "Lighthouse and PageSpeed"
description: "Runs and reads Lighthouse 13 for performance, accessibility, best practices and SEO - locally, in Chrome DevTools, PageSpeed Insights and CI with Lighthouse CI - and turns the report into fixes without chasing the score. Use when asked to run Lighthouse or PageSpeed, set up performance budgets or a CI gate, explain a score or an insight, or \"get the page to green\"."
globs: ["**/lighthouserc*", "**/.lighthouserc*", "**/*.html"]
alwaysApply: false
---

# Lighthouse and PageSpeed (frontend-skills)

- The performance score weights TBT 30, LCP 25, CLS 25, FCP 10, Speed Index 10; fix the heaviest failing metric first.
- Run the mobile preset (the default) and `--preset=desktop` separately; report which one.
- Run at least three times and use the median; never gate CI on one run or on 100 (perf/lighthouse-ci).
- A lab score is not a Core Web Vitals result; vitals come from field data at p75 (perf/field-data-p75).
- Lighthouse 13 shows insights (LCP discovery, layout shift culprits, render blocking, third parties) instead of the old opportunities; read them for causes (perf/lcp-image, perf/layout-shift, perf/code-split).
- Accessibility 100 means no automated audit failed, not that the page is accessible; do the manual checks.
- Keep the console free of errors and deprecated APIs (tooling/console-clean).
- Test production builds on a quiet machine in a clean profile (no extensions), not the dev server.
- Never optimise for the score by hiding content from Lighthouse or detecting its user agent.

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

Prawdziwy plik

Gdzie trafia fe-lighthouse dla: Amazon Q Developer

.frontend-skills/skills/fe-lighthouse/SKILL.mdskill
.frontend-skills/skills/fe-lighthouse/references/lighthouse.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-lighthouse` (Lighthouse and PageSpeed): when editing `**/lighthouserc*`, `**/.lighthouserc*`, `**/*.html`, first read `.frontend-skills/skills/fe-lighthouse/SKILL.md`.

Prawdziwy plik

Gdzie trafia fe-lighthouse dla: Aider

.frontend-skills/skills/fe-lighthouse/SKILL.mdskill
.frontend-skills/skills/fe-lighthouse/references/lighthouse.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-lighthouse` (Lighthouse and PageSpeed): when editing `**/lighthouserc*`, `**/.lighthouserc*`, `**/*.html`, first read `.frontend-skills/skills/fe-lighthouse/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):

get the page to green

A żeby sprawdzić i poprawić pracę:

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

Reguły, których uczy

perf/lighthouse-ci
Lighthouse in CI runs each URL several times, asserts on metrics and categories with realistic thresholds, and never demands a perfect 100.
drobnaręczne
perf/field-data-p75
Claims about Core Web Vitals come from field data at the 75th percentile, not from a Lighthouse score.
drobnaręczne
tooling/console-clean
Pages log no errors and use no deprecated browser APIs, as seen in the console on load and in the main flows.
drobnaw przeglądarce
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/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/code-split
JavaScript is split by route, and features that most visits do not use load on demand with dynamic import().
umiarkowanaw przeglądarce

Skrót reguł

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

The performance score weights TBT 30, LCP 25, CLS 25, FCP 10, Speed Index 10; fix the heaviest failing metric first.
Run the mobile preset (the default) and --preset=desktop separately; report which one.
Run at least three times and use the median; never gate CI on one run or on 100 (perf/lighthouse-ci).
A lab score is not a Core Web Vitals result; vitals come from field data at p75 (perf/field-data-p75).
Lighthouse 13 shows insights (LCP discovery, layout shift culprits, render blocking, third parties) instead of the old opportunities; read them for causes (perf/lcp-image, perf/layout-shift, perf/code-split).
Accessibility 100 means no automated audit failed, not that the page is accessible; do the manual checks.
Keep the console free of errors and deprecated APIs (tooling/console-clean).
Test production builds on a quiet machine in a clean profile (no extensions), not the dev server.
Never optimise for the score by hiding content from Lighthouse or detecting its user agent.

Kroki, które wykonuje agent

Build and serve the production output locally (npm run build then the framework's preview), or use the deployed URL.
Run npx github:dawidolko/frontend-skills audit --url <url>: it runs Lighthouse and axe-core in the local Chrome (after a yes) and maps results to rule ids. Or run npx lighthouse@13.6.0 <url> --output=json --output-path=./lh.json --quiet.
Read in order: metric values, then the insights for the failing metric, then diagnostics. Fix one cause, rebuild, rerun three times.
For CI, add @lhci/cli with a lighthouserc.json: several URLs, numberOfRuns: 3, metric assertions, results kept as artefacts.
Write results with the tool version, preset, number of runs and date.

Jak agent sprawdza swoją pracę

npx github:dawidolko/frontend-skills audit --url <url> gives the four category scores, the lab metrics and findings by rule id.
PageSpeed Insights (https://pagespeed.web.dev/) adds field data for public URLs with enough traffic.
Compare two runs with the Lighthouse viewer or lhci server only when both used the same preset and machine.

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/lighthouse.md1485 tokenów

SKILL.md na GitHubie