Frontend Skills
Polski

Frameworks

Web components and Lit

Writes and reviews custom elements, plain or with Lit 3 - names, lifecycle, attributes and properties, shadow DOM styling, events, form-associated controls with ElementInternals, accessibility across the shadow boundary. Use when defining a custom element, writing a LitElement, wrapping a native control in shadow DOM, or asked to review a web component.

fe-web-componentslit, webc9 rules76 tokens always loaded, 1077 tokens when used, 1699 tokens in references on demand.

Install

init installs this skill when the project uses lit, webc. 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-web-components lands for Claude Code

  • .claude/skills/fe-web-components/SKILL.mdskill
  • .claude/skills/fe-web-components/references/web-components.mdskill
  • .claude/rules/fe-web-components.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-web-components.md
---
paths:
  - "**/*.js"
  - "**/*.ts"
  - "**/*.css"
  - "**/*.html"
---

# Web components and Lit (frontend-skills)

Writes and reviews custom elements, plain or with Lit 3 - names, lifecycle, attributes and properties, shadow DOM styling, events, form-associated controls with ElementInternals, accessibility across the shadow boundary. Use when defining a custom element, writing a LitElement, wrapping a native control in shadow DOM, or asked to review a web component.

- Name elements lowercase with a hyphen and a project prefix (`acme-date-picker`) (webc/valid-name).
- The constructor calls `super()` and never reads or adds attributes or children; do that in `connectedCallback` (webc/constructor-no-attributes).
- Next to `:host { display: … }` write `:host([hidden]) { display: none }` (webc/host-hidden).
- Never declare a Lit reactive property as a JavaScript class field; set it in the constructor or use `accessor` (webc/lit-class-fields).
- Replace reactive arrays and objects instead of mutating them (webc/lit-immutable-updates).
- `unsafeHTML`, `unsafeSVG` and `unsafeStatic` only get constants or sanitized strings (webc/lit-unsafe-html).
- Build autonomous elements around native ones; no `is=` built-ins, which Safari lacks (webc/no-customized-builtins).
- Custom form controls are form-associated and report value and validity through `ElementInternals` (webc/form-associated).
- Keep `for` and `aria-*` id references inside one tree; they do not cross a shadow root (webc/aria-idrefs-same-tree).
- Remove global listeners, timers and observers in `disconnectedCallback` (js/listener-cleanup).
- Inside the shadow root use real `<button>`, `<a>` and `<input>`, not `div` with `role` (a11y/no-click-on-static).

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

Where fe-web-components lands for OpenAI Codex

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

  • .agents/skills/fe-web-components/SKILL.mdskill
  • .agents/skills/fe-web-components/references/web-components.mdskill
  • .cursor/rules/fe-web-components.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-web-components.mdc
---
description: Writes and reviews custom elements, plain or with Lit 3 - names, lifecycle, attributes and properties, shadow DOM styling, events, form-associated controls with ElementInternals, accessibility across the shadow boundary. Use when defining a custom element, writing a LitElement, wrapping a native control in shadow DOM, or asked to review a web component.
globs: **/*.js, **/*.ts, **/*.css, **/*.html
alwaysApply: false
---

# Web components and Lit (frontend-skills)

- Name elements lowercase with a hyphen and a project prefix (`acme-date-picker`) (webc/valid-name).
- The constructor calls `super()` and never reads or adds attributes or children; do that in `connectedCallback` (webc/constructor-no-attributes).
- Next to `:host { display: … }` write `:host([hidden]) { display: none }` (webc/host-hidden).
- Never declare a Lit reactive property as a JavaScript class field; set it in the constructor or use `accessor` (webc/lit-class-fields).
- Replace reactive arrays and objects instead of mutating them (webc/lit-immutable-updates).
- `unsafeHTML`, `unsafeSVG` and `unsafeStatic` only get constants or sanitized strings (webc/lit-unsafe-html).
- Build autonomous elements around native ones; no `is=` built-ins, which Safari lacks (webc/no-customized-builtins).
- Custom form controls are form-associated and report value and validity through `ElementInternals` (webc/form-associated).
- Keep `for` and `aria-*` id references inside one tree; they do not cross a shadow root (webc/aria-idrefs-same-tree).
- Remove global listeners, timers and observers in `disconnectedCallback` (js/listener-cleanup).
- Inside the shadow root use real `<button>`, `<a>` and `<input>`, not `div` with `role` (a11y/no-click-on-static).

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

