Refined UI

An opinionated, customizable superset of shadcn/ui

AgentsPrimitivesSkillsSkins
Guides
  • Overview
  • Get started
  • Shadcn compatibility
  • Architecture
  • Agent surface
CSS-first
  • CSS-first interactivity
  • CSS-first motion & sizing
React code quality
  • Derive, do not duplicate
  • Remount state boundaries
  • One responsibility per file
  • Real stack tests
UI / Tailwind
  • Use existing components first
  • Token discipline
  • Class Name boundaries
  • Tailwind v4 CSS configuration
  • Tailwind v4 migration syntax
  • Generated utilities before arbitrary values
  • Variant-first styling
  • Tailwind v4 capabilities
  • Tailwind v4 behavior & motion
UX
  • State continuity
  • Provenance without noise
  • Dense but scannable
  • Say it once
Refined UI registry
  • Skin authoring
  • Extension authoring
  • Registry-first DX
  • Skin completeness
  • Refined UI composition
  • Runtime-agnostic UI
  • Compound components DX
  • Context vs props
  1. Skills
  2. State continuity
Skill / UX

State continuity

Show loading, empty, partial, success, and failure states in the same product language.

Goal

Make each state feel like the same workflow instead of a bolt-on fallback.

Interaction and information-design checks for agent-facing product surfaces.

Checks

1Name the user action available in each state, especially empty and error states.
2Keep layout dimensions stable between loading, loaded, and empty states.
3Use progressive disclosure for diagnostics so the primary next step stays clear.

Avoid

1Generic empty states that describe the app instead of moving the workflow forward.
2Spinners or skeletons that resize the page when real content arrives.

On this page

  • Checks
  • Avoid