Wydajność

Web fonts

Loads web fonts fast and without layout shift - self-hosted WOFF2, font-display, a correct preload with crossorigin, subsetting and unicode-range, variable fonts, metric-matched fallbacks, system font stacks, and next/font or @nuxt/fonts. Use when adding or changing fonts, when text is invisible or jumps while loading, or when Lighthouse flags fonts.

fe-fontskażdego projektu webowego6 regułładowane zawsze: 75 tokenów; przy użyciu: 875 tokenów; w referencjach na żądanie: 1339 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-fonts dla: Claude Code

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

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

# Web fonts (frontend-skills)

Loads web fonts fast and without layout shift - self-hosted WOFF2, font-display, a correct preload with crossorigin, subsetting and unicode-range, variable fonts, metric-matched fallbacks, system font stacks, and next/font or @nuxt/fonts. Use when adding or changing fonts, when text is invisible or jumps while loading, or when Lighthouse flags fonts.

- Every `@font-face` and font CDN URL sets `font-display` (`swap`, or `optional` for body text when layout shift matters) (perf/font-display).
- Serve WOFF2 only (perf/font-woff2).
- Self-host fonts from your own origin; with a font CDN, preconnect to its file origin with `crossorigin` (perf/font-preconnect).
- Preload at most the one or two fonts used in the first view, with `as="font" type="font/woff2" crossorigin` (perf/font-preload-crossorigin).
- Match the fallback font's metrics with `size-adjust` so the swap does not shift the layout (perf/font-fallback-metrics).
- Reference font files by a relative path or alias the bundler resolves (css/asset-url).
- Subset to the scripts you use and split them with `unicode-range`; check that the licence allows it.
- One variable font file instead of one file per weight when you use three or more weights.
- Use the framework's font tool when there is one (`next/font`, `@nuxt/fonts`); it self-hosts, preloads and adjusts fallbacks.
- Icons are SVG, not icon fonts; consider the system font stack when brand type is not essential.

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

Prawdziwy plik

Gdzie trafia fe-fonts dla: OpenAI Codex

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

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

---
description: Loads web fonts fast and without layout shift - self-hosted WOFF2, font-display, a correct preload with crossorigin, subsetting and unicode-range, variable fonts, metric-matched fallbacks, system font stacks, and next/font or @nuxt/fonts. Use when adding or changing fonts, when text is invisible or jumps while loading, or when Lighthouse flags fonts.
globs: **/*.css, **/*.scss, **/*.less, **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro
alwaysApply: false
---

# Web fonts (frontend-skills)

- Every `@font-face` and font CDN URL sets `font-display` (`swap`, or `optional` for body text when layout shift matters) (perf/font-display).
- Serve WOFF2 only (perf/font-woff2).
- Self-host fonts from your own origin; with a font CDN, preconnect to its file origin with `crossorigin` (perf/font-preconnect).
- Preload at most the one or two fonts used in the first view, with `as="font" type="font/woff2" crossorigin` (perf/font-preload-crossorigin).
- Match the fallback font's metrics with `size-adjust` so the swap does not shift the layout (perf/font-fallback-metrics).
- Reference font files by a relative path or alias the bundler resolves (css/asset-url).
- Subset to the scripts you use and split them with `unicode-range`; check that the licence allows it.
- One variable font file instead of one file per weight when you use three or more weights.
- Use the framework's font tool when there is one (`next/font`, `@nuxt/fonts`); it self-hosts, preloads and adjusts fallbacks.
- Icons are SVG, not icon fonts; consider the system font stack when brand type is not essential.

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

Prawdziwy plik

Gdzie trafia fe-fonts dla: GitHub Copilot

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

---
applyTo: "**/*.css,**/*.scss,**/*.less,**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro"
description: "Loads web fonts fast and without layout shift - self-hosted WOFF2, font-display, a correct preload with crossorigin, subsetting and unicode-range, variable fonts, metric-matched fallbacks, system font stacks, and next/font or @nuxt/fonts. Use when adding or changing fonts, when text is invisible or jumps while loading, or when Lighthouse flags fonts."
---

# Web fonts (frontend-skills)

