Lit Component
Generates reusable UI components from text descriptions, streamlining development workflows with common design patterns.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add lit-component npx -- -y @trustedskills/lit-component
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"lit-component": {
"command": "npx",
"args": [
"-y",
"@trustedskills/lit-component"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill provides guidance for developing Lit web components within the Common UI v2 component library. It helps developers create and modify reusable UI elements, focusing on design patterns like composition over control and adaptive styling to system preferences. The goal is to streamline development workflows by providing a structured approach to building consistent and functional user interface components.
When to use it
- Creating new "ct-" prefixed components within the Common UI package.
- Modifying existing Common UI v2 components.
- Implementing theme-aware components that respect system preferences.
- Integrating components with Cell abstractions for reactive behavior.
- Debugging component lifecycle or reactivity issues.
Key capabilities
- Guidance on developing Lit web components within the Common UI v2 framework.
- Emphasis on design principles like composition over control and adaptive styling.
- Support for building theme-aware components that respect system preferences.
- Integration with Cell abstractions to create reactive components.
- Categorization of components into Layout, Visual, Input, and Complex/Integrated types.
Example prompts
- "Guide me through creating a new 'ct-button' component in Common UI."
- "How do I implement theme awareness in my existing 'ct-input' component?"
- "Show me the basic template for a Lit web component within this framework."
Tips & gotchas
- The skill focuses on development within the Common UI v2 library; familiarity with Lit and its concepts is helpful.
- Components should prioritize working together with minimal configuration, favoring composition over granular styling.
- Refer to
references/component-patterns.mdandreferences/advanced-patterns.mdfor detailed component patterns and integration examples.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.