skills.rest
forcedotcom
forcedotcomOFFICIAL
Explore all skills by this author →
Website𝕏@salesforcedevsGitHub

lit-components

Create and edit Lit components using TypeScript decorators and reactive accessors.

1.0k|454|Updated Jun 21, 2017
Search Tags:#web components#Frontend#typeScript#decorators#lit#VSCode extension#reactive properties
One-click install
npx skills add https://github.com/forcedotcom/salesforcedx-vscode --skill lit-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lit-components
Source: https://github.com/forcedotcom/salesforcedx-vscode/tree/main/.claude/skills/lit-components
Command: npx skills add https://github.com/forcedotcom/salesforcedx-vscode --skill lit-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Writing Lit components with TypeScript often leads to inconsistent decorator usage, legacy class-field patterns, and misconfigured reactive properties. This Skill enforces the repository's standard patterns for reactive properties and internal state so components compile, lint, and test cleanly.

Core Features & Use Cases

  • Standardized Decorator Usage: Imports decorators from individual lit/decorators/<name>.js modules and uses TypeScript auto-accessors.
  • Reactive Property Patterns: Declares public inputs with @property(...) public accessor and internal state with @state() private accessor, including { attribute: false } for object or array inputs.
  • Use Case: When adding a new Lit component to a VS Code extension webview, apply these rules to avoid the legacy static properties pattern and verify the component with compile, lint, unit tests, and browser tests.

Quick Start

Create a new Lit component in this repository following the standard decorator and reactive property conventions.

Frequently Asked Questions about lit-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I declare reactive properties in a Lit component with TypeScript?▼

Declare public reactive inputs with `@property(...) public accessor` and internal render state with `@state() private accessor`. Initialize accessors inline when they have defaults, and use a definite-assignment assertion for required inputs supplied by the host.

How do I import Lit decorators in TypeScript?▼

Import each decorator from its individual module path, such as `lit/decorators/property.js` or `lit/decorators/state.js`. This pattern keeps imports explicit and aligns with the repository's component conventions.

Should I use static properties or decorators for Lit reactive state?▼

Use decorators with TypeScript auto-accessors rather than the legacy `static properties` plus `declare` pattern. Do not enable `experimentalDecorators` or legacy class-field semantics for reactive members.

How do I pass objects or arrays to a Lit component without attribute mapping?▼

Use `{ attribute: false }` in the `@property` options for object or array inputs that must not map to HTML attributes. Specify `type` only when an attribute needs Lit conversion.

How do I verify Lit component changes before committing?▼

Run the package's compile, lint, and unit tests after editing a component. When behavior or rendering changes, also run the focused browser tests for that component.

Related Skills

Explore More Software Engineering Skills→
FlexNetOSFlexNetOS

env-toolchain-install

Automate environment tooling installation and configuration with a declarative component model.

Official
Advanced
gitkrakengitkraken
9.9k

add-webview

Generate webview boilerplate with protocol definitions, provider classes, and Lit registration.

Official
Intermediate
Formspec-orgFormspec-org
4

formspec-integrate

Integrate Formspec into applications to render, style, and validate forms.

Official
Advanced
ConectateConectate
15

lit-ct-components

Integrate Conectate Components with Lit using CtLit utilities, slots, and events.

Official
Intermediate