Wydajność

JavaScript, CSS and asset delivery

Ships less and earlier - JavaScript and CSS delivery, code splitting, hydration cost, third-party scripts and facades, resource hints, caching headers and modern browser targets - in any stack. Use when a bundle is large, a page loads many scripts, adding analytics, a widget or a dependency, setting cache headers, or when asked "why is this page heavy" or "reduce JavaScript".

fe-perf-deliverykażdego projektu webowego8 regułładowane zawsze: 81 tokenów; przy użyciu: 837 tokenów; w referencjach na żądanie: 1431 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-perf-delivery dla: Claude Code

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

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

# JavaScript, CSS and asset delivery (frontend-skills)

Ships less and earlier - JavaScript and CSS delivery, code splitting, hydration cost, third-party scripts and facades, resource hints, caching headers and modern browser targets - in any stack. Use when a bundle is large, a page loads many scripts, adding analytics, a widget or a dependency, setting cache headers, or when asked "why is this page heavy" or "reduce JavaScript".

- Head scripts use `defer` or `type="module"`; third-party scripts use `async`, `defer` or a framework strategy (perf/render-blocking-script, perf/third-party-async).
- Shipped CSS never chains files with `@import`; link them or bundle them (perf/css-no-import).
- Never import all of `lodash` or `moment` in client code; use `lodash-es`, per-method paths or `Intl` (perf/no-whole-library-import).
- Split by route and load rare features with `import()` (perf/code-split).
- Each third party has an owner and a reason, loads late, and heavy embeds start as a facade (perf/third-party-cost).
- Hashed assets are cached a year as `immutable`; HTML is `no-cache` (perf/cache-static-assets).
- Declare browser targets once; no blanket polyfills for Baseline features (perf/no-legacy-javascript).
- Hydrate only what is interactive: server-render static parts, use islands or server components.
- Preconnect to at most two or three critical origins; preload only late-discovered critical files.
- Before adding a dependency, check its size and whether the platform already does it.

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

Prawdziwy plik

Gdzie trafia fe-perf-delivery dla: OpenAI Codex

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

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

---
description: Ships less and earlier - JavaScript and CSS delivery, code splitting, hydration cost, third-party scripts and facades, resource hints, caching headers and modern browser targets - in any stack. Use when a bundle is large, a page loads many scripts, adding analytics, a widget or a dependency, setting cache headers, or when asked "why is this page heavy" or "reduce JavaScript".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.js, **/*.vue, **/*.svelte, **/*.astro, **/*.css
alwaysApply: false
---

# JavaScript, CSS and asset delivery (frontend-skills)

- Head scripts use `defer` or `type="module"`; third-party scripts use `async`, `defer` or a framework strategy (perf/render-blocking-script, perf/third-party-async).
- Shipped CSS never chains files with `@import`; link them or bundle them (perf/css-no-import).
- Never import all of `lodash` or `moment` in client code; use `lodash-es`, per-method paths or `Intl` (perf/no-whole-library-import).
- Split by route and load rare features with `import()` (perf/code-split).
- Each third party has an owner and a reason, loads late, and heavy embeds start as a facade (perf/third-party-cost).
- Hashed assets are cached a year as `immutable`; HTML is `no-cache` (perf/cache-static-assets).
- Declare browser targets once; no blanket polyfills for Baseline features (perf/no-legacy-javascript).
- Hydrate only what is interactive: server-render static parts, use islands or server components.
- Preconnect to at most two or three critical origins; preload only late-discovered critical files.
- Before adding a dependency, check its size and whether the platform already does it.

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

Prawdziwy plik

Gdzie trafia fe-perf-delivery dla: GitHub Copilot

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

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.js,**/*.vue,**/*.svelte,**/*.astro,**/*.css"
description: "Ships less and earlier - JavaScript and CSS delivery, code splitting, hydration cost, third-party scripts and facades, resource hints, caching headers and modern browser targets - in any stack. Use when a bundle is large, a page loads many scripts, adding analytics, a widget or a dependency, setting cache headers, or when asked \"why is this page heavy\" or \"reduce JavaScript\"."
---

# JavaScript, CSS and asset delivery (frontend-skills)

