/tool-ui
Find, install, configure, and integrate Tool UI components in React apps using shadcn registry entries, compatibility checks, scaffolded runtime wiring, toolkit setup with assistant-ui, and troubleshooting workflows. Use when developers ask to add one or more Tool UI components,
$ npx -y skills add assistant-ui/tool-ui --skill tool-ui --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/tool-ui
Context preview
The summary Claude sees to decide when to auto-load this skill.
Find, install, configure, and integrate Tool UI components in React apps using shadcn registry entries, compatibility checks, scaffolded runtime wiring, toolkit setup with assistant-ui, and troubleshooting workflows. Use when developers ask to add one or more Tool UI components,
SKILL.md
tool-ui.SKILL.mdname: tool-ui
description: Find, install, configure, and integrate Tool UI components in React apps using shadcn registry entries, compatibility checks, scaffolded runtime wiring, toolkit setup with assistant-ui, and troubleshooting workflows. Use when developers ask to add one or more Tool UI components, choose components for a use case, verify compatibility, wire a toolkit in a codebase, or integrate Tool UI payloads into assistant-ui or an existing chat/runtime stack.
Tool UI
Use this skill to move from request to working Tool UI integration quickly.
Prefer assistant-ui when the project has no existing chat UI/runtime. Treat assistant-ui as optional when the app already has a working runtime.
Step 1: Compatibility and Doctor
Read `components.json` in the user's project and verify:
- `components.json` exists.
Step 2: Install Components
Install command from project root
**Preferred (AI-assisted integration):**
npx tool-agent "integrate the <component> component"
Use component-specific prompts from the catalog below (e.g. `integrate the plan component for step-by-step task workflows with status tracking`).
**Alternative (direct registry):**
npx shadcn@latest add @tool-ui/<component-id>
Multiple components:
npx tool-agent "integrate the plan, progress-tracker, and approval-card components for planning flows"
Or via shadcn:
npx shadcn@latest add @tool-ui/plan @tool-ui/progress-tracker @tool-ui/approval-card
Complete component catalog
All 25 Tool UI components with tool-agent prompts and shadcn install commands:
**Progress**
| Component | Description | tool-agent prompt | shadcn | | ------------------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------- | | `plan` | Step-by-step task workflows with status tracking | `integrate the plan component for step-by-step task workflows with status tracking` | `npx shadcn@latest add @tool-ui/plan` | | `progress-tracker` | Real-time status feedback for multi-step operations | `integrate the progress tracker component for real-time status feedback on multi-step operations` | `npx shadcn@latest add @tool-ui/progress-tracker` |
**Input**
| Component | Description | tool-agent prompt | shadcn | | ------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------- | | `option-list` | Let users select from multiple choices | `integrate the option list component to let users select from multiple choices` | `npx shadcn@latest add @tool-ui/option-list` | | `parameter-slider` | Numeric parameter adjustment controls | `integrate the parameter slider component for numeric parameter adjustment controls` | `npx shadcn@latest add @tool-ui/parameter-slider` | | `preferences-panel` | Compact settings panel for user preferences | `integrate the preferences panel component for compact user settings` | `npx shadcn@latest add @tool-ui/preferences-panel` | | `question-flow` | Multi-step guided questions with branching | `integrate the question flow component for multi-step guided questions with branching` | `npx shadcn@latest add @tool-ui/question-flow` |
**Display**
| Component | Description | tool-agent prompt | shadcn | | ---------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------ | ----------------------------------------------- | | `citation` | Display source references with attribution | `integrate the citation component to display source references with attribution` | `npx shadcn@latest add @tool-ui/citation` | | `item-carousel` | Horizontal carousel for browsing collections | `integrate the item carousel component for horizontal browsing of collections` | `npx shadcn@latest add @tool-ui/item-carousel` | | `link-preview` | Rich link previews with Open Graph data | `integrate the link preview component for rich link previews with Open Graph data` | `npx shadcn@latest add @tool-ui/link-preview` | | `stats-display` | Key metrics and KPIs in a visual grid | `integrate the stats display component for key metrics and KPIs in a visual grid` | `npx shadcn@latest add @tool-ui/stats-display` | | `terminal` | Show command-line output and logs | `integrate the terminal component to show command-line output and logs` | `npx shadcn@latest add @tool-ui/terminal` | | `weather-widget` | Weather display with forecasts and conditions | `integrate the weather widget component for weather display with forecasts and conditions` | `npx shadcn@latest add @tool-ui/weather-widget` |
**Artifacts**
| Component | Description | tool-agent prompt | shadcn | | ---------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ---
Read more
name: tool-ui description: Find, install, configure, and integrate Tool UI components in React apps using shadcn registry entries, compatibility checks, scaffolded runtime wiring, toolkit setup with assistant-ui, and troubleshooting workflows. Use when developers ask to add one or more Tool UI components, choose components for a use case, verify compatibility, wire a toolkit in a codebase, or integrate Tool UI payloads into assistant-ui or an existing chat/runtime stack.
Tool UI
Use this skill to move from request to working Tool UI integration quickly.
Prefer assistant-ui when the project has no existing chat UI/runtime. Treat assistant-ui as optional when the app already has a working runtime.
Step 1: Compatibility and Doctor
Read `components.json` in the user's project and verify:
- `components.json` exists.
Step 2: Install Components
Install command from project root
**Preferred (AI-assisted integration):**
npx tool-agent "integrate the <component> component"
Use component-specific prompts from the catalog below (e.g. `integrate the plan component for step-by-step task workflows with status tracking`).
**Alternative (direct registry):**
npx shadcn@latest add @tool-ui/<component-id>
Multiple components:
npx tool-agent "integrate the plan, progress-tracker, and approval-card components for planning flows"
Or via shadcn:
npx shadcn@latest add @tool-ui/plan @tool-ui/progress-tracker @tool-ui/approval-card
Complete component catalog
All 25 Tool UI components with tool-agent prompts and shadcn install commands:
**Progress**
| Component | Description | tool-agent prompt | shadcn | | ------------------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------- | | `plan` | Step-by-step task workflows with status tracking | `integrate the plan component for step-by-step task workflows with status tracking` | `npx shadcn@latest add @tool-ui/plan` | | `progress-tracker` | Real-time status feedback for multi-step operations | `integrate the progress tracker component for real-time status feedback on multi-step operations` | `npx shadcn@latest add @tool-ui/progress-tracker` |
**Input**
| Component | Description | tool-agent prompt | shadcn | | ------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------- | | `option-list` | Let users select from multiple choices | `integrate the option list component to let users select from multiple choices` | `npx shadcn@latest add @tool-ui/option-list` | | `parameter-slider` | Numeric parameter adjustment controls | `integrate the parameter slider component for numeric parameter adjustment controls` | `npx shadcn@latest add @tool-ui/parameter-slider` | | `preferences-panel` | Compact settings panel for user preferences | `integrate the preferences panel component for compact user settings` | `npx shadcn@latest add @tool-ui/preferences-panel` | | `question-flow` | Multi-step guided questions with branching | `integrate the question flow component for multi-step guided questions with branching` | `npx shadcn@latest add @tool-ui/question-flow` |
**Display**
| Component | Description | tool-agent prompt | shadcn | | ---------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------ | ----------------------------------------------- | | `citation` | Display source references with attribution | `integrate the citation component to display source references with attribution` | `npx shadcn@latest add @tool-ui/citation` | | `item-carousel` | Horizontal carousel for browsing collections | `integrate the item carousel component for horizontal browsing of collections` | `npx shadcn@latest add @tool-ui/item-carousel` | | `link-preview` | Rich link previews with Open Graph data | `integrate the link preview component for rich link previews with Open Graph data` | `npx shadcn@latest add @tool-ui/link-preview` | | `stats-display` | Key metrics and KPIs in a visual grid | `integrate the stats display component for key metrics and KPIs in a visual grid` | `npx shadcn@latest add @tool-ui/stats-display` | | `terminal` | Show command-line output and logs | `integrate the terminal component to show command-line output and logs` | `npx shadcn@latest add @tool-ui/terminal` | | `weather-widget` | Weather display with forecasts and conditions | `integrate the weather widget component for weather display with forecasts and conditions` | `npx shadcn@latest add @tool-ui/weather-widget` |
**Artifacts**
| Component | Description | tool-agent prompt | shadcn | | ---------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ---
Repo: assistant-ui/tool-ui