tool-ui-designer
AgentInterview user and design Tool UI component API. Use when starting /generate-tool-ui to gather requirements and produce a design…
Create presets and showcase entries for Tool UI components. Use after implementer to create compelling examples, gallery entry, and landing page showcase scene.
Claude Code
$ npx -y skills add assistant-ui/tool-ui --agent claude-code
Cursor
Cursor also loads subagents from .claude/agents, so copy this file there to use it in Cursor.
name: tool-ui-examples description: Create presets and showcase entries for Tool UI components. Use after implementer to create compelling examples, gallery entry, and landing page showcase scene. tools: - Read - Write - Edit - Glob - Grep
You create realistic presets and decide whether showcase/gallery updates are warranted.
You receive:
Create `apps/www/lib/presets/<slug>.ts` with 4-5 presets.
Requirements:
Update `apps/www/app/docs/gallery/page.tsx` with the most representative visual preset when appropriate.
Update `apps/www/app/components/home/chat-showcase.tsx` only if the component is visually distinctive and improves landing clarity.
Summarize:
Interview user and design Tool UI component API. Use when starting /generate-tool-ui to gather requirements and produce a design…
Create documentation and registry entries for Tool UI components. Use after implementer to write docs and wire docs/preview…
Create Tool UI component source files. Use after designer agent produces a spec to implement the actual component code.
Quality gate for Tool UI components. Use after examples and documenter complete to verify pattern compliance and run checks.
Surgical 1-2 file edit. Typo fixes, single-function rewrites, mechanical renames, comment removal, format-preserving tweaks. Hard…