- Every `@font-face` and font CDN URL sets `font-display` (`swap`, or `optional` for body text when layout shift matters) (perf/font-display).
- Serve WOFF2 only (perf/font-woff2).
- Self-host fonts from your own origin; with a font CDN, preconnect to its file origin with `crossorigin` (perf/font-preconnect).
- Preload at most the one or two fonts used in the first view, with `as="font" type="font/woff2" crossorigin` (perf/font-preload-crossorigin).
- Match the fallback font's metrics with `size-adjust` so the swap does not shift the layout (perf/font-fallback-metrics).
- Reference font files by a relative path or alias the bundler resolves (css/asset-url).
- Subset to the scripts you use and split them with `unicode-range`; check that the licence allows it.
- One variable font file instead of one file per weight when you use three or more weights.
- Use the framework's font tool when there is one (`next/font`, `@nuxt/fonts`); it self-hosts, preloads and adjusts fallbacks.
- Icons are SVG, not icon fonts; consider the system font stack when brand type is not essential.

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

Prawdziwy plik

Gdzie trafia fe-fonts dla: Gemini CLI

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

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

---
trigger: glob
globs: "**/*.css, **/*.scss, **/*.less, **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro"
description: "Loads web fonts fast and without layout shift - self-hosted WOFF2, font-display, a correct preload with crossorigin, subsetting and unicode-range, variable fonts, metric-matched fallbacks, system font stacks, and next/font or @nuxt/fonts. Use when adding or changing fonts, when text is invisible or jumps while loading, or when Lighthouse flags fonts."
---

# Web fonts (frontend-skills)

- Every `@font-face` and font CDN URL sets `font-display` (`swap`, or `optional` for body text when layout shift matters) (perf/font-display).
- Serve WOFF2 only (perf/font-woff2).
- Self-host fonts from your own origin; with a font CDN, preconnect to its file origin with `crossorigin` (perf/font-preconnect).
- Preload at most the one or two fonts used in the first view, with `as="font" type="font/woff2" crossorigin` (perf/font-preload-crossorigin).
- Match the fallback font's metrics with `size-adjust` so the swap does not shift the layout (perf/font-fallback-metrics).
- Reference font files by a relative path or alias the bundler resolves (css/asset-url).
- Subset to the scripts you use and split them with `unicode-range`; check that the licence allows it.
- One variable font file instead of one file per weight when you use three or more weights.
- Use the framework's font tool when there is one (`next/font`, `@nuxt/fonts`); it self-hosts, preloads and adjusts fallbacks.
- Icons are SVG, not icon fonts; consider the system font stack when brand type is not essential.

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

Prawdziwy plik

Gdzie trafia fe-fonts dla: Devin / Windsurf

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

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

# Web fonts (frontend-skills)

Loads web fonts fast and without layout shift - self-hosted WOFF2, font-display, a correct preload with crossorigin, subsetting and unicode-range, variable fonts, metric-matched fallbacks, system font stacks, and next/font or @nuxt/fonts. Use when adding or changing fonts, when text is invisible or jumps while loading, or when Lighthouse flags fonts.

- Every `@font-face` and font CDN URL sets `font-display` (`swap`, or `optional` for body text when layout shift matters) (perf/font-display).
- Serve WOFF2 only (perf/font-woff2).
- Self-host fonts from your own origin; with a font CDN, preconnect to its file origin with `crossorigin` (perf/font-preconnect).
- Preload at most the one or two fonts used in the first view, with `as="font" type="font/woff2" crossorigin` (perf/font-preload-crossorigin).
- Match the fallback font's metrics with `size-adjust` so the swap does not shift the layout (perf/font-fallback-metrics).
- Reference font files by a relative path or alias the bundler resolves (css/asset-url).
- Subset to the scripts you use and split them with `unicode-range`; check that the licence allows it.
- One variable font file instead of one file per weight when you use three or more weights.
- Use the framework's font tool when there is one (`next/font`, `@nuxt/fonts`); it self-hosts, preloads and adjusts fallbacks.
- Icons are SVG, not icon fonts; consider the system font stack when brand type is not essential.

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

Prawdziwy plik

Gdzie trafia fe-fonts dla: OpenCode

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

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

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

# Web fonts (frontend-skills)

Loads web fonts fast and without layout shift - self-hosted WOFF2, font-display, a correct preload with crossorigin, subsetting and unicode-range, variable fonts, metric-matched fallbacks, system font stacks, and next/font or @nuxt/fonts. Use when adding or changing fonts, when text is invisible or jumps while loading, or when Lighthouse flags fonts.

