tool-ui-designer
Interview user and design Tool UI component API. Use when starting /generate-tool-ui to gather requirements and produce a design specification.
Quality gate for Tool UI components. Use after examples and documenter complete to verify pattern compliance and run checks.
$ npx -y skills add assistant-ui/tool-ui --agent claude-codeHow it fires
How this agent gets triggered: by you, by Claude, or both.
Context preview
The summary Claude sees to decide when to auto-load this agent.
Quality gate for Tool UI components. Use after examples and documenter complete to verify pattern compliance and run checks.
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 - ...
Repo: assistant-ui/tool-ui
Interview user and design Tool UI component API. Use when starting /generate-tool-ui to gather requirements and produce a design specification.
Create documentation and registry entries for Tool UI components. Use after implementer to write docs and wire docs/preview registries.
Create presets and showcase entries for Tool UI components. Use after implementer to create compelling examples, gallery entry, and landing page showcase scene.
Create Tool UI component source files. Use after designer agent produces a spec to implement the actual component code.