Where fe-web-components lands for GitHub Copilot

  • .agents/skills/fe-web-components/SKILL.mdskill
  • .agents/skills/fe-web-components/references/web-components.mdskill
  • .github/instructions/fe-web-components.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-web-components.instructions.md
---
applyTo: "**/*.js,**/*.ts,**/*.css,**/*.html"
description: "Writes and reviews custom elements, plain or with Lit 3 - names, lifecycle, attributes and properties, shadow DOM styling, events, form-associated controls with ElementInternals, accessibility across the shadow boundary. Use when defining a custom element, writing a LitElement, wrapping a native control in shadow DOM, or asked to review a web component."
---

# Web components and Lit (frontend-skills)

- Name elements lowercase with a hyphen and a project prefix (`acme-date-picker`) (webc/valid-name).
- The constructor calls `super()` and never reads or adds attributes or children; do that in `connectedCallback` (webc/constructor-no-attributes).
- Next to `:host { display: … }` write `:host([hidden]) { display: none }` (webc/host-hidden).
- Never declare a Lit reactive property as a JavaScript class field; set it in the constructor or use `accessor` (webc/lit-class-fields).
- Replace reactive arrays and objects instead of mutating them (webc/lit-immutable-updates).
- `unsafeHTML`, `unsafeSVG` and `unsafeStatic` only get constants or sanitized strings (webc/lit-unsafe-html).
- Build autonomous elements around native ones; no `is=` built-ins, which Safari lacks (webc/no-customized-builtins).
- Custom form controls are form-associated and report value and validity through `ElementInternals` (webc/form-associated).
- Keep `for` and `aria-*` id references inside one tree; they do not cross a shadow root (webc/aria-idrefs-same-tree).
- Remove global listeners, timers and observers in `disconnectedCallback` (js/listener-cleanup).
- Inside the shadow root use real `<button>`, `<a>` and `<input>`, not `div` with `role` (a11y/no-click-on-static).

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

Where fe-web-components lands for Gemini CLI

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

  • .agents/skills/fe-web-components/SKILL.mdskill
  • .agents/skills/fe-web-components/references/web-components.mdskill
  • .agents/rules/fe-web-components.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-web-components.md
---
trigger: glob
globs: "**/*.js, **/*.ts, **/*.css, **/*.html"
description: "Writes and reviews custom elements, plain or with Lit 3 - names, lifecycle, attributes and properties, shadow DOM styling, events, form-associated controls with ElementInternals, accessibility across the shadow boundary. Use when defining a custom element, writing a LitElement, wrapping a native control in shadow DOM, or asked to review a web component."
---

# Web components and Lit (frontend-skills)

- Name elements lowercase with a hyphen and a project prefix (`acme-date-picker`) (webc/valid-name).
- The constructor calls `super()` and never reads or adds attributes or children; do that in `connectedCallback` (webc/constructor-no-attributes).
- Next to `:host { display: … }` write `:host([hidden]) { display: none }` (webc/host-hidden).
- Never declare a Lit reactive property as a JavaScript class field; set it in the constructor or use `accessor` (webc/lit-class-fields).
- Replace reactive arrays and objects instead of mutating them (webc/lit-immutable-updates).
- `unsafeHTML`, `unsafeSVG` and `unsafeStatic` only get constants or sanitized strings (webc/lit-unsafe-html).
- Build autonomous elements around native ones; no `is=` built-ins, which Safari lacks (webc/no-customized-builtins).
- Custom form controls are form-associated and report value and validity through `ElementInternals` (webc/form-associated).
- Keep `for` and `aria-*` id references inside one tree; they do not cross a shadow root (webc/aria-idrefs-same-tree).
- Remove global listeners, timers and observers in `disconnectedCallback` (js/listener-cleanup).
- Inside the shadow root use real `<button>`, `<a>` and `<input>`, not `div` with `role` (a11y/no-click-on-static).

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

