Podstawy

HTML documents and semantics

Writes and reviews HTML documents and templates (plain HTML, JSX, Vue, Svelte, Astro, Angular) with valid structure, semantic elements, landmarks, headings, images and buttons that work for everyone. Use when creating or editing markup, a page layout or a document head, or when asked "is this HTML correct", "make this semantic", "fix the markup".

fe-htmlkażdego projektu webowego6 regułładowane zawsze: 76 tokenów; przy użyciu: 869 tokenów; w referencjach na żądanie: 1289 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-html dla: Claude Code

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

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

# HTML documents and semantics (frontend-skills)

Writes and reviews HTML documents and templates (plain HTML, JSX, Vue, Svelte, Astro, Angular) with valid structure, semantic elements, landmarks, headings, images and buttons that work for everyone. Use when creating or editing markup, a page layout or a document head, or when asked "is this HTML correct", "make this semantic", "fix the markup".

- Start every full document with `<!doctype html>` and `<html lang="…">` (html/doctype, a11y/html-lang).
- Put `<meta charset="utf-8">` first in `<head>`, then the viewport meta tag, then a specific `<title>` (a11y/page-title).
- Give every `<img>` an `alt`: the meaning in context, or `alt=""` when it only decorates (a11y/img-alt).
- Use the element that already does the job: `<button type="button">` for actions, `<a href>` for navigation, `<nav>`, `<main>`, `<header>`, `<footer>` for regions (html/button-type).
- One `<main>` per page; headings go in order (`h1` then `h2`, never skipping a level for size; size is CSS).
- Load head scripts with `defer` or `type="module"` (perf/render-blocking-script).
- Never put a click handler on a `div` or `span`, never use `<br>` for spacing or tables for layout, never invent ARIA where a native element exists.
- Lowercase element and attribute names, quoted attribute values, closed non-void elements.

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

Prawdziwy plik

Gdzie trafia fe-html dla: OpenAI Codex

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

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

---
description: Writes and reviews HTML documents and templates (plain HTML, JSX, Vue, Svelte, Astro, Angular) with valid structure, semantic elements, landmarks, headings, images and buttons that work for everyone. Use when creating or editing markup, a page layout or a document head, or when asked "is this HTML correct", "make this semantic", "fix the markup".
globs: **/*.html, **/*.htm, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro
alwaysApply: false
---

# HTML documents and semantics (frontend-skills)

- Start every full document with `<!doctype html>` and `<html lang="…">` (html/doctype, a11y/html-lang).
- Put `<meta charset="utf-8">` first in `<head>`, then the viewport meta tag, then a specific `<title>` (a11y/page-title).
- Give every `<img>` an `alt`: the meaning in context, or `alt=""` when it only decorates (a11y/img-alt).
- Use the element that already does the job: `<button type="button">` for actions, `<a href>` for navigation, `<nav>`, `<main>`, `<header>`, `<footer>` for regions (html/button-type).
- One `<main>` per page; headings go in order (`h1` then `h2`, never skipping a level for size; size is CSS).
- Load head scripts with `defer` or `type="module"` (perf/render-blocking-script).
- Never put a click handler on a `div` or `span`, never use `<br>` for spacing or tables for layout, never invent ARIA where a native element exists.
- Lowercase element and attribute names, quoted attribute values, closed non-void elements.

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

Prawdziwy plik

Gdzie trafia fe-html dla: GitHub Copilot

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

---
applyTo: "**/*.html,**/*.htm,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro"
description: "Writes and reviews HTML documents and templates (plain HTML, JSX, Vue, Svelte, Astro, Angular) with valid structure, semantic elements, landmarks, headings, images and buttons that work for everyone. Use when creating or editing markup, a page layout or a document head, or when asked \"is this HTML correct\", \"make this semantic\", \"fix the markup\"."
---

# HTML documents and semantics (frontend-skills)

