# Widgets Ui > Widgets de UI declarativos a partir de JSON para React/Next.js con ui.inference.sh; renderiza interfaces ricas e interactivas desde respuestas estructuradas de agentes. Fuente: https://skillsagentes.com/skills/skills-101/superpowers/widgets-ui Markdown: https://skillsagentes.com/skills/skills-101/superpowers/widgets-ui.md Repositorio: https://github.com/skills-101/superpowers Autor: skills-101 Licencia: no declarada Actualizado: hace 4 meses Coste de contexto: 110 tok instalada, 1.3k tok al activarse, 1.3k tok con todos los archivos del bundle Bundle: 1 archivo, 5 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 widgets-ui --agent claude-code # Cursor npx -y skills add skills-101/superpowers --skill widgets-ui --agent cursor # Codex npx -y skills add skills-101/superpowers --skill widgets-ui --agent codex # Gemini CLI npx -y skills add skills-101/superpowers --skill widgets-ui --agent gemini # Windsurf npx -y skills add skills-101/superpowers --skill widgets-ui --agent windsurf # Cline npx -y skills add skills-101/superpowers --skill widgets-ui --agent cline ``` ## Qué hace - Instala un componente WidgetRenderer de React/Next.js vía shadcn para renderizar UI a partir de JSON declarativo - Define tipos de widget: layout (row, col, box), tipografía (title, text, caption, label), interactivos (button, input, select, checkbox) y display (badge, icon, image) - Permite manejar acciones (submit, click) con datos de formulario mediante un callback onAction - Provee ejemplos de tarjetas y formularios construidos con la estructura Widget en JSON ## Cuándo usarla - Cuando se necesita renderizar UI rica e interactiva a partir de respuestas estructuradas de un agente - Para crear formularios dinámicos, tarjetas de datos o layouts generados por un agente - Cuando se quiere una salida estructurada (JSON) convertida en componentes shadcn/React ## Qué la activa - "Genera un widget de tarjeta de vuelo con datos JSON" - "Crea un formulario de contacto usando widgets declarativos" - "Renderiza una UI interactiva a partir de la respuesta del agente" ## Antes de instalar - Requiere instalar el CLI belt-sh con `npx skills add belt-sh/cli` y agregar el componente vía `npx shadcn@latest add https://ui.inference.sh/r/widgets.json`. - Necesita en el PATH: npx - makes network requests ## Archivos - SKILL.md — 5 KB ## SKILL.md No se reproduce aquí. Léelo en https://github.com/skills-101/superpowers/blob/main/ui/widgets-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 - [Agent Tools](https://skillsagentes.com/skills/skills-101/superpowers/agent-tools.md): Ejecuta apps de IA vía el CLI de inference.sh: generación de imágenes y video, LLMs, búsqueda web, 3D y automatización de Twitter, con modelos como FLUX, Veo, Gemini, Claude y OpenRouter. - [Ai Avatar Video](https://skillsagentes.com/skills/skills-101/superpowers/ai-avatar-video.md): Crea videos de avatares IA y talking heads con el CLI de inference.sh: P-Video-Avatar (TTS integrado), OmniHuman, Fabric, PixVerse, para presentadores, dobleaje, UGC y avatares de juegos. - [Ai Image Generation](https://skillsagentes.com/skills/skills-101/superpowers/ai-image-generation.md): Genera imágenes con IA usando GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve y más de 50 modelos vía el CLI de inference.sh. - [Ai Music Generation](https://skillsagentes.com/skills/skills-101/superpowers/ai-music-generation.md): Genera música y canciones con IA usando ElevenLabs, Diffrythm y Tencent Song Generation vía el CLI de inference.sh, para fondos musicales, redes sociales, podcasts y bandas sonoras. - [Ai Video Generation](https://skillsagentes.com/skills/skills-101/superpowers/ai-video-generation.md): Genera videos con IA usando Google Veo, Seedance 2.0, HappyHorse, Wan, Grok y más de 40 modelos a través del CLI de inference.sh. ## Skills relacionadas - [Ai Image Generation](https://skillsagentes.com/skills/skills-101/superpowers/ai-image-generation.md): Genera imágenes con IA usando GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve y más de 50 modelos vía el CLI de inference.sh. - [Ai Product Photography](https://skillsagentes.com/skills/skills-101/superpowers/ai-product-photography.md): Genera fotografía de producto y comercial con IA usando FLUX, Imagen 3, Grok y Seedream: tomas de estudio, escenas lifestyle, packaging y fotos para e-commerce. - [App Store Screenshots](https://skillsagentes.com/skills/skills-101/superpowers/app-store-screenshots.md): Creación de screenshots para App Store y Google Play con specs exactas de plataforma: dimensiones iOS/Android, orden de galería, mockups de dispositivo y vídeos de preview. - [Background Removal](https://skillsagentes.com/skills/skills-101/superpowers/background-removal.md): Elimina fondos de imágenes con BiRefNet vía el CLI de inference.sh; útil para fotos de producto, retratos, e-commerce, PNGs transparentes y edición fotográfica. - [Book Cover Design](https://skillsagentes.com/skills/skills-101/superpowers/book-cover-design.md): Diseño de portadas de libros con convenciones por género, reglas de tipografía y generación de imágenes con IA, para autopublicación, ebooks, impresos y audiolibros. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)