Where fe-web-components lands for Devin / Windsurf

  • .agents/skills/fe-web-components/SKILL.mdskill
  • .agents/skills/fe-web-components/references/web-components.mdskill
  • .devin/rules/fe-web-components.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-web-components.md
---
trigger: glob
globs: "**/*.js,**/*.ts,**/*.css,**/*.html"
---

# Web components and Lit (frontend-skills)

Writes and reviews custom elements, plain or with Lit 3 - names, lifecycle, attributes and properties, shadow DOM styling, events, form-associated controls with ElementInternals, accessibility across the shadow boundary. Use when defining a custom element, writing a LitElement, wrapping a native control in shadow DOM, or asked to review a web component.

- Name elements lowercase with a hyphen and a project prefix (`acme-date-picker`) (webc/valid-name).
- The constructor calls `super()` and never reads or adds attributes or children; do that in `connectedCallback` (webc/constructor-no-attributes).
- Next to `:host { display: … }` write `:host([hidden]) { display: none }` (webc/host-hidden).
- Never declare a Lit reactive property as a JavaScript class field; set it in the constructor or use `accessor` (webc/lit-class-fields).
- Replace reactive arrays and objects instead of mutating them (webc/lit-immutable-updates).
- `unsafeHTML`, `unsafeSVG` and `unsafeStatic` only get constants or sanitized strings (webc/lit-unsafe-html).
- Build autonomous elements around native ones; no `is=` built-ins, which Safari lacks (webc/no-customized-builtins).
- Custom form controls are form-associated and report value and validity through `ElementInternals` (webc/form-associated).
- Keep `for` and `aria-*` id references inside one tree; they do not cross a shadow root (webc/aria-idrefs-same-tree).
- Remove global listeners, timers and observers in `disconnectedCallback` (js/listener-cleanup).
- Inside the shadow root use real `<button>`, `<a>` and `<input>`, not `div` with `role` (a11y/no-click-on-static).

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

Where fe-web-components lands for OpenCode

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

  • .claude/skills/fe-web-components/SKILL.mdskill
  • .claude/skills/fe-web-components/references/web-components.mdskill
  • .clinerules/fe-web-components.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-web-components.md
---
paths:
  - "**/*.js"
  - "**/*.ts"
  - "**/*.css"
  - "**/*.html"
---

# Web components and Lit (frontend-skills)

Writes and reviews custom elements, plain or with Lit 3 - names, lifecycle, attributes and properties, shadow DOM styling, events, form-associated controls with ElementInternals, accessibility across the shadow boundary. Use when defining a custom element, writing a LitElement, wrapping a native control in shadow DOM, or asked to review a web component.

- Name elements lowercase with a hyphen and a project prefix (`acme-date-picker`) (webc/valid-name).
- The constructor calls `super()` and never reads or adds attributes or children; do that in `connectedCallback` (webc/constructor-no-attributes).
- Next to `:host { display: … }` write `:host([hidden]) { display: none }` (webc/host-hidden).
- Never declare a Lit reactive property as a JavaScript class field; set it in the constructor or use `accessor` (webc/lit-class-fields).
- Replace reactive arrays and objects instead of mutating them (webc/lit-immutable-updates).
- `unsafeHTML`, `unsafeSVG` and `unsafeStatic` only get constants or sanitized strings (webc/lit-unsafe-html).
- Build autonomous elements around native ones; no `is=` built-ins, which Safari lacks (webc/no-customized-builtins).
- Custom form controls are form-associated and report value and validity through `ElementInternals` (webc/form-associated).
- Keep `for` and `aria-*` id references inside one tree; they do not cross a shadow root (webc/aria-idrefs-same-tree).
- Remove global listeners, timers and observers in `disconnectedCallback` (js/listener-cleanup).
- Inside the shadow root use real `<button>`, `<a>` and `<input>`, not `div` with `role` (a11y/no-click-on-static).

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

