Builds chat, agent and tool-call interfaces in React with 21st.dev's Agent Elements components.
$ npx skills add https://craftwork.design/skills/agent-elements -a claude-code -y
Installs into .claude/skills/agent-elements. Add -g for every project.
SKILL.md
Agent Elements skill
Project-aware context for building chat and agent UIs with Agent Elements —
an open-source shadcn registry at https://agent-elements.21st.dev.
What this skill gives you
When this skill loads, you know:
The registry is shadcn-compatible. Every component is installed with
npx shadcn@latest add https://agent-elements.21st.dev/r/<component>.json.
Files land under components/agent-elements/ (the library's internal
components/ prefix is stripped — see Paths below).
The API is typed around the Vercel AI SDK. Messages are
UIMessage[] from ai, status is ChatStatus. useChat() plugs in
directly.
The full component catalog with API shapes and composition rules (see
sections below).
Suggestions — quick-prompt chips for the empty state or inline.
ModelPicker / ModeSelector — designed to drop into leftActions. Both
accept a simple { id, name, version? } / { id, label, icon?, description? }
shape. Do not import CLAUDE_MODELS — it was removed; supply your own array.
SendButton / AttachmentButton / FileAttachment — usable standalone if
you're building a custom composer.
Tool cards
All tool cards accept a part prop of type
Extract<UIMessage["parts"][number], { type: \tool-<Name>` }>from the AI SDK. Register them viatoolRenderersonAgentChat/MessageList`:
Standard shadcn tokens: --background, --foreground, --border,
--muted, --muted-foreground, --accent, --primary, etc.
Customising a component is just editing the installed file. Prefer that over
wrapping — the code is yours now.
When NOT to use Agent Elements
Projects using assistant-ui, ai-elements, copilotkit, or another kit —
don't mix.
Pure chat UIs that never render tool calls or plans — InputBar + your own
message rendering may be enough; skip AgentChat.
React < 19 or Tailwind < v4 — the components depend on both.
Quick answers for common asks
"Add Agent Elements to this project" → run npx shadcn@latest init if
components.json is missing, then
npx shadcn@latest add https://agent-elements.21st.dev/r/agent-chat.json.
"Switch the default SendButton look" → edit
components/agent-elements/input/send-button.tsx directly. Tokens live on
--an-* CSS vars.
"Render a custom tool" → map its type in toolRenderers; fall back to
GenericTool for unknown tools.
"Use with useChat" → pass messages and status straight through,
translate sendMessage/stop to onSend({ content })/onStop.
