lit
Web Components development with Lit including custom elements, reactive properties, shadow DOM, and interoperability.
npx skills add a5c-ai/babysitter --skill lit --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 LitE
- Capabilities
- Usage
- Inputs
- Component Patterns
- Basic Lit Element
- Reactive Controller
- Directive for Custom Rendering
- Slots and Composition
- Best Practices
- Target Processes
What does the lit skill do?
Web Components development with Lit including custom elements, reactive properties, shadow DOM, and interoperability.
How do I install it?
Run `npx skills add a5c-ai/babysitter --skill lit --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From a5c-ai/babysitter, a repository with 1,642 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.