- Head scripts use `defer` or `type="module"`; third-party scripts use `async`, `defer` or a framework strategy (perf/render-blocking-script, perf/third-party-async).
- Shipped CSS never chains files with `@import`; link them or bundle them (perf/css-no-import).
- Never import all of `lodash` or `moment` in client code; use `lodash-es`, per-method paths or `Intl` (perf/no-whole-library-import).
- Split by route and load rare features with `import()` (perf/code-split).
- Each third party has an owner and a reason, loads late, and heavy embeds start as a facade (perf/third-party-cost).
- Hashed assets are cached a year as `immutable`; HTML is `no-cache` (perf/cache-static-assets).
- Declare browser targets once; no blanket polyfills for Baseline features (perf/no-legacy-javascript).
- Hydrate only what is interactive: server-render static parts, use islands or server components.
- Preconnect to at most two or three critical origins; preload only late-discovered critical files.
- Before adding a dependency, check its size and whether the platform already does it.

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

Prawdziwy plik

Gdzie trafia fe-perf-delivery dla: Gemini CLI

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

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

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.js, **/*.vue, **/*.svelte, **/*.astro, **/*.css"
description: "Ships less and earlier - JavaScript and CSS delivery, code splitting, hydration cost, third-party scripts and facades, resource hints, caching headers and modern browser targets - in any stack. Use when a bundle is large, a page loads many scripts, adding analytics, a widget or a dependency, setting cache headers, or when asked \"why is this page heavy\" or \"reduce JavaScript\"."
---

# JavaScript, CSS and asset delivery (frontend-skills)

- Head scripts use `defer` or `type="module"`; third-party scripts use `async`, `defer` or a framework strategy (perf/render-blocking-script, perf/third-party-async).
- Shipped CSS never chains files with `@import`; link them or bundle them (perf/css-no-import).
- Never import all of `lodash` or `moment` in client code; use `lodash-es`, per-method paths or `Intl` (perf/no-whole-library-import).
- Split by route and load rare features with `import()` (perf/code-split).
- Each third party has an owner and a reason, loads late, and heavy embeds start as a facade (perf/third-party-cost).
- Hashed assets are cached a year as `immutable`; HTML is `no-cache` (perf/cache-static-assets).
- Declare browser targets once; no blanket polyfills for Baseline features (perf/no-legacy-javascript).
- Hydrate only what is interactive: server-render static parts, use islands or server components.
- Preconnect to at most two or three critical origins; preload only late-discovered critical files.
- Before adding a dependency, check its size and whether the platform already does it.

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

Prawdziwy plik

Gdzie trafia fe-perf-delivery dla: Devin / Windsurf

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

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

# JavaScript, CSS and asset delivery (frontend-skills)

Ships less and earlier - JavaScript and CSS delivery, code splitting, hydration cost, third-party scripts and facades, resource hints, caching headers and modern browser targets - in any stack. Use when a bundle is large, a page loads many scripts, adding analytics, a widget or a dependency, setting cache headers, or when asked "why is this page heavy" or "reduce JavaScript".

- Head scripts use `defer` or `type="module"`; third-party scripts use `async`, `defer` or a framework strategy (perf/render-blocking-script, perf/third-party-async).
- Shipped CSS never chains files with `@import`; link them or bundle them (perf/css-no-import).
- Never import all of `lodash` or `moment` in client code; use `lodash-es`, per-method paths or `Intl` (perf/no-whole-library-import).
- Split by route and load rare features with `import()` (perf/code-split).
- Each third party has an owner and a reason, loads late, and heavy embeds start as a facade (perf/third-party-cost).
- Hashed assets are cached a year as `immutable`; HTML is `no-cache` (perf/cache-static-assets).
- Declare browser targets once; no blanket polyfills for Baseline features (perf/no-legacy-javascript).
- Hydrate only what is interactive: server-render static parts, use islands or server components.
- Preconnect to at most two or three critical origins; preload only late-discovered critical files.
- Before adding a dependency, check its size and whether the platform already does it.

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

Prawdziwy plik

Gdzie trafia fe-perf-delivery dla: OpenCode

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

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

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

# JavaScript, CSS and asset delivery (frontend-skills)

Ships less and earlier - JavaScript and CSS delivery, code splitting, hydration cost, third-party scripts and facades, resource hints, caching headers and modern browser targets - in any stack. Use when a bundle is large, a page loads many scripts, adding analytics, a widget or a dependency, setting cache headers, or when asked "why is this page heavy" or "reduce JavaScript".

