idiomatic-ts-lit

Guide idiomatic TypeScript and Lit patterns for Breadboard Visual Editor components.

409|75|Updated Dec 12, 2023
One-click install
npx skills add https://github.com/breadboard-ai/breadboard --skill idiomatic-ts-lit
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: idiomatic-ts-lit
Source: https://github.com/breadboard-ai/breadboard/tree/main/.agent/skills/idiomatic-ts-lit
Command: npx skills add https://github.com/breadboard-ai/breadboard --skill idiomatic-ts-lit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Writing idiomatic TypeScript and Lit in Breadboard can be hard, leading to inconsistent patterns and brittle components.

Core Features & Use Cases

  • Living reference for idiomatic TypeScript and Lit patterns
  • Guides on type safety, import hygiene, and component design
  • Real-world usage within the Breadboard Visual Editor for maintainable UI

Quick Start

Read the Type Safety and Import Hygiene sections, then apply the idiomatic TypeScript + Lit patterns to a new component.

Frequently Asked Questions about idiomatic-ts-lit

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

FAQPage Schema
What is the best way to write type-safe Lit components in TypeScript?

Type-safe Lit components require static styles, property decorators for external inputs, internal state for private properties, and a typed StateEvent bus to ensure maintainable front-end code patterns.

How do I handle events in Lit with TypeScript type safety?

Type-safe event handling in Lit uses a typed StateEvent bus to standardize event communication, ensuring predictable component design and scalable UI component interactions across Breadboard projects.

When should I use property decorators vs internal state in Lit?

Use property decorators for external component inputs and internal state for private component properties to maintain strict type safety and predictable component design in Lit.

Does this idiomatic TypeScript and Lit pattern work with the Breadboard Visual Editor?

Yes, these idiomatic TypeScript and Lit patterns apply to Breadboard Visual Editor projects, guiding type-safe event handling, import hygiene, and reusable UI components for maintainable front-end code.

How do I maintain import hygiene in TypeScript Lit projects?

Import hygiene in TypeScript Lit projects relies on living reference patterns that enforce strict type safety and consistent import structures, preventing inconsistent patterns and brittle components.