UX Principles Check
Checks product flows against UX principles while designing or implementing features.
Install
npx skills add lobehub/lobehub --skill ux -g -a claude-code -y- Repository
- lobehub/lobehub83.7k
- Category
- Design
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 2,674 tokens
- Runs scripts
- No, instructions only
What it does
Use for product design principles and UX checks when designing or implementing user-facing flows.
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, 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
uxskill, 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 behavior → this skill. For component/styling choices see react; for imperative modal wiring see modal.
Design values
LobeHub follows four product design values, Natural・Meaningful・Certainty・Growth. Read them before designing: references/design-values.md (definitions + conflict priority).
Interaction principles
Use these before the execution checklists when a flow has multiple plausible interaction patterns.
