Performance

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-deliveryevery web project8 rules81 tokens always loaded, 837 tokens when used, 1431 tokens in references on demand.

Install

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

npx github:dawidolko/frontend-skills init

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

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

How init finds each of the 17 agents

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

Where fe-perf-delivery lands for Claude Code

.claude/skills/fe-perf-delivery/SKILL.mdskill
.claude/skills/fe-perf-delivery/references/delivery.mdskill
.claude/rules/fe-perf-delivery.mdrule file
CLAUDE.mdinstruction block

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

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

.claude/rules/fe-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>`.

The real file

Where fe-perf-delivery lands for OpenAI Codex

.agents/skills/fe-perf-delivery/SKILL.mdskill
.agents/skills/fe-perf-delivery/references/delivery.mdskill
AGENTS.mdinstruction block

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

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

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

AGENTS.md

## Front-end work (frontend-skills)

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

The real file

Where fe-perf-delivery lands for Cursor

.agents/skills/fe-perf-delivery/SKILL.mdskill
.agents/skills/fe-perf-delivery/references/delivery.mdskill
.cursor/rules/fe-perf-delivery.mdcrule file
AGENTS.mdinstruction block

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

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

.cursor/rules/fe-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>`.

The real file

Where fe-perf-delivery lands for GitHub Copilot

.agents/skills/fe-perf-delivery/SKILL.mdskill
.agents/skills/fe-perf-delivery/references/delivery.mdskill
.github/instructions/fe-perf-delivery.instructions.mdrule file
AGENTS.mdinstruction block

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

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

.github/instructions/fe-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>`.

The real file

Where fe-perf-delivery lands for Gemini CLI

.agents/skills/fe-perf-delivery/SKILL.mdskill
.agents/skills/fe-perf-delivery/references/delivery.mdskill
GEMINI.mdinstruction block

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

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

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

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

GEMINI.md

## Front-end work (frontend-skills)

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

The real file

Where fe-perf-delivery lands for Antigravity CLI

.agents/skills/fe-perf-delivery/SKILL.mdskill
.agents/skills/fe-perf-delivery/references/delivery.mdskill
.agents/rules/fe-perf-delivery.mdrule file
AGENTS.mdinstruction block

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

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

.agents/rules/fe-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>`.

The real file

Where fe-perf-delivery lands for Devin / Windsurf

.agents/skills/fe-perf-delivery/SKILL.mdskill
.agents/skills/fe-perf-delivery/references/delivery.mdskill
.devin/rules/fe-perf-delivery.mdrule file
AGENTS.mdinstruction block

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

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

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

.devin/rules/fe-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>`.

The real file

Where fe-perf-delivery lands for OpenCode

.agents/skills/fe-perf-delivery/SKILL.mdskill
.agents/skills/fe-perf-delivery/references/delivery.mdskill
AGENTS.mdinstruction block

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

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

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

AGENTS.md

## Front-end work (frontend-skills)

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

The real file

Where fe-perf-delivery lands for Cline

.claude/skills/fe-perf-delivery/SKILL.mdskill
.claude/skills/fe-perf-delivery/references/delivery.mdskill
.clinerules/fe-perf-delivery.mdrule file
AGENTS.mdinstruction block

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

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

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

.clinerules/fe-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>`.

The real file

Where fe-perf-delivery lands for Zed

.agents/skills/fe-perf-delivery/SKILL.mdskill
.agents/skills/fe-perf-delivery/references/delivery.mdskill
CLAUDE.mdinstruction block

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

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

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

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

CLAUDE.md

## Front-end work (frontend-skills)

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

The real file

Where fe-perf-delivery lands for JetBrains Junie

.agents/skills/fe-perf-delivery/SKILL.mdskill
.agents/skills/fe-perf-delivery/references/delivery.mdskill
AGENTS.mdinstruction block

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

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

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

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

AGENTS.md

## Front-end work (frontend-skills)

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

The real file

Where fe-perf-delivery lands for Kiro

.kiro/skills/fe-perf-delivery/SKILL.mdskill
.kiro/skills/fe-perf-delivery/references/delivery.mdskill
.kiro/steering/fe-perf-delivery.mdrule file
AGENTS.mdinstruction block

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

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

.kiro/steering/fe-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>`.

The real file

Where fe-perf-delivery lands for Augment

.agents/skills/fe-perf-delivery/SKILL.mdskill
.agents/skills/fe-perf-delivery/references/delivery.mdskill
AGENTS.mdinstruction block

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

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

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

AGENTS.md

## Front-end work (frontend-skills)

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

The real file

Where fe-perf-delivery lands for Trae

.trae/skills/fe-perf-delivery/SKILL.mdskill
.trae/skills/fe-perf-delivery/references/delivery.mdskill
.trae/rules/fe-perf-delivery.mdrule file
AGENTS.mdinstruction block

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

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

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

.trae/rules/fe-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>`.

The real file

Where fe-perf-delivery lands for Continue

.frontend-skills/skills/fe-perf-delivery/SKILL.mdskill
.frontend-skills/skills/fe-perf-delivery/references/delivery.mdskill
.continue/rules/fe-perf-delivery.mdrule file

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

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

.continue/rules/fe-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>`.

The real file

Where fe-perf-delivery lands for Amazon Q Developer

.frontend-skills/skills/fe-perf-delivery/SKILL.mdskill
.frontend-skills/skills/fe-perf-delivery/references/delivery.mdskill
.amazonq/rules/frontend-skills.mdinstruction block

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

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

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

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

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

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

### Skills

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

The real file

Where fe-perf-delivery lands for Aider

.frontend-skills/skills/fe-perf-delivery/SKILL.mdskill
.frontend-skills/skills/fe-perf-delivery/references/delivery.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

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

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

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

CONVENTIONS.md

## Front-end work (frontend-skills)

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

### Skills

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

The real file

How to use it

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

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

why is this page heavy
reduce JavaScript

And to check and fix the work:

Use the fe-perf-delivery skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain perf/render-blocking-script and fix it here.

Rules it teaches

perf/render-blocking-script
A script in the head loads with defer, async or type="module", never as a plain blocking script.
moderatestatic
perf/third-party-async
Third-party scripts load with async or defer (or a framework strategy such as lazyOnload), never as parser-blocking tags.
moderatestatic
perf/css-no-import
Shipped CSS does not chain stylesheets with @import; link them in the HTML or combine them in a build.
moderatestatic
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.
moderatestatic
perf/code-split
JavaScript is split by route, and features that most visits do not use load on demand with dynamic import().
moderatebrowser
perf/third-party-cost
Each third-party script earns its place, loads late, and heavy embeds (video, maps, chat) start as a lightweight facade.
moderatebrowser
perf/cache-static-assets
Content-hashed assets are cached for a year as immutable; HTML is revalidated (no-cache), never cached long.
moderatebrowser
perf/no-legacy-javascript
Do not ship polyfills and down-level transforms for features your target browsers already support; declare targets once.
minorbrowser

The rule digest

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

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.

Steps the agent follows

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.

How the agent checks the work

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.

Checked by the audit

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

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

Reference files

references/delivery.md1431 tokens

SKILL.md on GitHub