Where fe-web-components lands for Zed

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

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

  • .kiro/skills/fe-web-components/SKILL.mdskill
  • .kiro/skills/fe-web-components/references/web-components.mdskill
  • .kiro/steering/fe-web-components.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-web-components.md
---
inclusion: fileMatch
fileMatchPattern: ["**/*.js", "**/*.ts", "**/*.css", "**/*.html"]
---

# Web components and Lit (frontend-skills)

Writes and reviews custom elements, plain or with Lit 3 - names, lifecycle, attributes and properties, shadow DOM styling, events, form-associated controls with ElementInternals, accessibility across the shadow boundary. Use when defining a custom element, writing a LitElement, wrapping a native control in shadow DOM, or asked to review a web component.

- Name elements lowercase with a hyphen and a project prefix (`acme-date-picker`) (webc/valid-name).
- The constructor calls `super()` and never reads or adds attributes or children; do that in `connectedCallback` (webc/constructor-no-attributes).
- Next to `:host { display: … }` write `:host([hidden]) { display: none }` (webc/host-hidden).
- Never declare a Lit reactive property as a JavaScript class field; set it in the constructor or use `accessor` (webc/lit-class-fields).
- Replace reactive arrays and objects instead of mutating them (webc/lit-immutable-updates).
- `unsafeHTML`, `unsafeSVG` and `unsafeStatic` only get constants or sanitized strings (webc/lit-unsafe-html).
- Build autonomous elements around native ones; no `is=` built-ins, which Safari lacks (webc/no-customized-builtins).
- Custom form controls are form-associated and report value and validity through `ElementInternals` (webc/form-associated).
- Keep `for` and `aria-*` id references inside one tree; they do not cross a shadow root (webc/aria-idrefs-same-tree).
- Remove global listeners, timers and observers in `disconnectedCallback` (js/listener-cleanup).
- Inside the shadow root use real `<button>`, `<a>` and `<input>`, not `div` with `role` (a11y/no-click-on-static).

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

Where fe-web-components lands for Augment

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

  • .trae/skills/fe-web-components/SKILL.mdskill
  • .trae/skills/fe-web-components/references/web-components.mdskill
  • .trae/rules/fe-web-components.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-web-components.md
---
description: "Writes and reviews custom elements, plain or with Lit 3 - names, lifecycle, attributes and properties, shadow DOM styling, events, form-associated controls with ElementInternals, accessibility across the shadow boundary. Use when defining a custom element, writing a LitElement, wrapping a native control in shadow DOM, or asked to review a web component."
globs: **/*.js,**/*.ts,**/*.css,**/*.html
alwaysApply: false
---

# Web components and Lit (frontend-skills)

- Name elements lowercase with a hyphen and a project prefix (`acme-date-picker`) (webc/valid-name).
- The constructor calls `super()` and never reads or adds attributes or children; do that in `connectedCallback` (webc/constructor-no-attributes).
- Next to `:host { display: … }` write `:host([hidden]) { display: none }` (webc/host-hidden).
- Never declare a Lit reactive property as a JavaScript class field; set it in the constructor or use `accessor` (webc/lit-class-fields).
- Replace reactive arrays and objects instead of mutating them (webc/lit-immutable-updates).
- `unsafeHTML`, `unsafeSVG` and `unsafeStatic` only get constants or sanitized strings (webc/lit-unsafe-html).
- Build autonomous elements around native ones; no `is=` built-ins, which Safari lacks (webc/no-customized-builtins).
- Custom form controls are form-associated and report value and validity through `ElementInternals` (webc/form-associated).
- Keep `for` and `aria-*` id references inside one tree; they do not cross a shadow root (webc/aria-idrefs-same-tree).
- Remove global listeners, timers and observers in `disconnectedCallback` (js/listener-cleanup).
- Inside the shadow root use real `<button>`, `<a>` and `<input>`, not `div` with `role` (a11y/no-click-on-static).

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

