Performance

Images and media delivery

Delivers images that are light, sharp and stable - AVIF or WebP, srcset and sizes, picture for formats and art direction, width and height against layout shift, an eager high-priority LCP image, lazy loading below the fold, video instead of GIF, SVG for icons and logos, and the framework image components. Use when adding or reviewing images, a hero, a gallery, or when LCP or CLS is poor.

fe-imagesevery web project9 rules81 tokens always loaded, 1008 tokens when used, 1726 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-images lands for Claude Code

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

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

# Images and media delivery (frontend-skills)

Delivers images that are light, sharp and stable - AVIF or WebP, srcset and sizes, picture for formats and art direction, width and height against layout shift, an eager high-priority LCP image, lazy loading below the fold, video instead of GIF, SVG for icons and logos, and the framework image components. Use when adding or reviewing images, a hero, a gallery, or when LCP or CLS is poor.

- Every `<img>` has `width` and `height` (or a CSS `aspect-ratio`) so space is reserved (perf/img-dimensions).
- The likely LCP image is eager with `fetchpriority="high"`; never `loading="lazy"` on it (perf/lcp-image-priority).
- Images below the first screen get `loading="lazy"`; only one or two images get `fetchpriority="high"`.
- A `srcset` with `w` descriptors always has a matching `sizes` (perf/srcset-sizes).
- `<picture>` ends with an `<img>` carrying `src`, `alt`, `width` and `height` (html/picture-img).
- Photos are AVIF or WebP at the size they are shown, not large JPEG or PNG (perf/img-modern-format).
- No image file over the budget, 250 KB by default (perf/large-image); no GIF over 100 KiB, use a muted looping video (perf/gif-to-video).
- Every image has `alt`: the meaning, or `alt=""` when decorative (a11y/img-alt).
- Use the framework's image component when there is one; it writes `srcset`, sizes and formats for you.
- Logos are SVG; icons come from the project's generated icon set, never an `<img>` of an icon file (html/project-icons).
- The LCP image is in the HTML, not injected by JavaScript or hidden in a CSS background.

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

The real file

Where fe-images lands for OpenAI Codex

.agents/skills/fe-images/SKILL.mdskill
.agents/skills/fe-images/references/images.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-images lands for Cursor

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

---
description: Delivers images that are light, sharp and stable - AVIF or WebP, srcset and sizes, picture for formats and art direction, width and height against layout shift, an eager high-priority LCP image, lazy loading below the fold, video instead of GIF, SVG for icons and logos, and the framework image components. Use when adding or reviewing images, a hero, a gallery, or when LCP or CLS is poor.
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html
alwaysApply: false
---

# Images and media delivery (frontend-skills)

- Every `<img>` has `width` and `height` (or a CSS `aspect-ratio`) so space is reserved (perf/img-dimensions).
- The likely LCP image is eager with `fetchpriority="high"`; never `loading="lazy"` on it (perf/lcp-image-priority).
- Images below the first screen get `loading="lazy"`; only one or two images get `fetchpriority="high"`.
- A `srcset` with `w` descriptors always has a matching `sizes` (perf/srcset-sizes).
- `<picture>` ends with an `<img>` carrying `src`, `alt`, `width` and `height` (html/picture-img).
- Photos are AVIF or WebP at the size they are shown, not large JPEG or PNG (perf/img-modern-format).
- No image file over the budget, 250 KB by default (perf/large-image); no GIF over 100 KiB, use a muted looping video (perf/gif-to-video).
- Every image has `alt`: the meaning, or `alt=""` when decorative (a11y/img-alt).
- Use the framework's image component when there is one; it writes `srcset`, sizes and formats for you.
- Logos are SVG; icons come from the project's generated icon set, never an `<img>` of an icon file (html/project-icons).
- The LCP image is in the HTML, not injected by JavaScript or hidden in a CSS background.

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

The real file

