Agent-UI-Design

Design patterns for chat interfaces, agent UX, streaming UI, and tool visualization. Based on 21st.dev Agents SDK and award-winning agent products.

Scope

Use this skill when:

• You are designing a chat interface for an AI application
• You need to visually represent agent tool calls
• You are implementing streaming rendering for real-time text output
• You are visualizing sandbox states and execution environments
• You are designing a three-panel layout for agent dashboards

Principles

1. Agent-Ready Design

Components must natively support streaming content, tool calls, and asynchronous state transitions. Chat UIs are a core pattern, not an add-on.