ux

Review user-facing flows against product design values and interaction checklists.

Updated Jan 27, 2026
One-click install
npx skills add https://github.com/SmallAi-API/smaihub --skill ux-smallai-api
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ux
Source: https://github.com/SmallAi-API/smaihub/tree/main/.agents/skills/ux
Command: npx skills add https://github.com/SmallAi-API/smaihub --skill ux-smallai-api

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Designing and reviewing user-facing flows often misses recurring interaction failures: permanent loading skeletons, lost drafts, silent optimistic-mutation failures, and dead-end success screens. This Skill provides LobeHub's design values and per-module execution checklists so those gaps are caught systematically when building or reviewing any UI surface. ## Core Features & Use Cases - Design values & interaction principles: Four product design values (Natural, Meaningful, Certainty, Growth) plus principles like preserving the surface contract and composing canonical components. - Five checklist modules: Read (data states, lists at scale, pickers, number formatting), Edit (draft protection), Act (flow momentum, button hierarchy, entity lifecycle, secrets), Feedback (loading visuals, failure paths, capability guardrails), and Grow (progressive disclosure, multi-step flows). - Use Case: When implementing a paginated list with search, use the Read module to verify error states render before empty states, search queries the full dataset server-side, and selections scroll into view. ## Quick Start Use the ux skill to review this new settings page flow for missing empty, loading, and error states.

Frequently Asked Questions about ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review a UI flow for UX issues?

Walk the quick review checklist grouped by interaction type: Read for data views, Edit for input surfaces, Act for operations and buttons, Feedback for loading states, and Grow for discoverability. Each item links to a reference module with full requirements and examples.

What UX checks apply to paginated lists with search?

Search, filters, sort, counts, and bulk actions must all query the full dataset server-side, not just loaded pages. Error states must render before empty states, and restored selections should scroll into view once their rows exist.

How should loading and error states be designed in React?

Use project loaders or skeletons matched to the measured layout instead of antd Spin. Every loading state needs a terminal failure path with retry, and init flags must not be gated on success-only fetches, which cause permanent skeletons.

When should a destructive action require extra confirmation?

Unrecoverable or wide-blast actions like clearing all data or deleting an account require a deliberate gesture such as type-to-confirm, not a one-click danger button. The operation must also report partial failures rather than silently half-completing.

What is the difference between DESIGN.md and this UX skill?

DESIGN.md covers the static design system: theme tokens, components, and voice. The ux skill covers dynamic interaction behavior over time, such as state handling, flow momentum, and draft safety. Static look goes to DESIGN.md; behavior goes to this skill.