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. Dense but scannable
Skill / UX

Dense but scannable

Favor compact surfaces that support repeated work without flattening hierarchy.

Goal

Fit operational agent workflows on screen while preserving scan paths, grouping, and clear affordances.

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

Checks

1Use concise labels, small status chips, and predictable alignment for repeated rows.
2Reserve large type and decorative space for actual page-level orientation.
3Group controls by workflow stage instead of visual novelty.

Avoid

1Card-heavy layouts where every small piece of information becomes a separate panel.
2Oversized headings or explanatory text inside compact tools and sidebars.

On this page

  • Checks
  • Avoid