Where fe-images lands for GitHub Copilot

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

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
description: "Delivers images that are light, sharp and stable - AVIF or WebP, srcset and sizes, picture for formats and art direction, width and height against layout shift, an eager high-priority LCP image, lazy loading below the fold, video instead of GIF, SVG for icons and logos, and the framework image components. Use when adding or reviewing images, a hero, a gallery, or when LCP or CLS is poor."
---

# Images and media delivery (frontend-skills)

- Every `<img>` has `width` and `height` (or a CSS `aspect-ratio`) so space is reserved (perf/img-dimensions).
- The likely LCP image is eager with `fetchpriority="high"`; never `loading="lazy"` on it (perf/lcp-image-priority).
- Images below the first screen get `loading="lazy"`; only one or two images get `fetchpriority="high"`.
- A `srcset` with `w` descriptors always has a matching `sizes` (perf/srcset-sizes).
- `<picture>` ends with an `<img>` carrying `src`, `alt`, `width` and `height` (html/picture-img).
- Photos are AVIF or WebP at the size they are shown, not large JPEG or PNG (perf/img-modern-format).
- No image file over the budget, 250 KB by default (perf/large-image); no GIF over 100 KiB, use a muted looping video (perf/gif-to-video).
- Every image has `alt`: the meaning, or `alt=""` when decorative (a11y/img-alt).
- Use the framework's image component when there is one; it writes `srcset`, sizes and formats for you.
- Logos are SVG; icons come from the project's generated icon set, never an `<img>` of an icon file (html/project-icons).
- The LCP image is in the HTML, not injected by JavaScript or hidden in a CSS background.

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

The real file

Where fe-images lands for Gemini CLI

.agents/skills/fe-images/SKILL.mdskill
.agents/skills/fe-images/references/images.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-images lands for Antigravity CLI

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

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html"
description: "Delivers images that are light, sharp and stable - AVIF or WebP, srcset and sizes, picture for formats and art direction, width and height against layout shift, an eager high-priority LCP image, lazy loading below the fold, video instead of GIF, SVG for icons and logos, and the framework image components. Use when adding or reviewing images, a hero, a gallery, or when LCP or CLS is poor."
---

# Images and media delivery (frontend-skills)

- Every `<img>` has `width` and `height` (or a CSS `aspect-ratio`) so space is reserved (perf/img-dimensions).
- The likely LCP image is eager with `fetchpriority="high"`; never `loading="lazy"` on it (perf/lcp-image-priority).
- Images below the first screen get `loading="lazy"`; only one or two images get `fetchpriority="high"`.
- A `srcset` with `w` descriptors always has a matching `sizes` (perf/srcset-sizes).
- `<picture>` ends with an `<img>` carrying `src`, `alt`, `width` and `height` (html/picture-img).
- Photos are AVIF or WebP at the size they are shown, not large JPEG or PNG (perf/img-modern-format).
- No image file over the budget, 250 KB by default (perf/large-image); no GIF over 100 KiB, use a muted looping video (perf/gif-to-video).
- Every image has `alt`: the meaning, or `alt=""` when decorative (a11y/img-alt).
- Use the framework's image component when there is one; it writes `srcset`, sizes and formats for you.
- Logos are SVG; icons come from the project's generated icon set, never an `<img>` of an icon file (html/project-icons).
- The LCP image is in the HTML, not injected by JavaScript or hidden in a CSS background.

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

The real file

Where fe-images lands for Devin / Windsurf

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

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

# Images and media delivery (frontend-skills)

Delivers images that are light, sharp and stable - AVIF or WebP, srcset and sizes, picture for formats and art direction, width and height against layout shift, an eager high-priority LCP image, lazy loading below the fold, video instead of GIF, SVG for icons and logos, and the framework image components. Use when adding or reviewing images, a hero, a gallery, or when LCP or CLS is poor.

