Habilidades Widget Renderer
📦

Widget Renderer

Seguro

Renderizar Componentes UI desde JSON

Crear interfaces de usuario dinámicas desde respuestas de IA consume mucho tiempo y es propenso a errores. La habilidad Widget Renderer permite a Claude y otros agentes de IA generar componentes UI interactivos y ricos directamente desde datos JSON estructurados.

Soporta: Claude Codex Code(CC)
📊 71 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "Widget Renderer". Crea un JSON de componente de botón que diga 'Submit' con acción de envío

Resultado esperado:

  • Botón con etiqueta 'Submit' y variante 'default'
  • onClickAction configurado como tipo submit para manejo de formularios
  • Listo para renderizar en componente React vía WidgetRenderer

Usando "Widget Renderer". Crea un formulario de contacto con campos de nombre, correo electrónico y botón de envío

Resultado esperado:

  • Componente de formulario con título 'Contact Form' y asForm habilitado
  • Diseño de columna con espaciado gap de 3
  • Campos de entrada para nombre y correo electrónico con marcadores de posición
  • Botón de envío con tipo de acción submit

Auditoría de seguridad

Seguro
v1 • 2/28/2026

This is a prompt-only skill containing only documentation (SKILL.md) with no executable code. The static analyzer scanned 0 files (0 lines) and found 0 security issues. The skill provides declarative UI widget definitions in JSON format for React/Next.js rendering - there are no scripts, network calls, file system access, environment variable usage, or external command execution patterns.

0
Archivos escaneados
0
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
50
Comunidad
100
Seguridad
65
Cumplimiento de la especificación

Lo que puedes crear

Generación de Formularios con IA

Usa Claude para generar formularios de contacto completos, encuestas o interfaces de entrada de datos desde definiciones JSON basadas en los requisitos del usuario.

Tarjetas de Panel Dinámicas

Crea tarjetas de visualización de datos ricas con degradados, iconos y diseños estructurados para paneles de análisis o perfiles de usuario.

Respuestas UI Conversacionales

Construye respuestas interactivas basadas en tarjetas en aplicaciones de chat donde Claude genera UI estructurada desde salidas de agentes.

Prueba estos prompts

Botón Básico 
Crea un JSON de componente de botón simple que diga 'Click Me' con estilo predeterminado y una acción de envío.
Formulario de Contacto 
Crea un componente de formulario de contacto con campos de nombre, correo electrónico y mensaje más un botón de envío. Usa un diseño de columna con espaciado consistente.
Tarjeta de Vuelo 
Crea un componente de tarjeta de vuelo que muestre los aeropuertos de salida (SFO) y llegada (JFK) con un icono de avión entre ellos. Usa fondo gradient-ocean y bordes redondeados.
Panel Interactivo 
Crea un componente de panel con un título de encabezado, tres tarjetas de estadísticas en una fila que muestren conteo de usuarios, ingresos y crecimiento, y una lista de actividad reciente abajo. Usa estilo gradient-purple en todo.

Mejores prácticas

  • Usa valores de espaciado consistentes (1-4) para mantener la jerarquía visual en los diseños
  • Aprovecha fondos con degradados (gradient-ocean, gradient-purple, etc.) para énfasis visual en las tarjetas
  • Envuelve elementos interactivos en componentes de diseño apropiados (row, col, box) para una estructura adecuada

Evitar

  • Evita anidar más de 4-5 niveles — esto crea JSON complejo que es difícil de mantener
  • No mezcles tipos de diseño de manera inconsistente dentro de la misma sección de componente
  • Evita omitir el campo 'type' — cada objeto de componente requiere una propiedad type

Preguntas frecuentes

¿Cómo instalo los componentes de Widget Renderer?
Ejecuta npx shadcn@latest add https://ui.inference.sh/r/widgets.json para agregar los componentes de widgets a tu proyecto.
¿Qué versiones de React son compatibles?
Los widgets funcionan con React 18+ y Next.js 13+ usando el App Router.
¿Puedo personalizar el estilo de los widgets?
Sí, los widgets admiten colores de fondo, degradados, relleno, radio de borde y opciones de espaciado directamente en el JSON.
¿Cómo manejo el envío de formularios?
Pasa una retrollamada onAction a WidgetRenderer que recibe el tipo de acción y formData cuando se hace clic en los botones.
¿Los widgets son accesibles?
Sí, los componentes shadcn/ui subyacentes incluyen atributos ARIA apropiados y navegación por teclado.
¿Puedo usar esto con Claude Code?
Sí, esta habilidad funciona con Claude, Codex y Claude Code. Claude puede generar las definiciones JSON directamente desde solicitudes en lenguaje natural.

Detalles del desarrollador

Licencia

MIT

Repositorio

https://github.com/inference-sh-9/skills/tree/main/skills/widgets-ui/

Ref.

main

Estructura de archivos

📄 SKILL.md