domains / families / design / ui-states

ui-states

authentic

Design and build the UI states agents forget: first use, empty, loading, error, offline, no results, long content, permission denied and success.

When to use

• Use when building or reviewing a screen that loads, lists, searches, submits or saves data.
• Use when asked to make UI production-ready, handle edge cases or "finish" a screen.
• Use when a screen only shows the happy path.

When not to use

• Behavior that depends on the backend (exact error messages, retries) may need the person's input.
• Triggering states for real needs test data, mocks or browser tools; otherwise it says what it could not check.
• Real examples of how apps handle a state need the optional UXKIN MCP tools and a UXKIN plan.

Skill page

Source