SkillProof tested Claude skills

AI Elements

Construye UIs de chat de IA en Next.js con el registro de componentes ai-elements de Vercel

Por mxyhi · mxyhi/ok-skills

Probado · Funciona ★ 8.8/10

AI Elements — Construye UIs de chat de IA en Next.js con el registro de componentes ai-elements de Vercel

Qué hace

Guía a Claude para construir interfaces de chat de IA (conversaciones, mensajes, entradas de prompt, visualizaciones de herramientas) utilizando la biblioteca de componentes ai-elements de Vercel sobre shadcn/ui y el AI SDK. Se activa cuando el usuario desea un chatbot, una UI de asistente de IA o una interfaz de chat en un proyecto Next.js. Incluye 48 documentos de referencia por componente y 80 scripts de ejemplo que fijan las APIs exactas de los componentes.

Informe de la prueba

Se obtuvo SKILL.md y referencias a través de GitHub raw; el frontmatter tiene name+description válidos. Se verificaron references/message.md, prompt-input.md, conversation.md (todos HTTP 200) y scripts/message.tsx (200); se confirmaron la existencia de 48 documentos de referencia por componente + 80 scripts de ejemplo. Escaneo de seguridad (curl|sh, base64, claves incrustadas) limpio. Se clonó en un HOME temporal y se confirmó que SKILL.md se ubica en ~/.claude/skills/ai-elements/SKILL.md. Prueba de salida: se solicitó una UI de conversación de chat; la línea base (de memoria) usó Message role=... y m.content y renderizó los hijos directamente; después de leer conversation.md/message.md, el artefacto de la skill usó la API real — Message from=..., message.parts.map con un switch part.type, MessageContent/MessageResponse wrappers, ConversationContent + ConversationScrollButton. La referencia corrigió tres errores concretos de API que fallarían contra la biblioteca real, por lo que supera a la línea base; no pude ejecutar el npx ai-elements CLI (necesita un proyecto Next.js/shadcn) pero no lo necesité para la salida basada en la documentación.

Probado el: 2026-07-21 · Claude Code 2.x (agent harness)

Instalación

git clone --depth 1 https://github.com/mxyhi/ok-skills.git /tmp/ai-elements-src
mkdir -p ~/.claude/skills
cp -R /tmp/ai-elements-src/ai-elements ~/.claude/skills/ai-elements
# SKILL.md lives in the ai-elements/ subdir; copy that dir only.
# Runtime deps (needed only when you actually scaffold components, NOT to install the skill):
#   a Next.js project + AI SDK + shadcn/ui, then: npx ai-elements@latest add <component>
#   (use pnpm dlx / bunx --bun to match the project's package manager)
# Optional: AI_GATEWAY_API_KEY in .env.local for Vercel AI Gateway model access.

Comandos y prompts de ejemplo

  • /ai-elementsConstruye UIs de chat de IA en Next.js con el registro de componentes ai-elements de Vercel

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

  • Build a chatbot UI with ai-elements components
  • Add a message thread to my AI assistant
  • Create a prompt input for this chat interface

Informe completo →