Build Lit web components with TypeScript decorators, Zod validation, and Playwright testing.
npx skills add https://github.com/klh/skills --skill klh-lit-dev-klh
Please help me install this Agent Skill. Skill: klh-lit-dev Source: https://github.com/klh/skills/tree/main/.well-known/agent-skills/klh-lit-dev Command: npx skills add https://github.com/klh/skills --skill klh-lit-dev-klh
High-intent search queries and answers about installing and using this skill.
Extend LitElement, register the element with @customElement, and declare reactive properties with @property and internal state with @state. Enable experimentalDecorators and set useDefineForClassFields to false in tsconfig.
Serve static HTML fixtures via http-server on port 8080, then write Playwright tests that navigate to the fixture page and assert on attributes, shadow DOM content, and dispatched custom events.
Zod schemas define and validate component props at runtime while inferring TypeScript types via z.infer. This keeps a single source of truth for both validation logic and type definitions.
Custom events dispatched from shadow DOM need both bubbles: true and composed: true to escape the shadow boundary and propagate to ancestor listeners outside the component.
Use repeat with unique keys when list items reorder, since it preserves DOM identity and avoids full re-renders. Use plain map for simple static lists where diffing is unnecessary.
AmakaflowConfigure and optimize monorepos using Turborepo, Nx, and pnpm workspaces.
maurodf0Wrap Flutter widgets into WebF custom elements for React, Vue, or vanilla JS.
lips85Provide reusable UI components and design tokens for consistent interfaces.
JuanDiego30Design reusable UI components with consistent APIs across React, Vue, and Svelte.
