Widget Renderer
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.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“Widget Renderer”。 Crea un JSON de componente de botón que diga 'Submit' con acción de envío
预期结果:
- 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
正在使用“Widget Renderer”。 Crea un formulario de contacto con campos de nombre, correo electrónico y botón de envío
预期结果:
- 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
安全审计
安全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.
质量评分
你能构建什么
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.
试试这些提示
Crea un JSON de componente de botón simple que diga 'Click Me' con estilo predeterminado y una acción de envío.
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.
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.
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.
最佳实践
- 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
避免
- 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