- Every `<img>` has `width` and `height` (or a CSS `aspect-ratio`) so space is reserved (perf/img-dimensions).
- The likely LCP image is eager with `fetchpriority="high"`; never `loading="lazy"` on it (perf/lcp-image-priority).
- Images below the first screen get `loading="lazy"`; only one or two images get `fetchpriority="high"`.
- A `srcset` with `w` descriptors always has a matching `sizes` (perf/srcset-sizes).
- `<picture>` ends with an `<img>` carrying `src`, `alt`, `width` and `height` (html/picture-img).
- Photos are AVIF or WebP at the size they are shown, not large JPEG or PNG (perf/img-modern-format).
- No image file over the budget, 250 KB by default (perf/large-image); no GIF over 100 KiB, use a muted looping video (perf/gif-to-video).
- Every image has `alt`: the meaning, or `alt=""` when decorative (a11y/img-alt).
- Use the framework's image component when there is one; it writes `srcset`, sizes and formats for you.
- Logos are SVG; icons come from the project's generated icon set, never an `<img>` of an icon file (html/project-icons).
- The LCP image is in the HTML, not injected by JavaScript or hidden in a CSS background.

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

The real file

Where fe-images lands for OpenCode

.agents/skills/fe-images/SKILL.mdskill
.agents/skills/fe-images/references/images.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-images lands for Cline

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

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

# Images and media delivery (frontend-skills)

Delivers images that are light, sharp and stable - AVIF or WebP, srcset and sizes, picture for formats and art direction, width and height against layout shift, an eager high-priority LCP image, lazy loading below the fold, video instead of GIF, SVG for icons and logos, and the framework image components. Use when adding or reviewing images, a hero, a gallery, or when LCP or CLS is poor.

- Every `<img>` has `width` and `height` (or a CSS `aspect-ratio`) so space is reserved (perf/img-dimensions).
- The likely LCP image is eager with `fetchpriority="high"`; never `loading="lazy"` on it (perf/lcp-image-priority).
- Images below the first screen get `loading="lazy"`; only one or two images get `fetchpriority="high"`.
- A `srcset` with `w` descriptors always has a matching `sizes` (perf/srcset-sizes).
- `<picture>` ends with an `<img>` carrying `src`, `alt`, `width` and `height` (html/picture-img).
- Photos are AVIF or WebP at the size they are shown, not large JPEG or PNG (perf/img-modern-format).
- No image file over the budget, 250 KB by default (perf/large-image); no GIF over 100 KiB, use a muted looping video (perf/gif-to-video).
- Every image has `alt`: the meaning, or `alt=""` when decorative (a11y/img-alt).
- Use the framework's image component when there is one; it writes `srcset`, sizes and formats for you.
- Logos are SVG; icons come from the project's generated icon set, never an `<img>` of an icon file (html/project-icons).
- The LCP image is in the HTML, not injected by JavaScript or hidden in a CSS background.

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

The real file

Where fe-images lands for Zed

.agents/skills/fe-images/SKILL.mdskill
.agents/skills/fe-images/references/images.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-images lands for JetBrains Junie

.agents/skills/fe-images/SKILL.mdskill
.agents/skills/fe-images/references/images.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-images lands for Kiro

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

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

# Images and media delivery (frontend-skills)

Delivers images that are light, sharp and stable - AVIF or WebP, srcset and sizes, picture for formats and art direction, width and height against layout shift, an eager high-priority LCP image, lazy loading below the fold, video instead of GIF, SVG for icons and logos, and the framework image components. Use when adding or reviewing images, a hero, a gallery, or when LCP or CLS is poor.

- Every `<img>` has `width` and `height` (or a CSS `aspect-ratio`) so space is reserved (perf/img-dimensions).
- The likely LCP image is eager with `fetchpriority="high"`; never `loading="lazy"` on it (perf/lcp-image-priority).
- Images below the first screen get `loading="lazy"`; only one or two images get `fetchpriority="high"`.
- A `srcset` with `w` descriptors always has a matching `sizes` (perf/srcset-sizes).
- `<picture>` ends with an `<img>` carrying `src`, `alt`, `width` and `height` (html/picture-img).
- Photos are AVIF or WebP at the size they are shown, not large JPEG or PNG (perf/img-modern-format).
- No image file over the budget, 250 KB by default (perf/large-image); no GIF over 100 KiB, use a muted looping video (perf/gif-to-video).
- Every image has `alt`: the meaning, or `alt=""` when decorative (a11y/img-alt).
- Use the framework's image component when there is one; it writes `srcset`, sizes and formats for you.
- Logos are SVG; icons come from the project's generated icon set, never an `<img>` of an icon file (html/project-icons).
- The LCP image is in the HTML, not injected by JavaScript or hidden in a CSS background.

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