- Start every full document with `<!doctype html>` and `<html lang="…">` (html/doctype, a11y/html-lang).
- Put `<meta charset="utf-8">` first in `<head>`, then the viewport meta tag, then a specific `<title>` (a11y/page-title).
- Give every `<img>` an `alt`: the meaning in context, or `alt=""` when it only decorates (a11y/img-alt).
- Use the element that already does the job: `<button type="button">` for actions, `<a href>` for navigation, `<nav>`, `<main>`, `<header>`, `<footer>` for regions (html/button-type).
- One `<main>` per page; headings go in order (`h1` then `h2`, never skipping a level for size; size is CSS).
- Load head scripts with `defer` or `type="module"` (perf/render-blocking-script).
- Never put a click handler on a `div` or `span`, never use `<br>` for spacing or tables for layout, never invent ARIA where a native element exists.
- Lowercase element and attribute names, quoted attribute values, closed non-void elements.

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

Prawdziwy plik

Gdzie trafia fe-html dla: Gemini CLI

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

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

---
trigger: glob
globs: "**/*.html, **/*.htm, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro"
description: "Writes and reviews HTML documents and templates (plain HTML, JSX, Vue, Svelte, Astro, Angular) with valid structure, semantic elements, landmarks, headings, images and buttons that work for everyone. Use when creating or editing markup, a page layout or a document head, or when asked \"is this HTML correct\", \"make this semantic\", \"fix the markup\"."
---

# HTML documents and semantics (frontend-skills)

- Start every full document with `<!doctype html>` and `<html lang="…">` (html/doctype, a11y/html-lang).
- Put `<meta charset="utf-8">` first in `<head>`, then the viewport meta tag, then a specific `<title>` (a11y/page-title).
- Give every `<img>` an `alt`: the meaning in context, or `alt=""` when it only decorates (a11y/img-alt).
- Use the element that already does the job: `<button type="button">` for actions, `<a href>` for navigation, `<nav>`, `<main>`, `<header>`, `<footer>` for regions (html/button-type).
- One `<main>` per page; headings go in order (`h1` then `h2`, never skipping a level for size; size is CSS).
- Load head scripts with `defer` or `type="module"` (perf/render-blocking-script).
- Never put a click handler on a `div` or `span`, never use `<br>` for spacing or tables for layout, never invent ARIA where a native element exists.
- Lowercase element and attribute names, quoted attribute values, closed non-void elements.

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

Prawdziwy plik

Gdzie trafia fe-html dla: Devin / Windsurf

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

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

# HTML documents and semantics (frontend-skills)

Writes and reviews HTML documents and templates (plain HTML, JSX, Vue, Svelte, Astro, Angular) with valid structure, semantic elements, landmarks, headings, images and buttons that work for everyone. Use when creating or editing markup, a page layout or a document head, or when asked "is this HTML correct", "make this semantic", "fix the markup".

- Start every full document with `<!doctype html>` and `<html lang="…">` (html/doctype, a11y/html-lang).
- Put `<meta charset="utf-8">` first in `<head>`, then the viewport meta tag, then a specific `<title>` (a11y/page-title).
- Give every `<img>` an `alt`: the meaning in context, or `alt=""` when it only decorates (a11y/img-alt).
- Use the element that already does the job: `<button type="button">` for actions, `<a href>` for navigation, `<nav>`, `<main>`, `<header>`, `<footer>` for regions (html/button-type).
- One `<main>` per page; headings go in order (`h1` then `h2`, never skipping a level for size; size is CSS).
- Load head scripts with `defer` or `type="module"` (perf/render-blocking-script).
- Never put a click handler on a `div` or `span`, never use `<br>` for spacing or tables for layout, never invent ARIA where a native element exists.
- Lowercase element and attribute names, quoted attribute values, closed non-void elements.

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

Prawdziwy plik

Gdzie trafia fe-html dla: OpenCode

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

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

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

# HTML documents and semantics (frontend-skills)

Writes and reviews HTML documents and templates (plain HTML, JSX, Vue, Svelte, Astro, Angular) with valid structure, semantic elements, landmarks, headings, images and buttons that work for everyone. Use when creating or editing markup, a page layout or a document head, or when asked "is this HTML correct", "make this semantic", "fix the markup".