- Head scripts use `defer` or `type="module"`; third-party scripts use `async`, `defer` or a framework strategy (perf/render-blocking-script, perf/third-party-async).
- Shipped CSS never chains files with `@import`; link them or bundle them (perf/css-no-import).
- Never import all of `lodash` or `moment` in client code; use `lodash-es`, per-method paths or `Intl` (perf/no-whole-library-import).
- Split by route and load rare features with `import()` (perf/code-split).
- Each third party has an owner and a reason, loads late, and heavy embeds start as a facade (perf/third-party-cost).
- Hashed assets are cached a year as `immutable`; HTML is `no-cache` (perf/cache-static-assets).
- Declare browser targets once; no blanket polyfills for Baseline features (perf/no-legacy-javascript).
- Hydrate only what is interactive: server-render static parts, use islands or server components.
- Preconnect to at most two or three critical origins; preload only late-discovered critical files.
- Before adding a dependency, check its size and whether the platform already does it.

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

Prawdziwy plik

Gdzie trafia fe-perf-delivery dla: Zed

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

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

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

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

# JavaScript, CSS and asset delivery (frontend-skills)

Ships less and earlier - JavaScript and CSS delivery, code splitting, hydration cost, third-party scripts and facades, resource hints, caching headers and modern browser targets - in any stack. Use when a bundle is large, a page loads many scripts, adding analytics, a widget or a dependency, setting cache headers, or when asked "why is this page heavy" or "reduce JavaScript".

- Head scripts use `defer` or `type="module"`; third-party scripts use `async`, `defer` or a framework strategy (perf/render-blocking-script, perf/third-party-async).
- Shipped CSS never chains files with `@import`; link them or bundle them (perf/css-no-import).
- Never import all of `lodash` or `moment` in client code; use `lodash-es`, per-method paths or `Intl` (perf/no-whole-library-import).
- Split by route and load rare features with `import()` (perf/code-split).
- Each third party has an owner and a reason, loads late, and heavy embeds start as a facade (perf/third-party-cost).
- Hashed assets are cached a year as `immutable`; HTML is `no-cache` (perf/cache-static-assets).
- Declare browser targets once; no blanket polyfills for Baseline features (perf/no-legacy-javascript).
- Hydrate only what is interactive: server-render static parts, use islands or server components.
- Preconnect to at most two or three critical origins; preload only late-discovered critical files.
- Before adding a dependency, check its size and whether the platform already does it.

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

Prawdziwy plik

Gdzie trafia fe-perf-delivery dla: Augment

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

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

---
description: "Ships less and earlier - JavaScript and CSS delivery, code splitting, hydration cost, third-party scripts and facades, resource hints, caching headers and modern browser targets - in any stack. Use when a bundle is large, a page loads many scripts, adding analytics, a widget or a dependency, setting cache headers, or when asked \"why is this page heavy\" or \"reduce JavaScript\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.js,**/*.vue,**/*.svelte,**/*.astro,**/*.css
alwaysApply: false
---

# JavaScript, CSS and asset delivery (frontend-skills)

- Head scripts use `defer` or `type="module"`; third-party scripts use `async`, `defer` or a framework strategy (perf/render-blocking-script, perf/third-party-async).
- Shipped CSS never chains files with `@import`; link them or bundle them (perf/css-no-import).
- Never import all of `lodash` or `moment` in client code; use `lodash-es`, per-method paths or `Intl` (perf/no-whole-library-import).
- Split by route and load rare features with `import()` (perf/code-split).
- Each third party has an owner and a reason, loads late, and heavy embeds start as a facade (perf/third-party-cost).
- Hashed assets are cached a year as `immutable`; HTML is `no-cache` (perf/cache-static-assets).
- Declare browser targets once; no blanket polyfills for Baseline features (perf/no-legacy-javascript).
- Hydrate only what is interactive: server-render static parts, use islands or server components.
- Preconnect to at most two or three critical origins; preload only late-discovered critical files.
- Before adding a dependency, check its size and whether the platform already does it.

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

Prawdziwy plik

Gdzie trafia fe-perf-delivery dla: Continue

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

---
name: "JavaScript, CSS and asset delivery"
description: "Ships less and earlier - JavaScript and CSS delivery, code splitting, hydration cost, third-party scripts and facades, resource hints, caching headers and modern browser targets - in any stack. Use when a bundle is large, a page loads many scripts, adding analytics, a widget or a dependency, setting cache headers, or when asked \"why is this page heavy\" or \"reduce JavaScript\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.js", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.css"]
alwaysApply: false
---

# JavaScript, CSS and asset delivery (frontend-skills)

