# Tools Ui

> Componentes de ciclo de vida de herramientas para React/Next.js de ui.inference.sh: estado, progreso, aprobación y resultados de tool calls.

Fuente: https://skillsagentes.com/skills/skills-101/superpowers/tools-ui
Markdown: https://skillsagentes.com/skills/skills-101/superpowers/tools-ui.md

Repositorio: https://github.com/skills-101/superpowers
Autor: skills-101
Licencia: no declarada
Actualizado: hace 4 meses
Coste de contexto: 111 tok instalada, 990 tok al activarse, 990 tok con todos los archivos del bundle
Bundle: 1 archivo, 4 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add skills-101/superpowers --skill tools-ui --agent claude-code
# Cursor
npx -y skills add skills-101/superpowers --skill tools-ui --agent cursor
# Codex
npx -y skills add skills-101/superpowers --skill tools-ui --agent codex
# Gemini CLI
npx -y skills add skills-101/superpowers --skill tools-ui --agent gemini
# Windsurf
npx -y skills add skills-101/superpowers --skill tools-ui --agent windsurf
# Cline
npx -y skills add skills-101/superpowers --skill tools-ui --agent cline
```

## Qué hace

- Instala componentes React/Next.js para mostrar el ciclo de vida de llamadas a herramientas (ToolCall, ToolResult, ToolApproval)
- Muestra estados de herramientas: pending, running, approval, success, error
- Provee flujo de aprobación humana antes de ejecutar una herramienta (onApprove/onDeny)
- Asigna íconos automáticos a herramientas según el patrón de su nombre

## Cuándo usarla

- Necesitas mostrar llamadas a herramientas de un agente en la interfaz
- Requieres un flujo human-in-the-loop de aprobación antes de ejecutar una herramienta
- Quieres mostrar resultados de herramientas o funciones (function calling UI)

## Qué la activa

- "Muéstrame los tool calls del agente con su estado"
- "Necesito un componente de aprobación antes de ejecutar una herramienta"
- "Quiero mostrar el resultado de una tool call en la UI"

## Antes de instalar

- Requiere Next.js/React con shadcn instalado y ejecutar `npx shadcn@latest add https://ui.inference.sh/r/tools.json`.
- Necesita en el PATH: npx
- makes network requests

## Archivos

- SKILL.md — 4 KB

## SKILL.md

No se reproduce aquí. Léelo en https://github.com/skills-101/superpowers/blob/main/ui/tools-ui/SKILL.md

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [skills-101](https://skillsagentes.com/creators/skills-101.md) — 86 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Web Search](https://skillsagentes.com/skills/skills-101/superpowers/web-search.md): Búsqueda web y extracción de contenido con Tavily y Exa vía la CLI de inference.sh, con apps para búsqueda IA, extracción, respuestas directas e investigación.
- [Twitter Automation](https://skillsagentes.com/skills/skills-101/superpowers/twitter-automation.md): Automatiza Twitter/X: publicar tweets, programar contenido, dar like, retuitear, enviar DMs y seguir usuarios mediante el CLI de inference.sh.
- [Qwen Image 2](https://skillsagentes.com/skills/skills-101/superpowers/qwen-image-2.md): Genera y edita imágenes con los modelos Qwen-Image-2.0 de Alibaba vía la CLI de inference.sh: texto a imagen, edición multi-imagen y renderizado de texto complejo.
- [Speech To Text](https://skillsagentes.com/skills/skills-101/superpowers/speech-to-text.md): Transcribe audio a texto con los modelos ElevenLabs Scribe y Whisper vía la CLI de inference.sh, con diarización, timestamps y traducción.
- [Happyhorse](https://skillsagentes.com/skills/skills-101/superpowers/happyhorse.md): Genera y edita videos físicamente realistas con los modelos Alibaba HappyHorse 1.0 vía el CLI de inference.sh: texto-a-video, imagen-a-video, referencia-a-video y edición de video.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)