Agent Elements

Skills

Skills give AI assistants like Claude Code and Cursor project-aware context about Agent Elements. When installed, your assistant knows how to find, install, compose, and customise components using the correct APIs, prop shapes, and styling patterns for your project.

  • Add a streaming chat surface with AgentChat, wire it to my existing /api/chat route.
  • Show me the available tool renderers in Agent Elements and pick the right ones for my agent.
  • Replace the default SendButton with one that matches my brand palette.
  • Build a composer with InputBar, ModeSelector, and ModelPicker, then connect it to useChat.
Install
Via skills.sh

Install the Agent Elements skill via skills.sh. The skill bundle registers with every compatible assistant on your machine:

npx skills add 21st-dev/agent-elements
Manual install for Claude Code

Want to try the skill right now? Copy the SKILL.md from the repo into your Claude Code skills folder:

mkdir -p ~/.claude/skills/agent-elements
curl -L https://raw.githubusercontent.com/21st-dev/agent-elements/main/skills/agent-elements/SKILL.md \
  -o ~/.claude/skills/agent-elements/SKILL.md

After install, restart your assistant. It will detect Agent Elements whenever your project has components/agent-elements on disk or a matching entry in components.json.

What's included
  • Project detection. Reads components.json and scans for installed Agent Elements files.
  • Component catalog. Full inventory of the 25 components with API shapes, slots, and prop defaults.
  • Composition patterns. When to pair AgentChat with tool renderers, how to wire InputBar to the Vercel AI SDK, mode/model picker placement, and more.
  • Theming guardrails. The Tailwind tokens Agent Elements relies on (--an-foreground, --an-primary-color, etc.) so the assistant does not break styling when editing.
  • Registry access. A pointer to the Agent Elements registry so the assistant can install new components on demand via shadcn add.
How it works
  1. Detection. The skill inspects the workspace for Agent Elements files and a shadcn-initialised project.
  2. Context injection. Relevant component docs, prop types, and composition rules are loaded into the assistant's context on demand.
  3. Pattern enforcement. The assistant follows the same patterns you see in the docs: no hallucinated props, no drifting away from the shadcn style of the rest of your codebase.
  4. On-demand install. If a component is missing, the assistant runs shadcn add against the Agent Elements registry directly.
Learn more