lit-ui-designerlisted

# Lit UI Designer Use this skill to create or improve Lit web component interfaces that feel professional, accessible, robust, and production-ready. ## Workflow 1. **Inspect before inventing.** Read the existing component, styles, tokens, tests/stories, screenshots, and surrounding UX. Preserve repo conventions unless they are clearly broken. 2. **Define the UX contract.** Identify primary user goal, component states, keyboard/mouse/touch behavior, responsive behavior, empty/loading/error/disabled states, and integration boundaries. 3. **Choose native semantics first.** Prefer real HTML controls (`button`, `a`, `input`, `dialog`, headings, lists, tables) before ARIA. Add ARIA only when native semantics cannot express the pattern. 4. **Implement Lit idiomatically.** Keep public properties as external API, private `@state` for internals, declarative `render()`, `classMap`/`styleMap` when helpful, and custom events for user-driven state changes. 5. **Design with craft.** Use clear hierarchy, spacing rhythm, restrained color, meaningful motion, strong focus states, and polished empty/error states. Avoid generic “AI dashboard” slop. 6. **Verify.** Run the smallest meaningful gates: typecheck/test/build, accessibility checks if present, and browser/screenshot review for meaningful visual work. ## Lit implementation standards - Use TypeScript and decorators when the repo already uses them; otherwise follow local Lit style. - Keep reactive public props as inputs. Do not silently