The real file

Where fe-images lands for Augment

.agents/skills/fe-images/SKILL.mdskill
.agents/skills/fe-images/references/images.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-images lands for Trae

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

---
description: "Delivers images that are light, sharp and stable - AVIF or WebP, srcset and sizes, picture for formats and art direction, width and height against layout shift, an eager high-priority LCP image, lazy loading below the fold, video instead of GIF, SVG for icons and logos, and the framework image components. Use when adding or reviewing images, a hero, a gallery, or when LCP or CLS is poor."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html
alwaysApply: false
---

# Images and media delivery (frontend-skills)

- Every `<img>` has `width` and `height` (or a CSS `aspect-ratio`) so space is reserved (perf/img-dimensions).
- The likely LCP image is eager with `fetchpriority="high"`; never `loading="lazy"` on it (perf/lcp-image-priority).
- Images below the first screen get `loading="lazy"`; only one or two images get `fetchpriority="high"`.
- A `srcset` with `w` descriptors always has a matching `sizes` (perf/srcset-sizes).
- `<picture>` ends with an `<img>` carrying `src`, `alt`, `width` and `height` (html/picture-img).
- Photos are AVIF or WebP at the size they are shown, not large JPEG or PNG (perf/img-modern-format).
- No image file over the budget, 250 KB by default (perf/large-image); no GIF over 100 KiB, use a muted looping video (perf/gif-to-video).
- Every image has `alt`: the meaning, or `alt=""` when decorative (a11y/img-alt).
- Use the framework's image component when there is one; it writes `srcset`, sizes and formats for you.
- Logos are SVG; icons come from the project's generated icon set, never an `<img>` of an icon file (html/project-icons).
- The LCP image is in the HTML, not injected by JavaScript or hidden in a CSS background.

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

The real file

Where fe-images lands for Continue

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

---
name: "Images and media delivery"
description: "Delivers images that are light, sharp and stable - AVIF or WebP, srcset and sizes, picture for formats and art direction, width and height against layout shift, an eager high-priority LCP image, lazy loading below the fold, video instead of GIF, SVG for icons and logos, and the framework image components. Use when adding or reviewing images, a hero, a gallery, or when LCP or CLS is poor."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
alwaysApply: false
---

# Images and media delivery (frontend-skills)

- Every `<img>` has `width` and `height` (or a CSS `aspect-ratio`) so space is reserved (perf/img-dimensions).
- The likely LCP image is eager with `fetchpriority="high"`; never `loading="lazy"` on it (perf/lcp-image-priority).
- Images below the first screen get `loading="lazy"`; only one or two images get `fetchpriority="high"`.
- A `srcset` with `w` descriptors always has a matching `sizes` (perf/srcset-sizes).
- `<picture>` ends with an `<img>` carrying `src`, `alt`, `width` and `height` (html/picture-img).
- Photos are AVIF or WebP at the size they are shown, not large JPEG or PNG (perf/img-modern-format).
- No image file over the budget, 250 KB by default (perf/large-image); no GIF over 100 KiB, use a muted looping video (perf/gif-to-video).
- Every image has `alt`: the meaning, or `alt=""` when decorative (a11y/img-alt).
- Use the framework's image component when there is one; it writes `srcset`, sizes and formats for you.
- Logos are SVG; icons come from the project's generated icon set, never an `<img>` of an icon file (html/project-icons).
- The LCP image is in the HTML, not injected by JavaScript or hidden in a CSS background.

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

The real file

