lit-dev

Scaffold Lit web components with TypeScript decorators, Zod schemas, and Playwright tests.

9|Updated Apr 3, 2026
One-click install
npx skills add https://github.com/klh/speedy-claude --skill lit-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lit-dev
Source: https://github.com/klh/speedy-claude/tree/main/skills/lit-dev
Command: npx skills add https://github.com/klh/speedy-claude --skill lit-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a standardized, production-ready workflow for creating Lit web components so teams avoid ad hoc setups, inconsistent APIs, and missing runtime validation or tests.

Core Features & Use Cases

  • Scaffolds component directories with barrel exports, TypeScript decorators, and scoped styles for reusable UI elements.
  • Integrates Zod schemas for runtime validation and type inference, ensuring component props and events are validated and well-typed.
  • Includes Playwright fixtures and test server configuration to run component-level end-to-end and interaction tests.
  • Suited for building design systems, shareable UI libraries, and isolated components that require strong typing, documentation, and CI-friendly tests.

Quick Start

Create a new Lit component using the provided template to scaffold a component with Zod validation and Playwright tests, then start the dev server to verify fixtures.

Frequently Asked Questions about lit-dev

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

FAQPage Schema
How do I scaffold Lit web components with TypeScript and runtime validation?▼

Scaffolding Lit web components with TypeScript and runtime validation generates component directories featuring TypeScript decorators, scoped styles, and Zod schemas to ensure component props and events are validated and well-typed.

How do I add Playwright tests to a Lit web component?▼

Adding Playwright tests to a Lit web component uses included Playwright fixtures and a test server configuration to run component-level end-to-end and interaction tests directly from the scaffolded directory.

Why use Zod schemas in a Lit web component design system?▼

Using Zod schemas in a Lit web component design system provides runtime validation and type inference, ensuring component props and events are strictly validated and well-typed for a reliable public API.

Can I build isolated UI elements with a type-safe public API using Lit?▼

Building isolated UI elements with a type-safe public API using Lit creates reusable components with TypeScript decorators and barrel exports, suited for shareable UI libraries requiring strong typing and documentation.

What is included when scaffolding a Lit component directory?▼

Scaffolding a Lit component directory includes barrel exports, runtime validators, Playwright fixtures, TypeScript configuration, lint rules, and a test server for verifying component fixtures.

Does this Lit component workflow require manual TypeScript configuration?▼

This Lit component workflow does not require manual TypeScript configuration, as scaffolding automatically generates TypeScript configuration, lint rules, and barrel exports to establish a standardized, production-ready setup.