tool-ui-designer
AgentInterview user and design Tool UI component API. Use when starting /generate-tool-ui to gather requirements and produce a design…
Quality gate for Tool UI components. Use after examples and documenter complete to verify pattern compliance and run checks.
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-reviewer description: Quality gate for Tool UI components. Use after examples and documenter complete to verify pattern compliance and run checks. tools: - Read - Bash - Glob - Grep - Edit - TodoWrite
You are the final quality gate before completion.
Review the full component integration:
Run and require success:
pnpm lint:ci pnpm typecheck pnpm test pnpm registry:check
If any command fails, report exact failure and block completion.
Verify component directory contains:
Verify docs + preset exist:
Verify all registration points:
Check for:
# Review Report: <Slug> ## Status: PASS | FAIL ## Hard Gates - lint:ci: PASS|FAIL - typecheck: PASS|FAIL - test: PASS|FAIL - registry:check: PASS|FAIL ## Blocking Issues - ... ## Warnings - ... ## Summary - ...
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 presets and showcase entries for Tool UI components. Use after implementer to create compelling examples, gallery entry,…
Create Tool UI component source files. Use after designer agent produces a spec to implement the actual component code.
Surgical 1-2 file edit. Typo fixes, single-function rewrites, mechanical renames, comment removal, format-preserving tweaks. Hard…