Crear interfaces de agentes en React
Los equipos necesitan interfaces de chat para agentes sin reconstruir streaming, aprobaciones y visualizaciones de herramientas. Esta skill guía la configuración del componente Agent de inference.sh en React y Next.js.
Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.
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.Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.
Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.
Usando "agent-ui". Añade el componente a un nuevo panel de Next.js.
Resultado esperado:
Usando "agent-ui". Planifica un agente que pueda rellenar un formulario después de la aprobación.
Resultado esperado:
Un diseño de herramienta que escanea campos de formulario, solicita confirmación, valida entradas e informa la finalización sin ocultar el control del usuario.
Usando "agent-ui". Revisa la seguridad antes del lanzamiento.
Resultado esperado:
Una lista de verificación que cubre la confianza en paquetes remotos, el almacenamiento de variables de entorno, permisos de carga, configuración del modelo y manejo de aprobaciones.
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 son capacidades locales reales que pueden esperarse para esta habilidad, por lo que requieren revisión, pero no se cuentan como comportamiento malicioso confirmado.
Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es 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 sigue siendo un skill instalable independiente. La variante recomendada se ordena según la evidencia de Skillstore.
Por qué esta variante es la primera
inference-sh-9-agent-ui
2026-09-09
inference-sh-agent-ui
2026-09-09
inferen-sh-agent-ui
2026-09-09
Un desarrollador frontend puede añadir una interfaz de agente lista para usar a una página de Next.js con streaming y opciones de archivos.
Un equipo de producto puede probar flujos de trabajo de asistente con aprobaciones, widgets y herramientas del lado del cliente antes de una implementación personalizada.
Un ingeniero de plataforma de IA puede documentar el enrutamiento proxy, la configuración de claves de API y la configuración del componente para equipos internos.
Ayúdame a añadir el componente de interfaz de agente a una app de Next.js. Explica los pasos de instalación, la ruta proxy y la variable de entorno requerida.
Planifica una configuración de agente para un asistente de soporte SaaS. Incluye elección de modelo, objetivos del prompt del sistema y comportamiento seguro de aprobación.
Diseña herramientas del lado del navegador para rellenar un formulario de cliente con aprobación humana. Describe el manejo de estado, la validación y la confirmación del usuario.
Audita mi integración planificada de interfaz de agente en cuanto a seguridad y experiencia de usuario. Revisa instalaciones remotas, manejo de claves de API, cargas de archivos y flujos de aprobación.
Autor
inference-sh-9Licencia
MIT
Revisión de Skillstore
r1
Aviso de versión
El autor no declaró una versión.
Ref.
0519034dad657fb1f7706e0550e962beeda73fdf
Actualidad del mantenimiento
18/7/2026
Uso
6 descargas · 104 vistas
Estructura de archivos
📄 SKILL.md
Añadir interfaz de ciclo de vida de herramientas a aplicaciones de agentes
Las aplicaciones de agentes necesitan mostrar con claridad el estado de las herramientas, las aprobaciones y los resultados. Esta skill proporciona orientación sobre componentes de React y Next.js para esos flujos de trabajo.
Renderizar widgets JSON en React
La salida del agente a menudo necesita una interfaz de usuario interactiva en lugar de texto sin formato. Esta skill muestra cómo renderizar definiciones estructuradas de widgets como componentes de React y Next.js.
Crear interfaces de chat en React
Los equipos necesitan interfaces de chat que encajen con las aplicaciones React modernas. Esta skill proporciona componentes y patrones de estilo shadcn para mensajes, entradas, avatares y estados de streaming.
Mejora prompts de IA para texto, imágenes y video
Los resultados de IA suelen fallar cuando los prompts son vagos o están mal estructurados. Esta skill proporciona patrones reutilizables para prompts de LLM, imágenes y video.
Analiza competidores con desgloses estructurados
La investigación competitiva suele quedar dispersa entre notas, capturas de pantalla, páginas de precios y sitios de reseñas. Esta skill proporciona marcos repetibles de desglose, plantillas de comparación y flujos de trabajo de investigación para tomar decisiones estratégicas claras.
Ejecutar código Python en un sandbox gestionado
Las tareas de Python a menudo necesitan bibliotecas y ejecución aislada. Esta skill ejecuta Python mediante inference.sh con herramientas para datos, medios, scraping y automatización.
Crea aplicaciones fullstack con orientación sénior
por alirezarezvani
Los proyectos fullstack suelen necesitar una configuración coherente, decisiones de arquitectura y controles de calidad. Esta skill proporciona scripts y referencias para trabajos con React, Next.js, Node.js, GraphQL y PostgreSQL.
Implementar transiciones de vista en React
por vercel-labs
Las transiciones de vista en React son fáciles de colocar incorrectamente, lo que provoca animaciones silenciosas o ruidosas. Esta skill guía las decisiones de animación de rutas, Suspense, listas y elementos compartidos.
Desarrolla funcionalidades frontend listas para producción
por davila7
Los equipos de frontend necesitan directrices coherentes sobre React y Next.js en todos sus proyectos. Esta habilidad proporciona flujos de trabajo de referencia, prácticas de calidad y scripts auxiliares para el análisis del frontend.
Optimizar el rendimiento de Next.js
por Atman36
Las aplicaciones de Next.js pueden volverse lentas por bundles grandes, caché débil y medios sin optimizar. Esta habilidad guía a Claude, Codex y Claude Code a través de mejoras de rendimiento enfocadas para apps de producción.
Optimizar el rendimiento de React y Next.js
por vercel-labs
Las apps de React y Next.js a menudo pierden velocidad por waterfalls, bundles grandes y re-renderizados evitables. Esta skill ofrece a los agentes reglas concretas para realizar cambios más seguros centrados en el rendimiento.
Automatizar la localización de aplicaciones web
por DNYoussef
Añadir soporte multilingüe a menudo dispersa cadenas, enrutamiento, metadatos y archivos de locale por toda la base de código. Esta skill planifica e implementa la configuración de i18n con traducciones, validación y documentación.