ux
LobeHub product design values / principles / checklists. Use whenever the work touches user-interface features or implementation — designing or building any user-facing flow — to get better UX results.
Profile →npx skills add lobehub/lobehub --skill ux --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# UX — Design Values & Execution Checklists How LobeHub products should feel, and concrete rules to get there. Use this when **building or reviewing** any user-facing flow. This file is the **index**: the design values and interaction principles below are the conceptual layer; the execution checklists live in per-module reference files (see **Checklist modules**). Each checklist item is tagged with the design value(s) it serves. ## What lives where: DESIGN.md vs this skill Two documents, two jobs — don't duplicate; cross-reference. - **[`DESIGN.md`](../../../DESIGN.md)** — the design **system**: what the product looks and sounds like. Themeable tokens (color, typography, elevation, radius), the component inventory, and Voice & Content (wording, tone). Reach for it when you need a token value, a component, or copy tone. - **this `ux` skill** — interaction **behavior**: how a flow should behave over time. Empty / loading / error states, lists at scale, selection visibility, pickers, number formatting, draft safety, action flow & momentum, button hierarchy, entity lifecycle, capability guardrails, progressive disclosure. Rule of thumb: **static look & wording → DESIGN.md; dynamic beha
- What lives where: DESIGN.md vs this skill
- Design values
- Interaction principles
- Preserve the surface contract・Meaningful・Natural
- Consistency is semantic, not mechanical・Certainty・Meaningful
- Layout communicates role・Natural・Certainty
- Compose the canonical surface component, don't re-derive it・Certainty・Natural
- Checklist modules
- Quick review checklist
- Related skills
What does the ux skill do?
LobeHub product design values / principles / checklists. Use whenever the work touches user-interface features or implementation — designing or building any user-facing flow — to get better UX results.
How do I install it?
Run `npx skills add lobehub/lobehub --skill ux --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From lobehub/lobehub, a repository with 81,252 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.