lit

# Lit Skill Expert assistance for building Web Components with Lit. ## Capabilities - Create Lit elements with reactive properties - Implement shadow DOM styling - Handle events and lifecycle callbacks - Build composable component libraries - Ensure framework interoperability - Configure SSR with Lit ## Usage Invoke this skill when you need to: - Build framework-agnostic components - Create design system primitives - Implement custom elements - Ensure cross-framework compatibility - Build micro-frontends ## Inputs | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | elementName | string | Yes | Custom element name (must have hyphen) | | properties | array | No | Reactive properties | | shadowDom | boolean | No | Use shadow DOM (default: true) | | typescript | boolean | No | Use TypeScript (default: true) | ## Component Patterns ### Basic Lit Element ```typescript // src/components/user-card.ts import { LitElement, html, css } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; interface User { id: string; name: string; email: string; avatar?: string; } @customElement('user-card') export class UserCard extends LitElement { static styles = css` :host { display: block; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; } .user-card { display: flex; gap: 1rem; } .avatar { width: 64px; height: 64px; bor...