Where fe-web-components lands for Continue

  • .frontend-skills/skills/fe-web-components/SKILL.mdskill
  • .frontend-skills/skills/fe-web-components/references/web-components.mdskill
  • .continue/rules/fe-web-components.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-web-components.md
---
name: "Web components and Lit"
description: "Writes and reviews custom elements, plain or with Lit 3 - names, lifecycle, attributes and properties, shadow DOM styling, events, form-associated controls with ElementInternals, accessibility across the shadow boundary. Use when defining a custom element, writing a LitElement, wrapping a native control in shadow DOM, or asked to review a web component."
globs: ["**/*.js", "**/*.ts", "**/*.css", "**/*.html"]
alwaysApply: false
---

# Web components and Lit (frontend-skills)

- Name elements lowercase with a hyphen and a project prefix (`acme-date-picker`) (webc/valid-name).
- The constructor calls `super()` and never reads or adds attributes or children; do that in `connectedCallback` (webc/constructor-no-attributes).
- Next to `:host { display: … }` write `:host([hidden]) { display: none }` (webc/host-hidden).
- Never declare a Lit reactive property as a JavaScript class field; set it in the constructor or use `accessor` (webc/lit-class-fields).
- Replace reactive arrays and objects instead of mutating them (webc/lit-immutable-updates).
- `unsafeHTML`, `unsafeSVG` and `unsafeStatic` only get constants or sanitized strings (webc/lit-unsafe-html).
- Build autonomous elements around native ones; no `is=` built-ins, which Safari lacks (webc/no-customized-builtins).
- Custom form controls are form-associated and report value and validity through `ElementInternals` (webc/form-associated).
- Keep `for` and `aria-*` id references inside one tree; they do not cross a shadow root (webc/aria-idrefs-same-tree).
- Remove global listeners, timers and observers in `disconnectedCallback` (js/listener-cleanup).
- Inside the shadow root use real `<button>`, `<a>` and `<input>`, not `div` with `role` (a11y/no-click-on-static).

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

