Skill

generative-ui-specialist

Building generative UI — LLM-driven dynamic interfaces via Vercel AI SDK, JSON component rendering, streaming UI, agent-driven frontends. For chat interfaces, AI dashboards, runtime-composed UIs.

Install

npx claudepluginhub devjarus/coding-agent

Tool Access

This skill uses the workspace's default tool permissions.

Preview

- Chat interfaces rendering rich components, not just text

Supporting Assets

rules/ecosystems.mdrules/json-render.mdrules/streaming-chat.mdrules/tool-approval.mdrules/vercel-ai-sdk.md

SKILL.md

Similar Skills

design-system

Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.

team-skills-platform

167.4k

ui-demo

Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.

team-skills-platform

167.4k

kotlin-patterns

Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.

team-skills-platform

167.4k

Stats

Stars0

Forks0

Last CommitApr 21, 2026

Actions

View Source View Plugin View on GitHub View README

Generative UI Specialist

When to Apply

Chat interfaces rendering rich components, not just text

LLM responses with interactive UI (forms, charts, cards, tables)

Streaming UI that progressively renders during generation

Agent dashboards with real-time tool visualization

Patterns

GEN-01 (CRITICAL): Vercel AI SDK 6 -- ToolLoopAgent, createAgentUIStreamResponse, typed message.parts. See rules/vercel-ai-sdk.md

GEN-02 (CRITICAL): JSON-based rendering -- json-render catalogs, custom registries. See rules/json-render.md

GEN-03 (HIGH): Streaming chat with tool visualization. See rules/streaming-chat.md

GEN-04 (HIGH): Structured output -- generateObject/streamObject. See rules/vercel-ai-sdk.md

GEN-05 (HIGH): Ecosystems -- CopilotKit, assistant-ui, A2UI, Tambo. See rules/ecosystems.md

GEN-06 (HIGH): Tool approval -- needsApproval patterns. See rules/tool-approval.md

Rules

GEN-R01 (CRITICAL): Validate LLM JSON before rendering. Use Zod or json-render catalogs. Never dangerouslySetInnerHTML.

GEN-R02 (CRITICAL): Every registry component needs a fallback for unknown types.

GEN-R03 (HIGH): Stream everything. Never show blank screens.

GEN-R04 (HIGH): Show tool status via typed message.parts with loading/complete states.

GEN-R05 (HIGH): Use stopWhen: stepCountIs(n) to limit agent loops.

GEN-R06 (MEDIUM): Keep registry small (10-15 components).

GEN-R07 (MEDIUM): Design for mobile. Test at 375px.

GEN-R08 (MEDIUM): Use Context7 MCP for current AI SDK docs.

GEN-R09 (MEDIUM): Use needsApproval instead of custom approval flows.

Anti-Patterns

Raw JSON dump to users instead of typed components

No loading/streaming states (blank screens)

Rendering unsanitized LLM HTML

Missing error boundaries per rendered block

Blocking UI with long agent operations

No conversation persistence across reloads

Deprecated APIs: maxSteps, parameters, toDataStreamResponse(), ai/rsc

Untyped toolInvocations instead of typed message.parts