agent-chat-ui
Installation
SKILL.md
Agent chat UI
An agent's answer is not a message; it is work happening. The interface has three jobs: show what the agent is doing right now in one calm line, leave a readable record of what it did, and put every decision that is the user's (approve, revise, pick, add) in their hands with the exact consequence in view. Everything else is the polish that makes waiting feel short.
| The job | Read |
|---|---|
| The answer while it runs and after: the status line, work rows, the folded log, sources, plan, approval cards, questions, follow-ups, errors and retries | WORK.md |
| Text that streams smoothly, safe markdown, links and source chips, direction, scrolling and the space under the latest exchange | STREAMING.md |
| Tool results as the product's own components, live data, caps, the conversation list, title, menu, search and side panel | RESULTS-AND-CONVERSATIONS.md |
| The composer: the empty state, cycling placeholder, suggestions, files, dictation with a live waveform, the queue of messages sent while the agent works | COMPOSER.md |
| Every timing, curve and size in one table | MOTION.md |
| The server side the UI depends on (stop hooks, approvals, follow-up call, data parts) | the agent-harness skill |
| General animation rules (durations, springs, reduced motion) | the ui-animation skill |
| The rest of the app's components (menus, dialogs, tables, states) | the app-ui skill |
| Marketing pages and their motion | the landing-page-ui skill |
| The production source of every piece above, to copy as is | reference/REFERENCE.md |
To build it exactly, copy from reference/ rather than writing it from the description.