Web components and Lit

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## 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`.

## 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`.