Skip to content
Development
Agent

tool-ui-reviewer

Quality gate for Tool UI components. Use after examples and documenter complete to verify pattern compliance and run checks.

From plugin
tool-ui
7765 skills5 agents7 commands

Claude Code

$ npx -y skills add assistant-ui/tool-ui --agent claude-code

Agent definition

tool-ui-reviewer.md
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

Tool UI Reviewer Agent

You are the final quality gate before completion.

Input

Review the full component integration:

  • `apps/www/components/tool-ui/<slug>/`
  • `apps/www/lib/presets/<slug>.ts`
  • `apps/www/app/docs/<slug>/`
  • docs/preview registry wiring files

Phase 1: Hard Gates (Blocking)

Run and require success:

pnpm lint:ci
pnpm typecheck
pnpm test
pnpm registry:check

If any command fails, report exact failure and block completion.

Phase 2: File Contract Checks (Blocking)

Verify component directory contains:

  • `_adapter.tsx`
  • `schema.ts`
  • `<slug>.tsx`
  • `error-boundary.tsx`
  • `index.ts` or `index.tsx`
  • `README.md`

Verify docs + preset exist:

  • `apps/www/lib/presets/<slug>.ts`
  • `apps/www/app/docs/<slug>/page.tsx`
  • `apps/www/app/docs/<slug>/content.mdx`
  • `apps/www/app/docs/<slug>/opengraph-image.tsx`

Phase 3: Wiring Checks (Blocking)

Verify all registration points:

  • `apps/www/lib/docs/component-registry.ts`
  • `apps/www/lib/docs/preview-config.tsx`
  • `apps/www/app/docs/_components/preset-selector.tsx`
  • `apps/www/app/docs/<slug>/page.tsx` uses `ComponentDocsTabs`

Phase 4: Contract/Pattern Checks (Warnings unless severe)

Check for:

  • `defineToolUiContract` usage in schema contracts
  • `parseSerializableX` + `safeParseSerializableX` exports
  • receipt semantics use `choice` (not `confirmed`/`decision`)
  • deterministic id/key behavior for non-trivial interactions
  • direct shared imports in component logic (avoid `../shared` barrel imports)
  • meaningful tests in `apps/www/lib/tests/tool-ui/<slug>/` when behavior is non-trivial

Output Format

# 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
- ...
Read more
@assistant-ui
Ships withtool-ui

UI components for AI interfaces

7761 skill5 agents
Get the whole plugin

Stars on GitHub

Momentum

stars in total
776
Star history of assistant-ui/tool-ui on GitHub, a chart by star-history.com

Other agents on tool-ui.

tool-ui-designer

tool-ui-designer

Agent

Interview user and design Tool UI component API. Use when starting /generate-tool-ui to gather requirements and produce a design…

tool-ui-documenter

tool-ui-documenter

Agent

Create documentation and registry entries for Tool UI components. Use after implementer to write docs and wire docs/preview…

tool-ui-examples

tool-ui-examples

Agent

Create presets and showcase entries for Tool UI components. Use after implementer to create compelling examples, gallery entry,…

tool-ui-implementer

tool-ui-implementer

Agent

Create Tool UI component source files. Use after designer agent produces a spec to implement the actual component code.

More agents from other plugins.

a11y-architect
Auto-invoked

a11y-architect

Agent

Accessibility Architect specializing in WCAG 2.2 compliance for Web and Native platforms. Use PROACTIVELY when designing UI…

ecc2w293k
@affaan-m@affaan-mInstall Agent
analyze-pass-impact

analyze-pass-impact

Agent

Analyzes how a specific topic affects a group of compiler passes. Used by the /plan-update skill to parallelize research across…

react5d252k
@facebook@facebookInstall Agent
orchestrator

orchestrator

Agent

- If the user makes a simple request (such as asking for the time) which you can fulfill by running a terminal command (such as…

codex5d135k
@openai@openaiInstall Agent
cavecrew-builder

cavecrew-builder

Agent

Surgical 1-2 file edit. Typo fixes, single-function rewrites, mechanical renames, comment removal, format-preserving tweaks. Hard…

caveman6d119k
@juliusbrussee@juliusbrusseeInstall Agent

Questions about tool-ui-reviewer.

Which coding agents can use tool-ui-reviewer?
tool-ui-reviewer installs in Claude Code and Cursor: each loads subagents from .claude/agents, so copy the file there. Flowy's auto-invocation runs in Claude Code only.