- Every `@font-face` and font CDN URL sets `font-display` (`swap`, or `optional` for body text when layout shift matters) (perf/font-display).
- Serve WOFF2 only (perf/font-woff2).
- Self-host fonts from your own origin; with a font CDN, preconnect to its file origin with `crossorigin` (perf/font-preconnect).
- Preload at most the one or two fonts used in the first view, with `as="font" type="font/woff2" crossorigin` (perf/font-preload-crossorigin).
- Match the fallback font's metrics with `size-adjust` so the swap does not shift the layout (perf/font-fallback-metrics).
- Reference font files by a relative path or alias the bundler resolves (css/asset-url).
- Subset to the scripts you use and split them with `unicode-range`; check that the licence allows it.
- One variable font file instead of one file per weight when you use three or more weights.
- Use the framework's font tool when there is one (`next/font`, `@nuxt/fonts`); it self-hosts, preloads and adjusts fallbacks.
- Icons are SVG, not icon fonts; consider the system font stack when brand type is not essential.

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

Prawdziwy plik

Gdzie trafia fe-fonts dla: Zed

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

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

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

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

# Web fonts (frontend-skills)

Loads web fonts fast and without layout shift - self-hosted WOFF2, font-display, a correct preload with crossorigin, subsetting and unicode-range, variable fonts, metric-matched fallbacks, system font stacks, and next/font or @nuxt/fonts. Use when adding or changing fonts, when text is invisible or jumps while loading, or when Lighthouse flags fonts.

- Every `@font-face` and font CDN URL sets `font-display` (`swap`, or `optional` for body text when layout shift matters) (perf/font-display).
- Serve WOFF2 only (perf/font-woff2).
- Self-host fonts from your own origin; with a font CDN, preconnect to its file origin with `crossorigin` (perf/font-preconnect).
- Preload at most the one or two fonts used in the first view, with `as="font" type="font/woff2" crossorigin` (perf/font-preload-crossorigin).
- Match the fallback font's metrics with `size-adjust` so the swap does not shift the layout (perf/font-fallback-metrics).
- Reference font files by a relative path or alias the bundler resolves (css/asset-url).
- Subset to the scripts you use and split them with `unicode-range`; check that the licence allows it.
- One variable font file instead of one file per weight when you use three or more weights.
- Use the framework's font tool when there is one (`next/font`, `@nuxt/fonts`); it self-hosts, preloads and adjusts fallbacks.
- Icons are SVG, not icon fonts; consider the system font stack when brand type is not essential.

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

Prawdziwy plik

Gdzie trafia fe-fonts dla: Augment

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

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

---
description: "Loads web fonts fast and without layout shift - self-hosted WOFF2, font-display, a correct preload with crossorigin, subsetting and unicode-range, variable fonts, metric-matched fallbacks, system font stacks, and next/font or @nuxt/fonts. Use when adding or changing fonts, when text is invisible or jumps while loading, or when Lighthouse flags fonts."
globs: **/*.css,**/*.scss,**/*.less,**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro
alwaysApply: false
---

# Web fonts (frontend-skills)

- Every `@font-face` and font CDN URL sets `font-display` (`swap`, or `optional` for body text when layout shift matters) (perf/font-display).
- Serve WOFF2 only (perf/font-woff2).
- Self-host fonts from your own origin; with a font CDN, preconnect to its file origin with `crossorigin` (perf/font-preconnect).
- Preload at most the one or two fonts used in the first view, with `as="font" type="font/woff2" crossorigin` (perf/font-preload-crossorigin).
- Match the fallback font's metrics with `size-adjust` so the swap does not shift the layout (perf/font-fallback-metrics).
- Reference font files by a relative path or alias the bundler resolves (css/asset-url).
- Subset to the scripts you use and split them with `unicode-range`; check that the licence allows it.
- One variable font file instead of one file per weight when you use three or more weights.
- Use the framework's font tool when there is one (`next/font`, `@nuxt/fonts`); it self-hosts, preloads and adjusts fallbacks.
- Icons are SVG, not icon fonts; consider the system font stack when brand type is not essential.

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

Prawdziwy plik

Gdzie trafia fe-fonts dla: Continue

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

---
name: "Web fonts"
description: "Loads web fonts fast and without layout shift - self-hosted WOFF2, font-display, a correct preload with crossorigin, subsetting and unicode-range, variable fonts, metric-matched fallbacks, system font stacks, and next/font or @nuxt/fonts. Use when adding or changing fonts, when text is invisible or jumps while loading, or when Lighthouse flags fonts."
globs: ["**/*.css", "**/*.scss", "**/*.less", "**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro"]
alwaysApply: false
---

# Web fonts (frontend-skills)

