Performance

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-fontsevery web project6 rules75 tokens always loaded, 875 tokens when used, 1339 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-fonts lands for Claude Code

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

The real file

Where fe-fonts lands for OpenAI Codex

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

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

The real file

Where fe-fonts lands for GitHub Copilot

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

The real file

Where fe-fonts lands for Gemini CLI

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

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

The real file

Where fe-fonts lands for Devin / Windsurf

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

The real file

Where fe-fonts lands for OpenCode

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

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

The real file

Where fe-fonts lands for Zed

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

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

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

The real file

Where fe-fonts lands for Augment

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

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

The real file

Where fe-fonts lands for Continue

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

The real file

Where fe-fonts lands for Amazon Q Developer

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

The real file

Where fe-fonts lands for Aider

.frontend-skills/skills/fe-fonts/SKILL.mdskill
.frontend-skills/skills/fe-fonts/references/fonts.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-fonts` (Web fonts): when editing `**/*.css`, `**/*.scss`, `**/*.less`, `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-fonts/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-fonts skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain perf/font-display and fix it here.

Rules it teaches

perf/font-display
Every @font-face and Google Fonts URL sets font-display (swap or optional) so text is visible while the font loads.
minorstatic
perf/font-woff2
Web fonts are served as WOFF2; TTF, OTF, EOT and plain WOFF files are dead weight for current browsers.
moderatestatic
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.
moderatestatic
perf/font-preconnect
Fonts are self-hosted, or the font CDN's file origin (fonts.gstatic.com) is preconnected with crossorigin.
minorstatic
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.
minormanual
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.
minorstatic

The rule digest

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

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.

Steps the agent follows

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

How the agent checks the work

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.

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/fonts.md1339 tokens

SKILL.md on GitHub