Wydajność

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-imageskażdego projektu webowego9 regułładowane zawsze: 81 tokenów; przy użyciu: 1008 tokenów; w referencjach na żądanie: 1726 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-images dla: Claude Code

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

Prawdziwy plik

Gdzie trafia fe-images dla: OpenAI Codex

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

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

Prawdziwy plik

Gdzie trafia fe-images dla: GitHub Copilot

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

Prawdziwy plik

Gdzie trafia fe-images dla: Gemini CLI

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

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

Prawdziwy plik

Gdzie trafia fe-images dla: Devin / Windsurf

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

Prawdziwy plik

Gdzie trafia fe-images dla: OpenCode

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

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

Prawdziwy plik

Gdzie trafia fe-images dla: Zed

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

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

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

Prawdziwy plik

Gdzie trafia fe-images dla: Augment

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

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

Prawdziwy plik

Gdzie trafia fe-images dla: Continue

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

Prawdziwy plik

Gdzie trafia fe-images dla: Amazon Q Developer

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

Prawdziwy plik

Gdzie trafia fe-images dla: Aider

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

A żeby sprawdzić i poprawić pracę:

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

Reguły, których uczy

perf/img-dimensions
Every img has width and height attributes (or a CSS aspect ratio) so the browser reserves its space.
umiarkowanastatyczne
perf/lcp-image-priority
The image that is likely the LCP element loads eagerly with fetchpriority high; it is never lazy-loaded.
poważnastatyczne
perf/srcset-sizes
A srcset with width descriptors (400w, 800w) comes with a sizes attribute that matches the image's displayed width.
umiarkowanastatyczne
html/picture-img
Every picture element ends with an img that has src, alt, width and height; source elements alone render nothing.
poważnastatyczne
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.
umiarkowanaw przeglądarce
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.
umiarkowanastatyczne
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.
umiarkowanastatyczne
html/project-icons
Icons use the project's generated icon classes (its icon classes), not separate SVG image files.
drobnastatyczne
a11y/img-alt
Every img and area element has an alt attribute; a decorative image has alt="".
krytycznastatyczneWCAG 1.1.1

Skrót reguł

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

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.

Kroki, które wykonuje agent

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

Jak agent sprawdza swoją pracę

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.

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/images.md1726 tokenów

SKILL.md na GitHubie