- Start every full document with `<!doctype html>` and `<html lang="…">` (html/doctype, a11y/html-lang).
- Put `<meta charset="utf-8">` first in `<head>`, then the viewport meta tag, then a specific `<title>` (a11y/page-title).
- Give every `<img>` an `alt`: the meaning in context, or `alt=""` when it only decorates (a11y/img-alt).
- Use the element that already does the job: `<button type="button">` for actions, `<a href>` for navigation, `<nav>`, `<main>`, `<header>`, `<footer>` for regions (html/button-type).
- One `<main>` per page; headings go in order (`h1` then `h2`, never skipping a level for size; size is CSS).
- Load head scripts with `defer` or `type="module"` (perf/render-blocking-script).
- Never put a click handler on a `div` or `span`, never use `<br>` for spacing or tables for layout, never invent ARIA where a native element exists.
- Lowercase element and attribute names, quoted attribute values, closed non-void elements.

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

Prawdziwy plik

Gdzie trafia fe-html dla: Zed

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

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

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

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

# HTML documents and semantics (frontend-skills)

Writes and reviews HTML documents and templates (plain HTML, JSX, Vue, Svelte, Astro, Angular) with valid structure, semantic elements, landmarks, headings, images and buttons that work for everyone. Use when creating or editing markup, a page layout or a document head, or when asked "is this HTML correct", "make this semantic", "fix the markup".

- Start every full document with `<!doctype html>` and `<html lang="…">` (html/doctype, a11y/html-lang).
- Put `<meta charset="utf-8">` first in `<head>`, then the viewport meta tag, then a specific `<title>` (a11y/page-title).
- Give every `<img>` an `alt`: the meaning in context, or `alt=""` when it only decorates (a11y/img-alt).
- Use the element that already does the job: `<button type="button">` for actions, `<a href>` for navigation, `<nav>`, `<main>`, `<header>`, `<footer>` for regions (html/button-type).
- One `<main>` per page; headings go in order (`h1` then `h2`, never skipping a level for size; size is CSS).
- Load head scripts with `defer` or `type="module"` (perf/render-blocking-script).
- Never put a click handler on a `div` or `span`, never use `<br>` for spacing or tables for layout, never invent ARIA where a native element exists.
- Lowercase element and attribute names, quoted attribute values, closed non-void elements.

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

Prawdziwy plik

Gdzie trafia fe-html dla: Augment

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

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

---
description: "Writes and reviews HTML documents and templates (plain HTML, JSX, Vue, Svelte, Astro, Angular) with valid structure, semantic elements, landmarks, headings, images and buttons that work for everyone. Use when creating or editing markup, a page layout or a document head, or when asked \"is this HTML correct\", \"make this semantic\", \"fix the markup\"."
globs: **/*.html,**/*.htm,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro
alwaysApply: false
---

# HTML documents and semantics (frontend-skills)

- Start every full document with `<!doctype html>` and `<html lang="…">` (html/doctype, a11y/html-lang).
- Put `<meta charset="utf-8">` first in `<head>`, then the viewport meta tag, then a specific `<title>` (a11y/page-title).
- Give every `<img>` an `alt`: the meaning in context, or `alt=""` when it only decorates (a11y/img-alt).
- Use the element that already does the job: `<button type="button">` for actions, `<a href>` for navigation, `<nav>`, `<main>`, `<header>`, `<footer>` for regions (html/button-type).
- One `<main>` per page; headings go in order (`h1` then `h2`, never skipping a level for size; size is CSS).
- Load head scripts with `defer` or `type="module"` (perf/render-blocking-script).
- Never put a click handler on a `div` or `span`, never use `<br>` for spacing or tables for layout, never invent ARIA where a native element exists.
- Lowercase element and attribute names, quoted attribute values, closed non-void elements.

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

Prawdziwy plik

Gdzie trafia fe-html dla: Continue

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

