# Lit Components

> Create or edit Lit components in this repository, including reactive properties and internal state.

- Skill: `forcedotcom/lit-components` (Agent Skill)
- Install (CLI): `npx skillmds@latest add forcedotcom/lit-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/forcedotcom/lit-components/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: forcedotcom (https://skillmd.com/u/forcedotcom)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/forcedotcom/lit-components

---


# Lit components

Use Lit's standard decorators with TypeScript auto-accessors.

- Import decorators from their individual `lit/decorators/<name>.js` modules.
- Declare public reactive inputs with `@property(...) public accessor` and internal render state with `@state() private accessor`.
- Initialize accessors inline when they have defaults. Use a definite-assignment assertion for required inputs supplied by the host.
- Use `{ attribute: false }` for object or array inputs that must not map to HTML attributes. Specify `type` when an attribute needs Lit conversion.
- Do not use the legacy `static properties` plus `declare` pattern for reactive members, or enable `experimentalDecorators`/legacy class-field semantics.
- Verify the component with its package compile, lint, unit tests, and focused browser tests when behavior or rendering changes.