frontend-uilisted

# frontend-ui Use this skill for UI components, forms, layouts, interaction behavior, responsive design, and accessibility. ## Principles Keep UI state explicit. Separate presentation from unrelated business or persistence logic where practical. Forms should provide: - clear labels - validation feedback - useful error states - loading/submission state - accessible interaction Consider: - keyboard usage - focus management - semantic structure - screen readers - responsive layouts - empty states - loading states - error states Avoid unnecessary rendering or state duplication. Preserve user input where practical when recoverable errors occur. Use the project's existing design system and component conventions. ### Browser-Driven UI Inspection When the task involves visual UI work and a browser-capable tool is available, inspect the real rendered interface instead of relying only on source files. Useful browser-capable tools may include: - host browser tools - browser MCP tools - Playwright or Playwright MCP - agent-browser - compatible external browser or UI inspection skills Do not hardcode a single browser tool as mandatory. Use the best available tool for the host and project. If no browser-capable tool or runnable app is available, state that limitation and avoid claiming visual or runtime parity. Inspect relevant: - rendered layout and visual hierarchy - DOM structure - accessibility tree or semantic structure - typography - spacing - color usage - compone