- Every `@font-face` and font CDN URL sets `font-display` (`swap`, or `optional` for body text when layout shift matters) (perf/font-display).
- Serve WOFF2 only (perf/font-woff2).
- Self-host fonts from your own origin; with a font CDN, preconnect to its file origin with `crossorigin` (perf/font-preconnect).
- Preload at most the one or two fonts used in the first view, with `as="font" type="font/woff2" crossorigin` (perf/font-preload-crossorigin).
- Match the fallback font's metrics with `size-adjust` so the swap does not shift the layout (perf/font-fallback-metrics).
- Reference font files by a relative path or alias the bundler resolves (css/asset-url).
- Subset to the scripts you use and split them with `unicode-range`; check that the licence allows it.
- One variable font file instead of one file per weight when you use three or more weights.
- Use the framework's font tool when there is one (`next/font`, `@nuxt/fonts`); it self-hosts, preloads and adjusts fallbacks.
- Icons are SVG, not icon fonts; consider the system font stack when brand type is not essential.

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

Prawdziwy plik

Gdzie trafia fe-fonts dla: Amazon Q Developer

.frontend-skills/skills/fe-fonts/SKILL.mdskill
.frontend-skills/skills/fe-fonts/references/fonts.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-fonts` (Web fonts): when editing `**/*.css`, `**/*.scss`, `**/*.less`, `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-fonts/SKILL.md`.

Prawdziwy plik

Gdzie trafia fe-fonts dla: Aider

.frontend-skills/skills/fe-fonts/SKILL.mdskill
.frontend-skills/skills/fe-fonts/references/fonts.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-fonts` (Web fonts): when editing `**/*.css`, `**/*.scss`, `**/*.less`, `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-fonts/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-fonts na tym pliku.
Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
Wyjaśnij perf/font-display i popraw to tutaj.

Reguły, których uczy

perf/font-display
Every @font-face and Google Fonts URL sets font-display (swap or optional) so text is visible while the font loads.
drobnastatyczne
perf/font-woff2
Web fonts are served as WOFF2; TTF, OTF, EOT and plain WOFF files are dead weight for current browsers.
umiarkowanastatyczne
perf/font-preload-crossorigin
A font preload has crossorigin (and type font/woff2); without it the preload is wasted and the font is fetched twice.
umiarkowanastatyczne
perf/font-preconnect
Fonts are self-hosted, or the font CDN's file origin (fonts.gstatic.com) is preconnected with crossorigin.
drobnastatyczne
perf/font-fallback-metrics
The fallback font is adjusted to the web font's metrics (size-adjust and overrides) so the swap does not shift the layout.
drobnaręczne
css/asset-url
In a bundled project, url() to images and fonts is a relative path or alias the bundler resolves, not a hard-coded root or public/ path.
drobnastatyczne

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 @font-face and font CDN URL sets font-display (swap, or optional for body text when layout shift matters) (perf/font-display).
Serve WOFF2 only (perf/font-woff2).
Self-host fonts from your own origin; with a font CDN, preconnect to its file origin with crossorigin (perf/font-preconnect).
Preload at most the one or two fonts used in the first view, with as="font" type="font/woff2" crossorigin (perf/font-preload-crossorigin).
Match the fallback font's metrics with size-adjust so the swap does not shift the layout (perf/font-fallback-metrics).
Reference font files by a relative path or alias the bundler resolves (css/asset-url).
Subset to the scripts you use and split them with unicode-range; check that the licence allows it.
One variable font file instead of one file per weight when you use three or more weights.
Use the framework's font tool when there is one (next/font, @nuxt/fonts); it self-hosts, preloads and adjusts fallbacks.
Icons are SVG, not icon fonts; consider the system font stack when brand type is not essential.

Kroki, które wykonuje agent

Find where fonts are declared: a fonts stylesheet, the root layout (next/font call, <link> to a CDN), nuxt.config (@nuxt/fonts), Tailwind @theme --font-*.
Count the families, weights and styles actually used; drop the rest.
Self-host as WOFF2, subset, write @font-face with font-display and, for a variable font, a font-weight range (100 900).
Preload only the font of the first visible text (usually one weight of the body or heading font).
Add a metric-matched fallback @font-face and list it right after the web font in font-family.
Measure: the text is visible at first paint and the swap moves nothing (Performance panel, layout shift regions).

Jak agent sprawdza swoją pracę

npx github:dawidolko/frontend-skills audit --changed reports @font-face and Google Fonts URLs without font-display, non-WOFF2 fonts, preloads without crossorigin and a font CDN without preconnect.
audit --url <page> adds Lighthouse's font display insight.
By hand: throttle the network to Slow 4G and reload: the text appears at once and does not jump when the font arrives.

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/fonts.md1339 tokenów

SKILL.md na GitHubie