Frontend Skills
Polski

Foundations

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-htmlevery web project6 rules76 tokens always loaded, 869 tokens when used, 1289 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.

Agent
npx github:dawidolko/frontend-skills init

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
AgentFound by
Claude CodeCLAUDE.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 CLIGEMINI.md .gemini
Antigravity CLI.agents/rules .agent/rules
Devin / Windsurf.devin .windsurf .windsurfrules
OpenCodeopencode.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-html lands for Claude Code

  • .claude/skills/fe-html/SKILL.mdskill
  • .claude/skills/fe-html/references/document.mdskill
  • .claude/rules/fe-html.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-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>`.
The real file

Where fe-html lands for OpenAI Codex

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

  • .agents/skills/fe-html/SKILL.mdskill
  • .agents/skills/fe-html/references/document.mdskill
  • .cursor/rules/fe-html.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-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>`.
The real file

Where fe-html lands for GitHub Copilot

  • .agents/skills/fe-html/SKILL.mdskill
  • .agents/skills/fe-html/references/document.mdskill
  • .github/instructions/fe-html.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-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>`.
The real file

Where fe-html lands for Gemini CLI

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

  • .agents/skills/fe-html/SKILL.mdskill
  • .agents/skills/fe-html/references/document.mdskill
  • .agents/rules/fe-html.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-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>`.
The real file

Where fe-html lands for Devin / Windsurf

  • .agents/skills/fe-html/SKILL.mdskill
  • .agents/skills/fe-html/references/document.mdskill
  • .devin/rules/fe-html.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-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>`.
The real file

Where fe-html lands for OpenCode

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

  • .claude/skills/fe-html/SKILL.mdskill
  • .claude/skills/fe-html/references/document.mdskill
  • .clinerules/fe-html.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-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>`.
The real file

Where fe-html lands for Zed

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

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

  • .kiro/skills/fe-html/SKILL.mdskill
  • .kiro/skills/fe-html/references/document.mdskill
  • .kiro/steering/fe-html.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-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>`.
The real file

Where fe-html lands for Augment

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

  • .trae/skills/fe-html/SKILL.mdskill
  • .trae/skills/fe-html/references/document.mdskill
  • .trae/rules/fe-html.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-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>`.
The real file

Where fe-html lands for Continue

  • .frontend-skills/skills/fe-html/SKILL.mdskill
  • .frontend-skills/skills/fe-html/references/document.mdskill
  • .continue/rules/fe-html.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-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>`.
The real file

Where fe-html lands for Amazon Q Developer

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

Where fe-html lands for Aider

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

Phrases from the skill description that make the agent pick it:

  • is this HTML correct
  • make this semantic
  • fix the markup

And to check and fix the work:

  • Use the fe-html skill on this file.
  • Run the front-end audit on what I changed and fix everything serious.
  • Explain html/doctype and fix it here.

Rules it teaches

  • html/doctype

    Every HTML document starts with <!doctype html> so the browser renders it in standards mode.

    moderatestatic

  • html/button-type

    Every button states its type (button, submit or reset); the default is submit.

    minorstatic

  • a11y/html-lang

    The html element names the language of the page in a non-empty lang attribute.

    seriousstaticWCAG 3.1.1

  • a11y/page-title

    Every HTML document has a title element that says what the page is about.

    seriousstaticWCAG 2.4.2

  • a11y/img-alt

    Every img and area element has an alt attribute; a decorative image has alt="".

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

    moderatestatic

The rule digest

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

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

Steps the agent follows

  1. Find the document shell first (index.html, the root layout, app.html, a layout component); fix the head there once instead of per page.
  2. Outline the page as landmarks and headings before styling: header > nav, main > h1 and sections with headings, footer.
  3. 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.
  4. For each image decide: informative (describe it), decorative (alt=""), functional inside a link or button (describe the action). Add width and height.
  5. In a framework template keep the same semantics; components should render a real <button> or <a>, not wrap a div.

How the agent checks the work

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

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

SKILL.md on GitHub