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.