SkillProof tested Claude skills

AI Elements

Bouw AI chat UI's in Next.js met Vercel's ai-elements componentenregister.

Door mxyhi · mxyhi/ok-skills

Getest · Werkt ★ 8.8/10

AI Elements — Bouw AI chat UI's in Next.js met Vercel's ai-elements componentenregister.

Wat het doet

Begeleidt Claude bij het bouwen van AI-chatinterfaces (conversaties, berichten, prompt-inputs, tool-displays) met behulp van Vercel's ai-elements componentbibliotheek bovenop shadcn/ui en de AI SDK. Activeert wanneer de gebruiker een chatbot, AI-assistent UI of chatinterface wil in een Next.js-project. Levert 48 per-component referentiedocumenten en 80 voorbeeldscripts die de exacte component-API's vastleggen.

Testrapport

SKILL.md en referenties opgehaald via raw GitHub; frontmatter heeft geldige name+description. references/message.md, prompt-input.md, conversation.md (allemaal HTTP 200) en scripts/message.tsx (200) steekproefsgewijs gecontroleerd; bevestigd dat 48 referentiedocumenten + 80 voorbeeldscripts bestaan. Beveiligingsscan (curl|sh, base64, embedded keys) schoon. Gekloond naar een tijdelijke HOME en bevestigd dat SKILL.md op ~/.claude/skills/ai-elements/SKILL.md terechtkomt. Outputtest: vroeg om een chatconversatie UI; baseline (uit geheugen) gebruikte Message role=... en m.content en renderde children direct; na het lezen van conversation.md/message.md gebruikte het skill-artefact de echte API — Message from=..., message.parts.map met een part.type switch, MessageContent/MessageResponse wrappers, ConversationContent + ConversationScrollButton. De referentie corrigeerde drie concrete API-fouten die zouden breken tegen de daadwerkelijke bibliotheek, dus het verslaat de baseline; ik kon de npx ai-elements CLI niet uitvoeren (vereist een Next.js/shadcn project) maar had deze niet nodig voor de doc-gedreven output.

Getest op: 2026-07-21 · Claude Code 2.x (agent harness)

Installatie

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.

Commando's en voorbeeldprompts

  • /ai-elementsBouw AI chat UI's in Next.js met Vercel's ai-elements componentenregister.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

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

Volledig rapport (Engels) →