devjarus/assistant-chat-ui
skills/frontend/assistant-chat-ui/SKILL.md
Patterns for AI assistant UIs — chat, tool rendering, rich components. Uses assistant-ui + Vercel AI SDK + json-render + shadcn + TanStack Query. For chat interfaces, agent dashboards, conversational UIs.
tools
Updated Apr 25, 2026
$ install --global
skillsauthnpx skillsauth add devjarus/coding-agent assistant-chat-uiInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 25, 2026, 7:35 PM120.7s3 files scanned
SKILL.md
- name:
- assistant-chat-ui
- description:
- Patterns for AI assistant UIs — chat, tool rendering, rich components. Uses assistant-ui + Vercel AI SDK + json-render + shadcn + TanStack Query. For chat interfaces, agent dashboards, conversational UIs.
Assistant Chat UI
When to Apply
- Building a chat-based AI assistant or agent interface
- Rendering tool call results as rich UI components (not raw JSON)
- Streaming LLM responses with real-time tool execution visualization
- Building thread management (multiple conversations)
- Adding file attachments, markdown rendering, or code highlighting to chat
Core Stack
@assistant-ui/react -- Chat UI primitives (Thread, messages, composer)
@assistant-ui/react-ai-sdk -- Bridges assistant-ui with Vercel AI SDK
@assistant-ui/react-markdown -- Markdown rendering in chat messages
ai -- Vercel AI SDK (streaming, transport)
@ai-sdk/react -- React hooks (useChat)
@json-render/react -- JSON-to-component rendering for structured output
@json-render/shadcn -- Pre-built shadcn components for json-render
@tanstack/react-query -- Server state for threads, settings, side panels
shadcn/ui -- Component library (cards, buttons, dialogs)
Rules
CRITICAL (rules/runtime-and-tools.md)
- CHAT-01: Runtime provider setup -- bridge Vercel AI SDK
useChatwithAssistantRuntimeProvider - CHAT-02: Every tool must have a registered UI via
makeAssistantToolUI; show loading/complete/error states
HIGH (rules/threads-and-features.md)
- CHAT-03: Thread management with TanStack Query; invalidate caches after streaming completes
- CHAT-04: File attachments via
CompositeAttachmentAdapter(PDFs, images) - CHAT-05: Structured output rendering with
@json-render/react+ shadcn catalog - CHAT-06: Standard app layout: sidebar + runtime provider + thread + optional right panel
Rules Summary
- CHAT-R01 (CRITICAL): Every tool must have a registered UI -- unregistered tools render as raw JSON
- CHAT-R02 (CRITICAL): Show loading states for running tools
- CHAT-R03 (HIGH): Use
prepareSendMessagesRequestto send only the last message when server has history - CHAT-R04 (HIGH): Classify errors in
onError-- network, auth, model, timeout - CHAT-R05 (HIGH): Invalidate TanStack Query caches after streaming completes
- CHAT-R06 (MEDIUM): Support file attachments via
CompositeAttachmentAdapter
Anti-Patterns
- No tool UIs -- raw JSON dumped in the chat
- Full message re-send every turn when server has history
- No error classification -- showing raw error strings to users
- Polling for updates instead of TanStack Query invalidation
- Monolithic chat component -- split into RuntimeProvider, Thread, ToolUIs, Sidebar
Related Skills
devjarus/deep-research
testing
VerifiedTrustedCommunity
Multi-source research method — decompose a question, fan out parallel investigators, interleaved-think each result, verify claims adversarially, synthesize a cited answer. Use for breadth-heavy research, stack comparisons, "which approach wins" questions.
SKILL.mdUpdated May 30, 2026
devjarus/test-doubles-strategy
testing
VerifiedTrustedCommunity
Decide when to use unit vs integration vs e2e tests, and when to mock vs use the real thing per dependency. Dependency injection is the enabler — without it you end up monkey-patching imports. Apply when writing tests of any kind.
SKILL.mdUpdated Apr 25, 2026
devjarus/tdd
development
VerifiedTrustedCommunity
Test-driven development process — write failing test, implement to pass, refactor. Use when implementing any feature or fixing bugs.
SKILL.mdUpdated Apr 25, 2026
devjarus/shared-contracts
development
VerifiedTrustedCommunity
Patterns for sharing types, API contracts, and validation schemas between frontend and backend. Use when multiple domains consume the same data shapes to prevent contract drift.
SKILL.mdUpdated Apr 25, 2026