Agent Elements skill

21st-dev/agent-elements

Use whenever the user wants to build or modify a chat, agent, or tool-calling UI in a React 19 + Tailwind v4 project — especially if the code imports from `@/components/agent-elements/*` or the project has that folder on disk. Triggers: "agent chat", "tool call UI", "streaming chat", "plan approval", "AgentChat", "InputBar", "tool renderer", mentions of Agent Elements, or requests to add a new agent surface with shadcn. Do NOT use for plain chat UIs that don't need tool/plan/approval cards, or for projects already committed to a different agent UI kit.

内容更新日:

GitHub で見る
npx skills add 21st-dev/agent-elements --skill agent-elements
110スター10フォークリポジトリの最終プッシュ

このスキルについて

Use whenever the user wants to build or modify a chat, agent, or tool-calling UI in a React 19 + Tailwind v4 project — especially if the code imports from `@/components/agent-elements/*` or the project has that folder on disk. Triggers: "agent chat", "tool call UI", "streaming chat", "plan approval", "AgentChat", "InputBar", "tool renderer", mentions of Agent Elements, or requests to add a new agent surface with shadcn. Do NOT use for plain chat UIs that don't need tool/plan/approval cards, or for projects already committed to a different agent UI kit.

おすすめする理由

Summarized from the original 21st-dev/agent-elements SKILL.md by 21st.dev; the original upstream instructions were used.

役立つこと

  • Use this workflow when the task matches the original Agent Elements skill instructions.

使う前に

  • Read the original SKILL.md and referenced files in 21st-dev/agent-elements.

資料・参照元

元の資料は以下のリンクから確認できます。実践のヒントは SkillHey による編集上の提案です。