Crear componentes de interfaz de chat con IA
Los equipos necesitan interfaces de chat con IA coherentes que coincidan con los patrones de AI Elements. Esta skill guía la creación de componentes con las convenciones de React, shadcn/ui y Vercel AI SDK.
No instales este Skill automáticamente.
La política canónica exige la revisión de un operador antes de cualquier acción de instalación.
Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.
Review the Skillstore skill "ai-elements" from https://skillstore.io/skills/vercel-ai-elements.md and its manifest at https://skillstore.io/api/skills/vercel-ai-elements/manifest. Verify the artifact. Do not auto-install. Inspect the skill and report your findings, then wait for an operator or manual installation decision.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 "ai-elements". Crea un componente que muestre la selección de modelo en una app de chat con IA.
Resultado esperado:
Un plan de implementación conciso, una estructura de componente React y notas de uso alineadas con las convenciones de AI Elements.
Usando "ai-elements". Añade documentación para una nueva variante de entrada de prompt.
Resultado esperado:
Un esquema de página de referencia con props, orientación de uso, limitaciones y contenido de demostración seguro.
Usando "ai-elements". Revisa este componente de IA generado para comprobar su coherencia.
Resultado esperado:
Most static findings are false positives from Markdown examples, React keys, template literals, ANSI terminal text, static URLs, and inline demo media. Real issues remain in the speech input examples, which risk exposing OpenAI keys from client code, and in the stack trace documentation, which recommends eval(code) in a backend route.
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/vercel-ai-elements/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/vercel-ai-elements?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/vercel-ai-elements?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vercel-ai-elements/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/vercel-ai-elements.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>vercel. (2026). ai-elements security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/vercel-ai-elements/audits/4@techreport{vercel-vercel-ai-elements-2026,
author = {vercel},
title = {ai-elements security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/vercel-ai-elements/audits/4},
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: "ai-elements security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "vercel"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/vercel-ai-elements/audits/4"
identifiers:
- type: other
value: "skillstore:vercel-ai-elements:audit:4"
description: "Skillstore immutable audit report identifier"
Crea un componente reutilizable de mensaje de IA que siga las convenciones de composición y estilo de AI Elements.
Construye un panel de estado de herramienta, tarea o confirmación para un prototipo de flujo de trabajo de IA.
Crea ejemplos y notas de referencia para componentes de interfaz de usuario nativos de IA en una biblioteca de componentes compartida.
Crea un nuevo componente de AI Elements para mostrar mensajes breves de estado del asistente. Sigue los patrones existentes de nomenclatura y composición de componentes.
Añade un ejemplo de uso para el nuevo componente en el directorio scripts. Mantén los datos estáticos y evita secretos reales o llamadas de red inseguras.
Revisa esta API de componente de AI Elements para comprobar su coherencia con shadcn/ui, las clases de Tailwind y los patrones de uso de Vercel AI SDK.
Diseña un flujo componible de aprobación de herramientas de IA con estados pendiente, aceptado, rechazado y error. Incluye etiquetas accesibles y datos de ejemplo seguros.
Autor
vercelLicencia
MIT
Revisión de Skillstore
r1
Aviso de versión
El autor no declaró una versión.
Ref.
36e07d5e13068e5be64447e8f20b427cf2cbd21a
Actualidad del mantenimiento
18/7/2026
Uso
35 descargas · 808 vistas
Build eve Agents with Version-Matched Documentation
Agent development can fail when guidance does not match the installed eve version. This skill directs your assistant to bundled documentation before project changes.
Optimize Next.js Cache Component Navigation
Next.js routes can delay their static shell while dynamic data resolves. This skill builds verified instant-navigation tests and guides Cache Components refactors that preserve behavior.
Crear funcionalidades de AI SDK con documentación actual
Las APIs de AI SDK cambian rápidamente, lo que puede hacer que el código generado quede obsoleto. Esta skill guía a Claude, Codex y Claude Code hacia la documentación actual y los patrones de migración.
Optimizar monorepos de Turborepo
La configuración de Turborepo puede ser difícil cuando interactúan las tareas, las entradas de caché, los filtros y la configuración de CI. Esta skill ofrece orientación enfocada para compilaciones de monorepo fiables y pipelines más rápidos.
Adopt Next.js Cache Components Safely
Cache Components migrations can expose blocking routes and hidden rendering issues. This skill guides staged adoption, route fixes, browser checks, and final build verification.
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.
Crear componentes React con seguridad de tipos
por softaworks
El trabajo con React TypeScript suele necesitar tipos precisos para eventos, hooks y rutas. Esta skill proporciona patrones enfocados para componentes tipados, APIs de React 19 y enrutamiento.
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.