SkillProof tested Claude skills

AI Elements

Bygg AI-chatt-UI i Next.js med Vercels ai-elements komponentregister

av mxyhi · mxyhi/ok-skills

Testad · Fungerar ★ 8.8/10

AI Elements — Bygg AI-chatt-UI i Next.js med Vercels ai-elements komponentregister

Vad den gör

Vägleder Claude att bygga AI-chattgränssnitt (konversationer, meddelanden, prompt-inputs, verktygsvisningar) med Vercels ai-elements komponentbibliotek ovanpå shadcn/ui och AI SDK. Utlöses när användaren vill ha en chatbot, AI-assistent-UI eller chattgränssnitt i ett Next.js-projekt. Levereras med 48 per-komponent referensdokument och 80 exempel-skript som fäster de exakta komponent-API:erna.

Testrapport

Hämtade SKILL.md och referenser via rå GitHub; frontmatter har giltigt name+description. Stickprovskontrollerade references/message.md, prompt-input.md, conversation.md (alla HTTP 200) och scripts/message.tsx (200); bekräftade att 48 referensdokument + 80 exempel-skript existerar. Säkerhetsskanning (curl|sh, base64, inbäddade nycklar) ren. Klonade till en temporär HOME och bekräftade att SKILL.md hamnar på ~/.claude/skills/ai-elements/SKILL.md. Output-test: bad om ett chattkonversations-UI; baseline (från minnet) använde Message role=... och m.content och renderade barn direkt; efter att ha läst conversation.md/message.md använde färdighetsartefakten det verkliga API:et – Message from=..., message.parts.map med en part.type switch, MessageContent/MessageResponse wrappers, ConversationContent + ConversationScrollButton. Referensen korrigerade tre konkreta API-fel som skulle ha brutit mot det faktiska biblioteket, så den överträffar baseline; jag kunde inte köra npx ai-elements CLI (behöver ett Next.js/shadcn-projekt) men behövde det inte för den dokumentationsdrivna outputen.

Testad: 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.

Kommandon och exempelprompter

  • /ai-elementsBygg AI-chatt-UI i Next.js med Vercels ai-elements komponentregister

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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

Läs hela rapporten →