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
  3. Provenance without noise
Skill / UX

Provenance without noise

Surface source, runtime, and ownership cues only where they help the user trust or act.

Goal

Make agent UI explain where output came from without turning every row into a diagnostics panel.

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

Checks

1Use compact badges, muted labels, or hover details for source and runtime metadata.
2Put high-confidence primary content first; keep provenance adjacent but secondary.
3Escalate provenance visually only when it changes what the user should do next.

Avoid

1Large always-visible panels for metadata that is only occasionally useful.
2Hiding critical source or ownership details behind a generic info icon.

On this page

  • Checks
  • Avoid