- Head scripts use `defer` or `type="module"`; third-party scripts use `async`, `defer` or a framework strategy (perf/render-blocking-script, perf/third-party-async).
- Shipped CSS never chains files with `@import`; link them or bundle them (perf/css-no-import).
- Never import all of `lodash` or `moment` in client code; use `lodash-es`, per-method paths or `Intl` (perf/no-whole-library-import).
- Split by route and load rare features with `import()` (perf/code-split).
- Each third party has an owner and a reason, loads late, and heavy embeds start as a facade (perf/third-party-cost).
- Hashed assets are cached a year as `immutable`; HTML is `no-cache` (perf/cache-static-assets).
- Declare browser targets once; no blanket polyfills for Baseline features (perf/no-legacy-javascript).
- Hydrate only what is interactive: server-render static parts, use islands or server components.
- Preconnect to at most two or three critical origins; preload only late-discovered critical files.
- Before adding a dependency, check its size and whether the platform already does it.

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

Prawdziwy plik

Gdzie trafia fe-perf-delivery dla: Amazon Q Developer

.frontend-skills/skills/fe-perf-delivery/SKILL.mdskill
.frontend-skills/skills/fe-perf-delivery/references/delivery.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-perf-delivery` (JavaScript, CSS and asset delivery): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.js`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.css`, first read `.frontend-skills/skills/fe-perf-delivery/SKILL.md`.

Prawdziwy plik

Gdzie trafia fe-perf-delivery dla: Aider

.frontend-skills/skills/fe-perf-delivery/SKILL.mdskill
.frontend-skills/skills/fe-perf-delivery/references/delivery.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-perf-delivery` (JavaScript, CSS and asset delivery): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.js`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.css`, first read `.frontend-skills/skills/fe-perf-delivery/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 this page heavy
reduce JavaScript

A żeby sprawdzić i poprawić pracę:

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

Reguły, których uczy

perf/render-blocking-script
A script in the head loads with defer, async or type="module", never as a plain blocking script.
umiarkowanastatyczne
perf/third-party-async
Third-party scripts load with async or defer (or a framework strategy such as lazyOnload), never as parser-blocking tags.
umiarkowanastatyczne
perf/css-no-import
Shipped CSS does not chain stylesheets with @import; link them in the HTML or combine them in a build.
umiarkowanastatyczne
perf/no-whole-library-import
Client code does not import all of lodash or moment; use lodash-es, per-method imports, Intl or the platform.
umiarkowanastatyczne
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
perf/third-party-cost
Each third-party script earns its place, loads late, and heavy embeds (video, maps, chat) start as a lightweight facade.
umiarkowanaw przeglądarce
perf/cache-static-assets
Content-hashed assets are cached for a year as immutable; HTML is revalidated (no-cache), never cached long.
umiarkowanaw przeglądarce
perf/no-legacy-javascript
Do not ship polyfills and down-level transforms for features your target browsers already support; declare targets once.
drobnaw 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:

Head scripts use defer or type="module"; third-party scripts use async, defer or a framework strategy (perf/render-blocking-script, perf/third-party-async).
Shipped CSS never chains files with @import; link them or bundle them (perf/css-no-import).
Never import all of lodash or moment in client code; use lodash-es, per-method paths or Intl (perf/no-whole-library-import).
Split by route and load rare features with import() (perf/code-split).
Each third party has an owner and a reason, loads late, and heavy embeds start as a facade (perf/third-party-cost).
Hashed assets are cached a year as immutable; HTML is no-cache (perf/cache-static-assets).
Declare browser targets once; no blanket polyfills for Baseline features (perf/no-legacy-javascript).
Hydrate only what is interactive: server-render static parts, use islands or server components.
Preconnect to at most two or three critical origins; preload only late-discovered critical files.
Before adding a dependency, check its size and whether the platform already does it.

Kroki, które wykonuje agent

Measure first: the build's bundle report (rollup-plugin-visualizer, @next/bundle-analyzer, Lighthouse treemap) and the network panel on a throttled mobile profile.
Remove before you optimise: unused dependencies, duplicate libraries, dead routes, polyfills for old browsers.
Move work off the critical path: defer scripts, lazy routes and dialogs, client:visible or @defer for below-the-fold widgets.
Shrink what stays: tree-shakable imports, modern targets, Brotli compression on the host, small critical CSS.
Set caching once in the host configuration, and verify the response headers of a deployed page.

Jak agent sprawdza swoją pracę

npx github:dawidolko/frontend-skills audit --changed finds blocking head and third-party scripts, CSS @import chains in plain sites and whole-library imports.
audit --url <page> maps Lighthouse's unused JavaScript, third parties, cache lifetimes and legacy JavaScript results to these rule ids.
By hand: compare the bundle report before and after a change; a new dependency over ~20 kB gzip needs a reason in the pull request.

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/delivery.md1431 tokenów

SKILL.md na GitHubie