Summary
A project-aware skill that teaches Claude how to build agent UIs using the Agent Elements shadcn registry. It knows the entire component catalog (AgentChat, tool cards for bash/edit/search/plan, input bars with model pickers), the install commands, import paths under `@/components/agent-elements/`, and how to wire everything to Vercel AI SDK's useChat hook. Useful when you're building a tool-calling interface and want Claude to stop guessing at component APIs or inventing imports. It won't trigger for basic chat UIs, only when you mention agent surfaces, tool renderers, or plan approval flows. The registry itself is real and maintained at agent-elements.21st.dev, so the skill stays current with actual shadcn conventions.
Install to Claude Code
npx -y skills add 21st-dev/agent-elements --skill agent-elements --agent claude-codeInstalls into .claude/skills of the current project.
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Connect Claude to +800M contacts, +150M companies. Find & Enrich leads in chat.
Try For Free →Files
SKILL.md
Select a file.
Featured
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →Connect Claude to +800M contacts, +150M companies. Find & Enrich leads in chat.
Try For Free →
