Design and verify chat, copilot, assistant, streaming, citations, tool activity, attachments, multimodal input, conversation history, retry, stop, and accessible live-update behavior. Use this skill when frontend work includes conversational or generated-content interfaces.
Define a complete, trustworthy conversational experience rather than a message list plus text input.
When to invoke
"Design a professional chat or copilot interface."
"Implement streaming responses with stop, retry, and citations."
"Review assistant tool states, attachments, and errors."
"Make this chat accessible during live updates."
"Test conversation history, reconnect, and partial output."
Conversation contract
Read references/conversation-patterns.md. Define:
new, existing, loading, streaming, completed, stopped, failed, retried, edited, and deleted states as applicable;
composer empty, multiline, attachment, recording, disabled, offline, and sending states;
identity and semantics for user content, assistant output, tool results, quoted content, citations, and system status;
history, title, rename, archive, search, retention, and privacy behavior when in scope;
focus, keyboard, selection, copy, code, tables, links, and long-content behavior.
Streaming and tools
Read references/streaming-and-tool-states.md.
Expose pending, approval, running, partial, completed, failed, cancelled, retryable, and unavailable tool states when applicable. Preserve partial output and explain retry consequences after disconnects.
Do not execute, render, or trust generated HTML, links, files, citations, commands, or code blindly.
Accessibility and safety
Read references/chat-accessibility.md.
Keep focus stable as messages append or panels expand.
Announce meaningful changes without interrupting every streamed token.
Provide a non-streaming or reduced-update reading path when frequent updates create a barrier.
Preserve input after errors and make destructive history or retention actions confirmable.
Expose citations, code blocks, tables, attachments, and actions semantically.
Allow reading, selection, copying, and navigation while output streams.
Use assets/streaming-chat-review.md and assets/human-review-checklist.md.
Limits
Do not invent model capabilities, tool permissions, data-use policy, retention, citation truth, or privacy guarantees.
Do not present generated output as trusted or executable by default.
Do not use typing animation that blocks selection, reading, or accessibility.
Do not claim screen-reader or reconnect behavior without runtime evidence.
Conversation, composer, streaming, tool, citation, attachment, history, and failure states are covered when applicable.
Stop, cancel, retry, edit, reconnect, duplicate event, ordering, and partial-output behavior comes from evidence.
User, assistant, tool, quoted, cited, and system content remain distinguishable.
Focus, announcements, keyboard, reading, selection, code, tables, and reduced-update behavior are defined.
Generated and remote content is treated as untrusted.
The human review checklist has no unresolved blocked item.
1---2name: frontend-conversational-ui-23description: Design and verify chat, copilot, assistant, streaming, citations, tool activity, attachments, multimodal input, conversation history, retry, stop, and accessible live-update behavior. Use this skill when frontend work includes conversational or generated-content interfaces.4---56# Frontend conversational UI78Define a complete, trustworthy conversational experience rather than a message list plus text input.910## When to invoke1112- "Design a professional chat or copilot interface."13- "Implement streaming responses with stop, retry, and citations."14- "Review assistant tool states, attachments, and errors."15- "Make this chat accessible during live updates."16- "Test conversation history, reconnect, and partial output."1718## Conversation contract1920Read [references/conversation-patterns.md](references/conversation-patterns.md). Define:2122- new, existing, loading, streaming, completed, stopped, failed, retried, edited, and deleted states as applicable;23- composer empty, multiline, attachment, recording, disabled, offline, and sending states;24- identity and semantics for user content, assistant output, tool results, quoted content, citations, and system status;25- history, title, rename, archive, search, retention, and privacy behavior when in scope;26- focus, keyboard, selection, copy, code, tables, links, and long-content behavior.2728## Streaming and tools2930Read [references/streaming-and-tool-states.md](references/streaming-and-tool-states.md).3132Expose pending, approval, running, partial, completed, failed, cancelled, retryable, and unavailable tool states when applicable. Preserve partial output and explain retry consequences after disconnects.3334Do not execute, render, or trust generated HTML, links, files, citations, commands, or code blindly.3536## Accessibility and safety3738Read [references/chat-accessibility.md](references/chat-accessibility.md).3940- Keep focus stable as messages append or panels expand.41- Announce meaningful changes without interrupting every streamed token.42- Provide a non-streaming or reduced-update reading path when frequent updates create a barrier.43- Preserve input after errors and make destructive history or retention actions confirmable.44- Expose citations, code blocks, tables, attachments, and actions semantically.45- Allow reading, selection, copying, and navigation while output streams.4647Use [assets/streaming-chat-review.md](assets/streaming-chat-review.md) and [assets/human-review-checklist.md](assets/human-review-checklist.md).4849## Limits5051- Do not invent model capabilities, tool permissions, data-use policy, retention, citation truth, or privacy guarantees.52- Do not present generated output as trusted or executable by default.53- Do not use typing animation that blocks selection, reading, or accessibility.54- Do not claim screen-reader or reconnect behavior without runtime evidence.5556## Output template5758```markdown59## Conversational UI result60**Status:** ready | needs revision | blocked6162### State model63| Actor/component | State | Trigger | Visible behavior | Recovery |64| --- | --- | --- | --- | --- |6566### Trust and accessibility67| Boundary | Treatment | Evidence required |68| --- | --- | --- |6970### Runtime scenarios71| Scenario | Expected behavior | Result/evidence |72| --- | --- | --- |73```7475## Quality gate7677- [ ] Conversation, composer, streaming, tool, citation, attachment, history, and failure states are covered when applicable.78- [ ] Stop, cancel, retry, edit, reconnect, duplicate event, ordering, and partial-output behavior comes from evidence.79- [ ] User, assistant, tool, quoted, cited, and system content remain distinguishable.80- [ ] Focus, announcements, keyboard, reading, selection, code, tables, and reduced-update behavior are defined.81- [ ] Generated and remote content is treated as untrusted.82- [ ] The human review checklist has no unresolved blocked item.
Run npx skillmds@latest add paulasilvatech/frontend-conversational-ui-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Design and verify chat, copilot, assistant, streaming, citations, tool activity, attachments, multimodal input, conversation history, retry, stop, and accessible live-update behavior. Use this skill when frontend work includes conversational or generated-content interfaces. It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
paulasilvatech (@paulasilvatech) published this skill. Their other Agent Skills are listed on their SkillMD profile.