SkillProof tested Claude skills

AI Elements

Costruisce UI di chat AI in Next.js con il registro di componenti ai-elements di Vercel

di mxyhi · mxyhi/ok-skills

Promosso ★ 8.8/10

AI Elements — Costruisce UI di chat AI in Next.js con il registro di componenti ai-elements di Vercel

Cosa fa

Guida Claude a costruire interfacce di chat AI (conversazioni, messaggi, input di prompt, display di strumenti) utilizzando la libreria di componenti ai-elements di Vercel sopra shadcn/ui e l'AI SDK. Si attiva quando l'utente desidera un chatbot, un'interfaccia utente di assistente AI o un'interfaccia di chat in un progetto Next.js. Fornisce 48 documenti di riferimento per componente e 80 script di esempio che fissano le API esatte dei componenti.

Rapporto di test

Recuperato SKILL.md e riferimenti tramite GitHub raw; il frontmatter ha name+description validi. Controllati a campione references/message.md, prompt-input.md, conversation.md (tutti HTTP 200) e scripts/message.tsx (200); confermata l'esistenza di 48 documenti di riferimento + 80 script di esempio. Scansione di sicurezza (curl|sh, base64, chiavi incorporate) pulita. Clonato in una HOME temporanea e confermato che SKILL.md si trova in ~/.claude/skills/ai-elements/SKILL.md. Test di output: richiesta un'interfaccia utente di conversazione chat; la baseline (a memoria) usava Message role=... e m.content e renderizzava i figli direttamente; dopo aver letto conversation.md/message.md l'artefatto della skill usava l'API reale — Message from=..., message.parts.map con uno switch part.type, wrapper MessageContent/MessageResponse, ConversationContent + ConversationScrollButton. Il riferimento ha corretto tre errori API concreti che avrebbero causato problemi con la libreria reale, quindi supera la baseline; non ho potuto eseguire la CLI npx ai-elements (richiede un progetto Next.js/shadcn) ma non ne ho avuto bisogno per l'output guidato dalla documentazione.

Testato il: 2026-07-21 · Claude Code 2.x (agent harness)

Installazione

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.

Comandi e prompt di esempio

  • /ai-elementsCostruisce UI di chat AI in Next.js con il registro di componenti ai-elements di Vercel

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

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

Rapporto completo →