---
name: "HTML documents and semantics"
description: "Writes and reviews HTML documents and templates (plain HTML, JSX, Vue, Svelte, Astro, Angular) with valid structure, semantic elements, landmarks, headings, images and buttons that work for everyone. Use when creating or editing markup, a page layout or a document head, or when asked \"is this HTML correct\", \"make this semantic\", \"fix the markup\"."
globs: ["**/*.html", "**/*.htm", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro"]
alwaysApply: false
---

# HTML documents and semantics (frontend-skills)

- Start every full document with `<!doctype html>` and `<html lang="…">` (html/doctype, a11y/html-lang).
- Put `<meta charset="utf-8">` first in `<head>`, then the viewport meta tag, then a specific `<title>` (a11y/page-title).
- Give every `<img>` an `alt`: the meaning in context, or `alt=""` when it only decorates (a11y/img-alt).
- Use the element that already does the job: `<button type="button">` for actions, `<a href>` for navigation, `<nav>`, `<main>`, `<header>`, `<footer>` for regions (html/button-type).
- One `<main>` per page; headings go in order (`h1` then `h2`, never skipping a level for size; size is CSS).
- Load head scripts with `defer` or `type="module"` (perf/render-blocking-script).
- Never put a click handler on a `div` or `span`, never use `<br>` for spacing or tables for layout, never invent ARIA where a native element exists.
- Lowercase element and attribute names, quoted attribute values, closed non-void elements.

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

Prawdziwy plik

Gdzie trafia fe-html dla: Amazon Q Developer

.frontend-skills/skills/fe-html/SKILL.mdskill
.frontend-skills/skills/fe-html/references/document.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-html` (HTML documents and semantics): when editing `**/*.html`, `**/*.htm`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-html/SKILL.md`.

Prawdziwy plik

Gdzie trafia fe-html dla: Aider

.frontend-skills/skills/fe-html/SKILL.mdskill
.frontend-skills/skills/fe-html/references/document.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-html` (HTML documents and semantics): when editing `**/*.html`, `**/*.htm`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-html/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:

Frazy z opisu skilla, po których agent go wybiera (po angielsku, jak w skillu):

is this HTML correct
make this semantic
fix the markup

A żeby sprawdzić i poprawić pracę:

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

Reguły, których uczy

html/doctype
Every HTML document starts with <!doctype html> so the browser renders it in standards mode.
umiarkowanastatyczne
html/button-type
Every button states its type (button, submit or reset); the default is submit.
drobnastatyczne
a11y/html-lang
The html element names the language of the page in a non-empty lang attribute.
poważnastatyczneWCAG 3.1.1
a11y/page-title
Every HTML document has a title element that says what the page is about.
poważnastatyczneWCAG 2.4.2
a11y/img-alt
Every img and area element has an alt attribute; a decorative image has alt="".
krytycznastatyczneWCAG 1.1.1
perf/render-blocking-script
A script in the head loads with defer, async or type="module", never as a plain blocking script.
umiarkowanastatyczne

Skrót reguł

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

Start every full document with <!doctype html> and <html lang="…"> (html/doctype, a11y/html-lang).
Put <meta charset="utf-8"> first in <head>, then the viewport meta tag, then a specific <title> (a11y/page-title).
Give every <img> an alt: the meaning in context, or alt="" when it only decorates (a11y/img-alt).
Use the element that already does the job: <button type="button"> for actions, <a href> for navigation, <nav>, <main>, <header>, <footer> for regions (html/button-type).
One <main> per page; headings go in order (h1 then h2, never skipping a level for size; size is CSS).
Load head scripts with defer or type="module" (perf/render-blocking-script).
Never put a click handler on a div or span, never use <br> for spacing or tables for layout, never invent ARIA where a native element exists.
Lowercase element and attribute names, quoted attribute values, closed non-void elements.

Kroki, które wykonuje agent

Find the document shell first (index.html, the root layout, app.html, a layout component); fix the head there once instead of per page.
Outline the page as landmarks and headings before styling: header > nav, main > h1 and sections with headings, footer.
Pick elements by meaning: lists for groups of like items, <table> with <th scope> for data, <figure>/<figcaption> for captioned media, <time datetime> for dates, <dl> for term and value pairs.
For each image decide: informative (describe it), decorative (alt=""), functional inside a link or button (describe the action). Add width and height.
In a framework template keep the same semantics; components should render a real <button> or <a>, not wrap a div.

Jak agent sprawdza swoją pracę

npx github:dawidolko/frontend-skills audit --changed lists the static findings with file and line; explain <rule id> gives the reason and the fix.
By hand: Tab through the page (every control reachable, in order), view the heading outline, and run the W3C validator (https://validator.w3.org/nu/) on a rendered page when markup looks unusual.

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/document.md1289 tokenów

SKILL.md na GitHubie