Where fe-images lands for Amazon Q Developer

.frontend-skills/skills/fe-images/SKILL.mdskill
.frontend-skills/skills/fe-images/references/images.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-images` (Images and media delivery): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-images/SKILL.md`.

The real file

Where fe-images lands for Aider

.frontend-skills/skills/fe-images/SKILL.mdskill
.frontend-skills/skills/fe-images/references/images.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-images` (Images and media delivery): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-images/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:

And to check and fix the work:

Use the fe-images skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain perf/img-dimensions and fix it here.

Rules it teaches

perf/img-dimensions
Every img has width and height attributes (or a CSS aspect ratio) so the browser reserves its space.
moderatestatic
perf/lcp-image-priority
The image that is likely the LCP element loads eagerly with fetchpriority high; it is never lazy-loaded.
seriousstatic
perf/srcset-sizes
A srcset with width descriptors (400w, 800w) comes with a sizes attribute that matches the image's displayed width.
moderatestatic
html/picture-img
Every picture element ends with an img that has src, alt, width and height; source elements alone render nothing.
seriousstatic
perf/img-modern-format
Photos and large raster images are served as AVIF or WebP at the size they are shown, not as large JPEG or PNG files.
moderatebrowser
perf/large-image
An image file in the source stays under the image budget (250 KB by default); larger ones are resized or re-encoded.
moderatestatic
perf/gif-to-video
Animations longer than a small icon are shipped as a muted, looping MP4 or WebM video, not as a GIF over 100 KiB.
moderatestatic
html/project-icons
Icons use the project's generated icon classes (its icon classes), not separate SVG image files.
minorstatic
a11y/img-alt
Every img and area element has an alt attribute; a decorative image has alt="".
criticalstaticWCAG 1.1.1

The rule digest

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

Every <img> has width and height (or a CSS aspect-ratio) so space is reserved (perf/img-dimensions).
The likely LCP image is eager with fetchpriority="high"; never loading="lazy" on it (perf/lcp-image-priority).
Images below the first screen get loading="lazy"; only one or two images get fetchpriority="high".
A srcset with w descriptors always has a matching sizes (perf/srcset-sizes).
<picture> ends with an <img> carrying src, alt, width and height (html/picture-img).
Photos are AVIF or WebP at the size they are shown, not large JPEG or PNG (perf/img-modern-format).
No image file over the budget, 250 KB by default (perf/large-image); no GIF over 100 KiB, use a muted looping video (perf/gif-to-video).
Every image has alt: the meaning, or alt="" when decorative (a11y/img-alt).
Use the framework's image component when there is one; it writes srcset, sizes and formats for you.
Logos are SVG; icons come from the project's generated icon set, never an <img> of an icon file (html/project-icons).
The LCP image is in the HTML, not injected by JavaScript or hidden in a CSS background.

Steps the agent follows

Find the image pipeline first: next/image, @nuxt/image, Astro <Image> from astro:assets, Angular NgOptimizedImage, SvelteKit enhanced:img, or a build plugin. Use it instead of raw <img>.
For each image decide: LCP candidate (eager, fetchpriority="high"), in first view (eager), or below (lazy).
Write width/height from the file's intrinsic size and let CSS scale it: img { max-width: 100%; height: auto; }.
Generate widths that match the layout (for example 400, 800, 1200, 1600) and describe the rendered width in sizes.
Encode photos as AVIF (WebP or JPEG fallback in <picture> only if the targets need it); keep PNG for sharp screenshots if smaller, SVG for vector art.
For a CSS background that is the LCP element, preload it with <link rel="preload" as="image" fetchpriority="high"> or turn it into an <img>.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed reports images without size, a lazy LCP candidate, srcset without sizes, a picture without img, oversized files and GIFs.
audit --url <page> adds Lighthouse's image delivery and LCP discovery insights for the rendered page.
By hand: DevTools Network filtered to images on a mobile profile; the Performance panel names the LCP element.

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/images.md1726 tokens

SKILL.md on GitHub