Where fe-web-components lands for Amazon Q Developer

  • .frontend-skills/skills/fe-web-components/SKILL.mdskill
  • .frontend-skills/skills/fe-web-components/references/web-components.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-web-components` (Web components and Lit): when editing `**/*.js`, `**/*.ts`, `**/*.css`, `**/*.html`, first read `.frontend-skills/skills/fe-web-components/SKILL.md`.
The real file

Where fe-web-components lands for Aider

  • .frontend-skills/skills/fe-web-components/SKILL.mdskill
  • .frontend-skills/skills/fe-web-components/references/web-components.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-web-components` (Web components and Lit): when editing `**/*.js`, `**/*.ts`, `**/*.css`, `**/*.html`, first read `.frontend-skills/skills/fe-web-components/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-web-components skill on this file.
  • Run the front-end audit on what I changed and fix everything serious.
  • Explain webc/valid-name and fix it here.

Rules it teaches

  • webc/valid-name

    A custom element name is lowercase, starts with a letter, contains a hyphen and is not a reserved name, or define() throws.

    seriousstatic

  • webc/constructor-no-attributes

    A custom element constructor never reads or adds attributes or children; do that in connectedCallback.

    seriousstatic

  • webc/host-hidden

    Shadow styles that give :host a display also add :host([hidden]) { display none }, or the hidden attribute stops working.

    moderatestatic

  • webc/lit-class-fields

    In JavaScript, a Lit reactive property is never also declared as a class field; the field hides Lit's accessor and updates stop.

    seriousstatic

  • webc/lit-immutable-updates

    A Lit reactive array is replaced, not mutated in place (push, splice, sort), unless requestUpdate() follows.

    moderatestatic

  • webc/lit-unsafe-html

    Lit's unsafeHTML, unsafeSVG and unsafeStatic only receive strings the developer wrote or sanitized, never data.

    seriousstatic

  • webc/no-customized-builtins

    Build autonomous custom elements that wrap a native element; do not extend built-ins with is=, which Safari does not support.

    moderatestatic

  • webc/form-associated

    A custom form control is form-associated (formAssociated and attachInternals) and reports its value and validity to the form.

    seriousmanual

  • webc/aria-idrefs-same-tree

    id references (for, aria-labelledby, aria-describedby, aria-controls) point at an element in the same DOM tree, not across a shadow root.

    seriousmanualWCAG 1.3.1, 4.1.2

The rule digest

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

  • Name elements lowercase with a hyphen and a project prefix (acme-date-picker) (webc/valid-name).
  • The constructor calls super() and never reads or adds attributes or children; do that in connectedCallback (webc/constructor-no-attributes).
  • Next to :host { display: … } write :host([hidden]) { display: none } (webc/host-hidden).
  • Never declare a Lit reactive property as a JavaScript class field; set it in the constructor or use accessor (webc/lit-class-fields).
  • Replace reactive arrays and objects instead of mutating them (webc/lit-immutable-updates).
  • unsafeHTML, unsafeSVG and unsafeStatic only get constants or sanitized strings (webc/lit-unsafe-html).
  • Build autonomous elements around native ones; no is= built-ins, which Safari lacks (webc/no-customized-builtins).
  • Custom form controls are form-associated and report value and validity through ElementInternals (webc/form-associated).
  • Keep for and aria-* id references inside one tree; they do not cross a shadow root (webc/aria-idrefs-same-tree).
  • Remove global listeners, timers and observers in disconnectedCallback (js/listener-cleanup).
  • Inside the shadow root use real <button>, <a> and <input>, not div with role (a11y/no-click-on-static).

Steps the agent follows

  1. Find how components are built: extends LitElement and lit in package.json, or extends HTMLElement with customElements.define. In TypeScript with Lit decorators check useDefineForClassFields: false in tsconfig.json, or use accessor on decorated fields (standard decorators).
  2. Attributes for strings, numbers and booleans (reflect only what styling needs); properties for objects and arrays, never reflected. List watched attributes in static observedAttributes.
  3. Set default semantics with this.internals = this.attachInternals(): internals.role, internals.ariaExpanded, custom states with internals.states.add('open') and :state(open), instead of adding attributes to the host.
  4. Dispatch events for changes the user caused: new CustomEvent('acme-change', { detail, bubbles: true, composed: true }) when listeners outside other shadow roots must hear them.
  5. Host wrapping one control: delegatesFocus: true (Lit: static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }).
  6. Content that must show before JavaScript (LCP, search) is server-rendered with declarative shadow DOM (<template shadowrootmode="open">); Lit SSR is still a Labs package.

How the agent checks the work

  • npx github:dawidolko/frontend-skills audit --changed reports invalid names, constructors that touch the host, :host without [hidden], Lit class-field shadowing, in-place array mutation, unsafeHTML with data and is= built-ins. Files in .ts are not read yet; review them by hand.
  • Run ESLint with eslint-plugin-lit and use the lit-plugin editor plugin for template type checks.
  • Create the element with document.createElement('acme-x') in a test (catches constructor errors), test the form with and without the element, and check the accessibility tree: tools do not follow references across shadow roots reliably.

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