widgets-ui
Gerar Widgets Declarativos de UI a Partir de JSON
Agentes têm dificuldade para renderizar interfaces de usuário complexas. Esta skill permite que o Claude gere componentes interativos ricos em React a partir de estruturas JSON simples.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "widgets-ui". Criar um formulário de login com campos de email e senha
Erwartetes Ergebnis:
JSON de Widget com tipo 'ui', asForm definido como true, contendo uma coluna com input de email, input de senha e botão de envio
Verwendung von "widgets-ui". Fazer um card de notificação com badge de sucesso
Erwartetes Ergebnis:
Widget Box com fundo gradient-ocean, padding 4, radius lg, contendo título, badge de sucesso e botão de fechar
Sicherheitsaudit
SicherAll 34 static findings are false positives from documentation patterns. The external_commands detections are TypeScript code examples in markdown blocks, not executable commands. Network URLs are legitimate project documentation links. No cryptographic weakness exists - flags were triggered by markdown table syntax. This is pure documentation for a React component library with no executable code.
Probleme mit niedrigem Risiko (1)
Qualitätsbewertung
Was du bauen kannst
Formulários Gerados por Agente
O Claude cria formulários dinâmicos de múltiplas etapas com base nos requisitos do usuário. O agente gera definições de widgets JSON que são renderizadas como formulários completos com validação.
Cards de Visualização de Dados
Transforme dados estruturados em cards visuais com ícones, badges e layouts. Exiba informações de voo, detalhes de produtos ou perfis de usuário.
Dashboards Interativos
Construa interfaces de dashboard combinando múltiplos widgets. Crie linhas e colunas de botões, estatísticas e exibições de dados.
Probiere diese Prompts
Criar um widget de formulário de contato com campos de nome, email e mensagem. Adicionar um botão de envio com a variante padrão.
Gerar um widget de card de produto com um fundo de gradiente oceano. Incluir um título de produto, badge de preço e botão de compra.
Criar um widget de status de voo mostrando aeroportos de partida e chegada em um layout de linha. Adicionar um ícone de avião entre os locais.
Construir um layout de coluna com três seções: um cabeçalho com título, um formulário com inputs de email e senha, e um rodapé com texto de copyright.
Bewährte Verfahren
- Sempre defina o campo 'type' como 'ui' para widgets raiz para permitir a renderização adequada
- Use nomes semânticos para inputs de formulário (email, password, message) para melhorar o tratamento de dados do formulário
- Combine layouts de box e linha/coluna para criar interfaces estruturadas e responsivas
- Aproveite gradientes predefinidos como 'gradient-ocean' e 'gradient-sunset' para estilização consistente
Vermeiden
- Não aninhe widgets mais de 4 níveis, pois isso complica a manutenção e o desempenho
- Evite misturar diferentes tipos de layout (linha e coluna) sem propósito estrutural claro
- Nunca inclua dados sensíveis no JSON do widget, pois ele é renderizado no lado do cliente
- Não use propriedades personalizadas fora do esquema definido do widget, pois elas serão ignoradas