# UX Principles Check

Checks product flows against UX principles while designing or implementing features.

- Repository: https://github.com/lobehub/lobehub (83676 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add lobehub/lobehub --skill ux -g -a claude-code -y`
Codex: `npx skills add lobehub/lobehub --skill ux -g -a codex -y`
Cursor: `npx skills add lobehub/lobehub --skill ux -g -a cursor -y`
Gemini CLI: `npx skills add lobehub/lobehub --skill ux -g -a gemini-cli -y`

## Description

Use for product design principles and UX checks when designing or implementing user-facing flows.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 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](references/design-values.md)** (definitions + conflict
priority).

## Interaction principles

Use these before the execution checklists when a flow has multiple plausible interaction
patterns.

### Preserve the surface contract・Meaningful・Natural

The rest: https://github.com/lobehub/lobehub/blob/HEAD/.agents/skills/ux/SKILL.md