Skip to content
Development
Agent

tool-ui-examples

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

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-examples.md
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

Tool UI Examples Agent

You create realistic presets and decide whether showcase/gallery updates are warranted.

Input

You receive:

  • component slug
  • implemented component files
  • serializable schema/types

Tasks

1. Create Presets

Create `apps/www/lib/presets/<slug>.ts` with 4-5 presets.

Requirements:

  • use believable, specific scenarios
  • keep presets clearly distinct
  • include at least one receipt preset when component supports receipt flow (`choice`)
  • include `generateExampleCode` for each preset
  • use stable descriptive ids (`<slug>-<preset-key>`)

2. Gallery Entry

Update `apps/www/app/docs/gallery/page.tsx` with the most representative visual preset when appropriate.

3. Landing Showcase (Optional)

Update `apps/www/app/components/home/chat-showcase.tsx` only if the component is visually distinctive and improves landing clarity.

Preset Quality Bar

  • no placeholder names (`Item 1`, `Category A`, etc.)
  • no synthetic demo copy that feels fake
  • scenario stakes should match the UI pattern
  • example data should look like real user/app output

Output

Summarize:

  • preset keys added
  • gallery changes
  • showcase changes (or why skipped)
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-implementer

tool-ui-implementer

Agent

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

tool-ui-reviewer

tool-ui-reviewer

Agent

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

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…

ecc12d293k
@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…

react1d252k
@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…

codex1d135k
@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…

caveman2d119k
@juliusbrussee@juliusbrusseeInstall Agent

Questions about tool-ui-examples.

Which coding agents can use tool-ui-examples?
tool-ui-examples 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.