# Widgets Ui

> Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, buttons, cards, layouts, inputs, selects, checkboxes. Use for: agent-generated UIs, dynamic forms, data display, interactive cards. Triggers: widgets, declarative ui, json ui, widget renderer, agent widgets, dynamic ui, form widgets, card widgets, shadcn widgets, structured output ui

Source: https://skillsagentes.com/skills/skills-101/superpowers/widgets-ui
Repository: https://github.com/skills-101/superpowers
Author: skills-101
License: not specified
Updated: hace 3 meses
Context cost: 110 tok installed, 1.3k tok once triggered, 1.3k tok with every bundled file
Bundle: 1 file, 5 KB
Permissions requested: none declared

## Install

```bash
npx -y skills add skills-101/superpowers --skill widgets-ui --agent claude-code
```

## What it does

- 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

## Use it when

- 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

## What triggers it

- "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"

## Before you install

- 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`.
- Needs on PATH: npx

## Files

- SKILL.md — 5 KB

## SKILL.md

Not reproduced here. Read it at https://github.com/skills-101/superpowers/blob/main/ui/widgets-ui/SKILL.md

---

Skills Agentes — https://skillsagentes.com/skills/skills-101/superpowers/widgets-ui