Enforces correct attribute naming, boolean bindings, and select handling in Lit web components.
npx skills add https://github.com/IgorAIvanov/altera03 --skill lit-igoraivanov
Please help me install this Agent Skill. Skill: lit Source: https://github.com/IgorAIvanov/altera03/tree/main/skills/src/lit Command: npx skills add https://github.com/IgorAIvanov/altera03 --skill lit-igoraivanov
showClear becomes showclear instead of show-clear — a silent bug with no warnings. This Skill codifies the project's rules for writing Lit web components correctly, covering attribute naming, boolean bindings, <select> value handling, and Tailwind integration with Shadow DOM. ## Core Features & Use Cases - Attribute naming rules: Mandates explicit attribute: "kebab-case" on every camelCase @property to prevent silent attribute mismatches. - Boolean and select binding patterns: Enforces ?attr=${value} bindings for booleans and ?selected on <option> elements instead of the broken .value on <select>. - Tailwind and Shadow DOM guidance: Explains how GlobalStyledLitElement adopts the shared Tailwind stylesheet and when to add @source entries in app/styles/tailwind.css. - Use Case: When adding a new displayField property to a picker component, the Skill ensures you write @property({ type: String, attribute: "display-field" }) so the HTML attribute actually works. ## Quick Start Use the lit skill before writing or editing any Lit component with @customElement or @property decorators to apply the project's attribute naming and binding rules.High-intent search queries and answers about installing and using this skill.
Lit converts camelCase property names to lowercase attributes without hyphens, so `showClear` maps to `showclear`, not `show-clear`. Fix it by declaring the attribute explicitly: `@property({ type: Boolean, attribute: "show-clear" }) showClear = false;`.
Use the `?` prefix binding, for example `html`<ui-picker ?show-clear=${this.readonly}>``. Without `?`, Lit passes the string value of the attribute rather than a true/false toggle, so static presence always means true.
Lit commits element bindings before adding children, so `.value` is assigned when no `<option>` elements exist yet and the browser discards it. Instead, mark the selected item directly with `?selected=${this.value === "option"}` on each `<option>`.
Extend `GlobalStyledLitElement`, which adopts a shared Tailwind `CSSStyleSheet` into each shadow root. If classes from a new directory are missing, add an `@source` entry with a real disk path in `app/styles/tailwind.css`.
Use `GlobalStyledLitElement` for ui-kit components that need Tailwind and daisyUI classes via the shared adopted stylesheet. Use plain `LitElement` when the component defines its own styles with `static styles = css`...``.
billydeeii136Generate UI components using shadcn/ui and Tailwind CSS utility classes.
ConectateIntegrate Conectate Components with Lit using CtLit utilities, slots, and events.
spencerpaulyDetect dark mode rendering defects by comparing light and dark browser states.
mattolenikCreate custom HTML elements with Shadow DOM and RxJS state management.