Build theme-aware Lit components with Cell integration for Common UI v2.
npx skills add https://github.com/commontoolsinc/labs --skill lit-component
Please help me install this Agent Skill. Skill: lit-component Source: https://github.com/commontoolsinc/labs/tree/main/.claude/skills/lit-component Command: npx skills add https://github.com/commontoolsinc/labs --skill lit-component
Developing robust, reactive web components that integrate seamlessly with a distributed runtime and a sophisticated theme system can be challenging. This skill provides a comprehensive guide to building Lit components for Common UI v2, covering everything from basic structure to advanced Cell integration and theme management, ensuring high-quality, maintainable UI.
ct- prefixed input component for the CommonTools platform. This skill guides them through setting up the component, integrating it with the theme system, ensuring it reacts to data changes from a Cell, and handling user input with proper event emission, significantly accelerating development.import { css, html } from "lit"; import { BaseElement } from "../../core/base-element.ts";
export class CTComponentName extends BaseElement {
static override styles = [
BaseElement.baseStyles,
css :host { display: block; box-sizing: border-box; } ,
];
static override properties = { // Define reactive properties };
constructor() { super(); // Set defaults }
override render() {
return html<!-- component template -->;
}
}
High-intent search queries and answers about installing and using this skill.
Reactive Lit components for Common UI extend BaseElement, define properties for reactivity, and consume theme tokens through CSS custom properties. The framework automatically re-renders when properties change, and theme integration happens via inherited styles from BaseElement.baseStyles, ensuring components adapt to user preferences without manual intervention.
Wire Lit components to Cells by subscribing to Cell emissions in the component lifecycle, mapping Cell values to reactive properties, and triggering re-renders when data changes. This creates a binding between the distributed runtime's state management and your component's reactive template, enabling dynamic updates without manual data-fetching logic.
Create ct- prefixed components by extending BaseElement, defining static styles that include baseStyles, declaring reactive properties, and implementing a render() method returning Lit templates. Follow the standard file structure within the Common UI v2 library, ensuring components inherit core functionality and maintain consistency with existing component patterns.
TypeScript is fully supported for Lit components in Common UI v2. Type your reactive properties, component methods, and Cell subscriptions to catch errors at development time. BaseElement provides typed hooks for lifecycle management and theme integration, enabling compile-time validation of component behavior and Cell bindings.
Emit events from Lit components using the standard dispatchEvent API with CustomEvent, triggered by user interactions in your template. Define typed event payloads to communicate state changes back to parent components and Cell subscribers, maintaining reactive patterns across your application's event flow.
Third-party libraries must respect CSS custom properties for theme tokens and avoid hard-coded colors that conflict with Common UI's theme system. Style isolation and shadow DOM considerations may require wrapper components or style injection; ensure libraries support reactive property binding or manually sync external state to component properties.
IgniteUIAdds a reactive property to an existing Lit web component with decorators and tests.
IgniteUIGenerate a Lit web component scaffold with theme files, tests, Storybook story, and exports.
djankiesConfigure Tailwind CSS v4 with CSS-first @import and @theme directives.
arbazkhan971Analyze UI component architecture and generate tokenized component library structures.