Crie Interfaces de Agente em React
Equipes precisam de interfaces de chat com agentes sem reconstruir streaming, aprovações e exibições de ferramentas. Esta skill orienta a configuração do componente Agent da inference.sh em React e Next.js.
Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.
Review the Skillstore skill "agent-ui" from https://skillstore.io/skills/inference-sh-9-agent-ui.md and its manifest at https://skillstore.io/api/skills/inference-sh-9-agent-ui/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Seu Agente ainda deve apresentar o plano e solicitar qualquer confirmação exigida pela política de segurança.
Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.
Usando "agent-ui". Adicionar o componente a um novo dashboard Next.js.
Resultado esperado:
Usando "agent-ui". Planejar um agente que possa preencher um formulário após aprovação.
Resultado esperado:
Um design de ferramenta que verifica campos do formulário, solicita confirmação, valida entradas e relata a conclusão sem ocultar o controle do usuário.
Usando "agent-ui". Revisar a segurança antes do lançamento.
Resultado esperado:
Uma checklist cobrindo confiança em pacotes remotos, armazenamento de variáveis de ambiente, permissões de upload, configuração do modelo e tratamento de aprovações.
The skill is mostly documentation for installing and using a React and Next.js agent component. Most static shell, environment, and URL detections are markdown examples or normal documentation links. Confirmed risks are remote install commands and a hosted image that depend on external infrastructure.
Estas são capacidades locais reais que podem ser esperadas para esta habilidade, portanto exigem revisão, mas não são contabilizadas como comportamento malicioso confirmado.
Compartilhe o relatório de avaliação versionado, o badge neutro, o cartão incorporável e as citações. A Skillstore apresenta evidências sem decidir se este Skill é seguro.
https://skillstore.io/skills/inference-sh-9-agent-ui/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/inference-sh-9-agent-ui?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/inference-sh-9-agent-ui?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/inference-sh-9-agent-ui/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/inference-sh-9-agent-ui.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>inference-sh-9. (2026). agent-ui security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/inference-sh-9-agent-ui/audits/6@techreport{inference-sh-9-inference-sh-9-agent-ui-2026,
author = {inference-sh-9},
title = {agent-ui security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/inference-sh-9-agent-ui/audits/6},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "agent-ui security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "inference-sh-9"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/inference-sh-9-agent-ui/audits/6"
identifiers:
- type: other
value: "skillstore:inference-sh-9-agent-ui:audit:6"
description: "Skillstore immutable audit report identifier"
Cada autor permanece como um skill instalável separado. A variante recomendada é classificada pelas evidências do Skillstore.
Por que esta variante está em primeiro
inference-sh-9-agent-ui
2026-09-09
inference-sh-agent-ui
2026-09-09
inferen-sh-agent-ui
2026-09-09
Um desenvolvedor frontend pode adicionar uma interface de agente pronta a uma página Next.js com opções de streaming e arquivos.
Uma equipe de produto pode testar fluxos de trabalho de assistente com aprovações, widgets e ferramentas do lado do cliente antes de uma implementação personalizada.
Um engenheiro de plataforma de IA pode documentar roteamento de proxy, configuração de chave de API e configuração de componente para equipes internas.
Ajude-me a adicionar o componente de UI de agente a um app Next.js. Explique as etapas de instalação, a rota de proxy e a variável de ambiente obrigatória.
Planeje uma configuração de agente para um assistente de suporte SaaS. Inclua escolha de modelo, objetivos do prompt de sistema e comportamento seguro de aprovação.
Projete ferramentas do lado do navegador para preencher um formulário de cliente com aprovação humana. Descreva gerenciamento de estado, validação e confirmação do usuário.
Audite minha integração planejada de UI de agente quanto à segurança e experiência do usuário. Verifique instalações remotas, tratamento de chaves de API, uploads de arquivos e fluxos de aprovação.
Autor
inference-sh-9Licença
MIT
Revisão da Skillstore
r1
Aviso de versão
O autor não declarou uma versão.
Referência
0519034dad657fb1f7706e0550e962beeda73fdf
Atualidade da manutenção
18/07/2026
Uso
6 downloads · 104 visualizações
Estrutura de arquivos
📄 SKILL.md
Adicionar UI de Ciclo de Vida de Ferramentas a Aplicações de Agente
As aplicações de agente precisam de exibições claras de status, aprovação e resultados de ferramentas. Esta skill fornece orientação sobre componentes React e Next.js para esses fluxos de trabalho.
Renderizar Widgets JSON no React
A saída de agentes muitas vezes precisa de UI interativa em vez de texto simples. Esta skill mostra como renderizar definições estruturadas de widgets como componentes React e Next.js.
Crie Interfaces de Chat em React
Equipes precisam de interfaces de chat que combinem com apps React modernos. Esta skill fornece componentes e padrões no estilo shadcn para mensagens, entradas, avatares e estados de streaming.
Melhore Prompts de IA para Texto, Imagens e Vídeo
Os resultados de IA frequentemente falham quando os prompts são vagos ou mal estruturados. Esta skill fornece padrões reutilizáveis para prompts de LLM, imagem e vídeo.
Analise Concorrentes com Análises Estruturadas
A pesquisa competitiva muitas vezes fica espalhada por notas, capturas de tela, páginas de preços e sites de avaliações. Esta skill fornece estruturas repetíveis de análise, modelos de comparação e fluxos de trabalho de pesquisa para decisões estratégicas claras.
Execute Código Python em uma Sandbox Gerenciada
Tarefas em Python frequentemente precisam de bibliotecas e execução isolada. Esta skill executa Python por meio do inference.sh com ferramentas para dados, mídia, scraping e automação.
Crie Aplicações Fullstack com Orientação Sênior
por alirezarezvani
Projetos fullstack frequentemente precisam de configuração consistente, escolhas de arquitetura e verificações de qualidade. Esta skill fornece scripts e referências para trabalhos com React, Next.js, Node.js, GraphQL e PostgreSQL.
Implementar React View Transitions
por vercel-labs
React view transitions são fáceis de posicionar incorretamente, resultando em animações que falham silenciosamente ou geram ruído visual. Esta skill orienta as escolhas de animação para rotas, Suspense, listas e elementos compartilhados.
Crie Recursos de Frontend Prontos para Produção
por davila7
As equipes de frontend precisam de orientações consistentes sobre React e Next.js em diferentes projetos. Esta habilidade fornece fluxos de trabalho de referência, práticas de qualidade e scripts auxiliares para análise de frontend.
Otimizar o desempenho do Next.js
por Atman36
Aplicações Next.js podem ficar lentas devido a bundles grandes, cache fraco e mídia não otimizada. Esta habilidade orienta Claude, Codex e Claude Code em melhorias de desempenho focadas para apps em produção.
Otimize o Desempenho de React e Next.js
por vercel-labs
Aplicativos React e Next.js frequentemente perdem velocidade por causa de waterfalls, bundles grandes e re-renderizações evitáveis. Esta skill oferece aos agentes regras concretas para mudanças mais seguras com foco em desempenho.
Automatize a localização de apps web
por DNYoussef
Adicionar suporte multilíngue frequentemente espalha strings, roteamento, metadados e arquivos de locale por toda a base de código. Esta skill planeja e implementa a configuração de i18n com traduções, validação e documentação.