Agent Elements
21st-dev/agent-elements/skills/agent-elements作者 21st-devb04b36cb6381a1dd1a0e86cc7c90564ddcd56d37無授權條款104 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫5 個月前更新
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.
新增到 SourceWeft 工作區
- 在儀表板中開啟該技能，並將它新增到工作區。
- 為需要使用它的對話啟用該技能。
該技能僅含說明：不附帶任何可執行的腳本。
新增到 SourceWeft系統會先要求你登入，然後直接帶你回到這個技能。
讓你的代理程式來安裝
把這段提示詞貼上到 Claude Code、Codex、Cursor 或其他能執行命令的代理程式中，也可以貼上到 SourceWeft 對話裡。代理程式會閱讀這個技能的安裝說明，向你展示它的來源、授權條款和腳本情況，在你同意後用 SourceWeft CLI 安裝。
閱讀 https://sourceweft.com/skills/gh-21st-dev-agent-elements-agent-elements-skills-agent-elements-5e53d706b37d0787/install.md 中的說明，按說明安裝這個技能。安裝前先告訴我它的來源、授權條款以及是否附帶腳本，等我確認。修改我電腦上的其他任何內容之前也要先問我。用命令列自行安裝
適用於 Claude Code、Codex、Cursor 及其他本機代理程式。SourceWeft CLI 會從原始碼儲存庫中取得此處掃描過的那次提交，並根據掃描時記錄的雜湊值逐一驗證每個檔案。只要有任何不一致，就不會寫入任何內容。
npx @sourceweft/cli skills install @21st-dev/agent-elements新增 --agent claude-code、codex、cursor 或 universal 來選擇安裝給哪個代理程式（預設為 Claude Code）。
上游安裝器——未經 SourceWeft 驗證
開源的 skills 安裝器會取得同一個固定的提交，但不會根據 SourceWeft 記錄的雜湊值驗證檔案。
npx skills add https://github.com/21st-dev/agent-elements/tree/b04b36cb6381a1dd1a0e86cc7c90564ddcd56d37/skills/agent-elements來源與署名
來源：21st-dev/agent-elements位於skills/agent-elements提交b04b36c
授權條款： 無授權條款
內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。
更多AI & Agents技能
Discernment Nudge
anthropics
在實質回答後附加 2-3 個具體追問，協助使用者查核事實、推理與缺少的背景。
Ppt Template Creator
anthropics
將使用者的 PowerPoint 範本轉換為可重用的技能，用來產生品牌簡報。
Skill Development
anthropics
指導建立 Claude Code 外掛技能，涵蓋結構、描述、漸進式揭露與驗證。
Plugin Structure
anthropics
說明 Claude Code 外掛的結構、資訊清單與元件配置方式。
Command Development
anthropics
指導建立 Claude Code 斜線命令，涵蓋結構、YAML frontmatter、參數與外掛功能。
Claude Md Improver
anthropics
稽核儲存庫中的 CLAUDE.md 檔案、評估其品質，並在取得核准後套用針對性的改進。