| name | lit-ui-designer |
| description | Inspect existing components and conventions first, define the UX contract, then implement idiomatic Lit with native semantics, polished states, and verified accessibility. |
Lit UI Designer
Inspect existing components and conventions first, define the UX contract, then implement idiomatic Lit with native semantics, polished states, and verified accessibility.
Use When
- Build a Lit custom element with public props as API, private @state internals, and composed bubbling events
- Review a component for blocking accessibility, web-component architecture, and visual craft issues in priority order
- Design loading, empty, error, disabled, and focus states with CSS custom properties for theming
Guardrails
- Prefer native HTML semantics before ARIA, and follow WAI-ARIA APG exactly when a complex widget needs roles
- Avoid dynamic style blocks and unsafeCSS unless the value is fully trusted with no safer token option
- Target WCAG 2.2 AA: visible focus indicators, accessible names for icon-only controls, and prefers-reduced-motion support
Default Flow
- Confirm the user intent and whether the action is read-only or state-changing.
- Use the narrowest available tool scope and collect only the context needed for the task.
- For state-changing or external actions, stop for explicit approval before acting.
- Summarize what changed or what was learned, including relevant object IDs or links.
