agent-ui-design

Community

Agent chat UIs and streaming UX design.

Authorflitzrrr
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Designers and engineers building AI chat agents need proven patterns for streaming messages, tool execution visualization, and multi-panel layouts to deliver transparent, responsive user experiences.

Core Features & Use Cases

  • Streaming chat messages with real-time rendering and a visible cursor
  • Embedded tool-call cards with collapsible parameters and formatted results
  • Three-panel layout (threads, chat, context) with progressive disclosure of sandbox state
  • Sandbox UI states and visual indicators for Created, Active, Executing, and Completed

Quick Start

Create a chat UI prototype that supports streaming messages, tool-calls visualization, and a three-panel layout.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: agent-ui-design
Download link: https://github.com/flitzrrr/frontend-design-skills/archive/main.zip#agent-ui-design

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.