LobeHub product design values, interaction principles, and execution checklists. Use whenever the work touches user-interface features or implementation to achieve better UX results.
Tasks
Before building a sidebar or master-detail list row, grep for the canonical primitive (e.g., NavItem, Accordion) and compose it instead of hand-rolling raw HTML elements with bespoke CSS.
When designing a data-viewing surface, verify that error states are checked before empty states, ensuring a failed fetch is never incorrectly rendered as an empty page.
Inputs
References to interaction behavior requirements for user-facing flows.
Component choices and styling decisions for UI elements.
Outputs
Validated user interface implementations that adhere to LobeHub design values.
Execution checklist reviews for Read, Edit, Act, Feedback, and Grow interaction modules.
Limitations and checks
This skill serves as an index for interaction behavior; it does not contain the design system token values, component inventory, or voice and content guidelines (which reside in DESIGN.md).
Does not cover the imperative modal wiring mechanics or component-level styling rules; those are covered by the modal and react skills respectively.
Empty / loading / error states are all explicitly designed; error is checked before the empty branch so a failed fetch does not render as empty.
Exactly one primary button exists per surface, and it is the visually dominant control when verified on the rendered screen.
In-progress input is backed up to durable storage and recovered after refresh or crash, with destructive exits warning the user instead of silently discarding data.