SkillProof tested Claude skills

AI Elements

Crée des interfaces utilisateur de chat IA dans Next.js avec le registre de composants ai-elements de Vercel

par mxyhi · mxyhi/ok-skills

Testé · Fonctionne ★ 8.8/10

AI Elements — Crée des interfaces utilisateur de chat IA dans Next.js avec le registre de composants ai-elements de Vercel

Ce que fait

Guide Claude pour construire des interfaces de chat IA (conversations, messages, entrées d'invite, affichages d'outils) en utilisant la bibliothèque de composants ai-elements de Vercel sur shadcn/ui et le AI SDK. Se déclenche lorsque l'utilisateur souhaite un chatbot, une interface utilisateur d'assistant IA ou une interface de chat dans un projet Next.js. Fournit 48 documents de référence par composant et 80 scripts d'exemple qui épinglent les API exactes des composants.

Rapport de test

Récupéré SKILL.md et les références via raw GitHub ; le frontmatter a un name+description valide. Vérifié ponctuellement references/message.md, prompt-input.md, conversation.md (tous HTTP 200) et scripts/message.tsx (200) ; confirmé l'existence de 48 docs de référence + 80 scripts d'exemple. Analyse de sécurité (curl|sh, base64, clés intégrées) propre. Cloned dans un HOME temporaire et confirmé que SKILL.md atterrit à ~/.claude/skills/ai-elements/SKILL.md. Test de sortie : demandé une interface utilisateur de conversation de chat ; la base (de mémoire) utilisait Message role=... et m.content et rendait les enfants directement ; après lecture de conversation.md/message.md, l'artefact de la compétence utilisait la vraie API — Message from=..., message.parts.map avec un switch part.type, des wrappers MessageContent/MessageResponse, ConversationContent + ConversationScrollButton. La référence a corrigé trois erreurs API concrètes qui auraient cassé la bibliothèque réelle, donc elle surpasse la base ; je n'ai pas pu exécuter le npx ai-elements CLI (nécessite un projet Next.js/shadcn) mais je n'en avais pas besoin pour la sortie basée sur la documentation.

Testé le: 2026-07-21 · Claude Code 2.x (agent harness)

Installation

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.

Commandes et exemples de prompts

  • /ai-elementsCrée des interfaces utilisateur de chat IA dans Next.js avec le registre de composants ai-elements de Vercel

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

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

Rapport complet →