[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JFCVPX3913CFAS6QQJ33ZB":3,"skill-same:01M6JFCVPX3913CFAS6QQJ33ZB":81},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":27,"publishedAt":48,"linkOnly":49,"markdownContent":50,"markdownBody":51,"frontMatter":52,"refName":59,"commitSha":60,"skillDirectory":61,"forksCount":62,"repositoryHtmlUrl":63,"repositoryHomepageUrl":64,"ownerHtmlUrl":65,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":66,"install":67,"resources":80},"01M6JFCVPX3913CFAS6QQJ33ZB","agentic-webdesign-agent-elements",null,"Use 21st.dev Agent Elements — 25 shadcn\u002Fui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.","S3YED\u002Fappie-kit","S3YED","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F62743867?v=4","01M6JBKBRRVP6KMS0VWZ27T3R6","01M6JBKBX0KG30284PW1DBYJT1",14,"MIT","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-agent-elements\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47],"agentic","agentic webdesign agent elements","webdesign","elements","registry","search","streaming","open source","open","Bash","plan","subagent","edit","install","components","input","lock","source","ai agent","MCP","2026-11-10 10:12:30",false,"---\nname: agentic-webdesign-agent-elements\ndescription: Use 21st.dev Agent Elements — 25 shadcn\u002Fui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.\ntags: [agentic-webdesign, agent-ui, shadcn, 21st-dev, tool-cards]\n---\n\n# Agent Elements — 21st.dev Agent UI Components\n\n## What it is\n\n25 open-source shadcn\u002Fui components designed for building AI agent interfaces. Tool cards render agent actions (bash, file edits, searches, plans, sub-agents) as rich UI cards with streaming, diffs, and approval flows — not just plain text.\n\n**GitHub:** https:\u002F\u002Fgithub.com\u002F21st-dev\u002Fagent-elements\n**Docs:** https:\u002F\u002Fagent-elements.21st.dev\n**Stack:** React 19, Tailwind v4, Base UI, Motion, shadcn\u002Fui\n\n## When to use\n\nUse Agent Elements when building:\n- Agent chat interfaces (coding agents, assistants, chatbots that use tools)\n- Any UI where an AI agent executes bash commands, edits files, searches, plans, spawns sub-agents\n- Approval-based workflows (diff review, plan confirmation)\n\nDo NOT use for simple chat-only interfaces — plain shadcn\u002Fui chat components suffice.\n\n## Components\n\n### Chat surface\n- `AgentChat` — drop-in chat shell with MessageList + InputBar, tool dispatch, empty state\n- `MessageList` — streaming-aware, scroll-anchored, keyboard-friendly\n- `Markdown` — safe streaming markdown rendering\n\n### Input\n- `InputBar` — composer with mode\u002Fmodel selection, attachments, send\n- `ModeSelector` — toggle plan\u002Fbuild\u002Fask modes\n- `ModelPicker` — per-turn model selection\n- `AttachmentButton`, `FileAttachment` — drag-and-drop files\n\n### Tool cards (the main value)\n- `BashTool` — streams stdout as it arrives, shows exit code\n- `EditTool` — real unified diff with approve\u002Freject affordances (Claude Code pattern)\n- `SearchTool` — renders search results\n- `TodoTool` — renders task lists\n- `PlanTool` — structured plan with accept\u002Fredirect\n- `SubagentTool` — visualises nested agent delegation\n- `McpTool` — MCP server tool invocations\n- `ThinkingTool` — renders thinking\u002Freasoning output\n- `QuestionTool` — clarifying questions (single\u002Fmulti\u002Ffree-text)\n- `ToolGroup` — groups related tool calls\n- `GenericTool` — fallback for custom tools\n\n### Streaming indicators\n- `TextShimmer` — animated \"generating\" text\n- `SpiralLoader` — spinner\n\n## Installation\n\n```bash\n# Full chat surface (installs all transitive dependencies)\nnpx shadcn@latest add https:\u002F\u002Fagent-elements.21st.dev\u002Fr\u002Fagent-chat.json\n\n# Individual tool cards\nnpx shadcn@latest add https:\u002F\u002Fagent-elements.21st.dev\u002Fr\u002Fedit-tool.json\nnpx shadcn@latest add https:\u002F\u002Fagent-elements.21st.dev\u002Fr\u002Fbash-tool.json\nnpx shadcn@latest add https:\u002F\u002Fagent-elements.21st.dev\u002Fr\u002Fplan-tool.json\n\n# Teach your coding agent to use Agent Elements\nnpx skills add 21st-dev\u002Fagent-elements\n```\n\nFiles land in `components\u002Fagent-elements\u002F`. You own the code — no npm package, no runtime dependency on 21st.dev.\n\n## Usage with Vercel AI SDK\n\n```tsx\n\"use client\";\nimport { AgentChat } from \"@\u002Fcomponents\u002Fagent-elements\u002Fagent-chat\";\nimport { BashTool } from \"@\u002Fcomponents\u002Fagent-elements\u002Ftools\u002Fbash-tool\";\nimport { EditTool } from \"@\u002Fcomponents\u002Fagent-elements\u002Ftools\u002Fedit-tool\";\nimport { SearchTool } from \"@\u002Fcomponents\u002Fagent-elements\u002Ftools\u002Fsearch-tool\";\nimport { useChat } from \"@ai-sdk\u002Freact\";\n\nexport default function Chat() {\n  const { messages, status, sendMessage, stop } = useChat();\n\n  return (\n    \u003CAgentChat\n      messages={messages}\n      status={status}\n      onSend={({ content }) => sendMessage({ text: content })}\n      onStop={stop}\n      toolRenderers={{\n        Bash: BashTool,\n        Edit: EditTool,\n        Write: EditTool,\n        Search: SearchTool,\n      }}\n    \u002F>\n  );\n}\n```\n\n## Architecture pattern\n\nThe key insight: map your agent's tool calls to tool card renderers via a `toolRenderers` map. Each renderer receives the tool's `input`\u002F`args`, `output`\u002F`result`, and `state` (call, partial-call, result). Renderers handle their own loading, streaming, and completion states.\n\n## Pitfalls\n\n- Not an npm package — installs via shadcn CLI into your project. You own and maintain the code.\n- Requires Tailwind v4 and shadcn\u002Fui already set up.\n- Tool cards expect the Vercel AI SDK `UIMessage` shape or compatible adapter.\n- The agent-elements skill (`npx skills add 21st-dev\u002Fagent-elements`) must be installed for coding agents to use the components correctly — otherwise they hallucinate props.\n\n## Quality\n\nProduction-ready. MIT licensed. 77+ GitHub stars. Built by the 21st.dev team (@Ibelick, @serafimcloud). Part of the 21st.dev Agent SDK ecosystem. Computer-use card (screenshot + click sequences) is in development.\n","# Agent Elements — 21st.dev Agent UI Components\n\n## What it is\n\n25 open-source shadcn\u002Fui components designed for building AI agent interfaces. Tool cards render agent actions (bash, file edits, searches, plans, sub-agents) as rich UI cards with streaming, diffs, and approval flows — not just plain text.\n\n**GitHub:** https:\u002F\u002Fgithub.com\u002F21st-dev\u002Fagent-elements\n**Docs:** https:\u002F\u002Fagent-elements.21st.dev\n**Stack:** React 19, Tailwind v4, Base UI, Motion, shadcn\u002Fui\n\n## When to use\n\nUse Agent Elements when building:\n- Agent chat interfaces (coding agents, assistants, chatbots that use tools)\n- Any UI where an AI agent executes bash commands, edits files, searches, plans, spawns sub-agents\n- Approval-based workflows (diff review, plan confirmation)\n\nDo NOT use for simple chat-only interfaces — plain shadcn\u002Fui chat components suffice.\n\n## Components\n\n### Chat surface\n- `AgentChat` — drop-in chat shell with MessageList + InputBar, tool dispatch, empty state\n- `MessageList` — streaming-aware, scroll-anchored, keyboard-friendly\n- `Markdown` — safe streaming markdown rendering\n\n### Input\n- `InputBar` — composer with mode\u002Fmodel selection, attachments, send\n- `ModeSelector` — toggle plan\u002Fbuild\u002Fask modes\n- `ModelPicker` — per-turn model selection\n- `AttachmentButton`, `FileAttachment` — drag-and-drop files\n\n### Tool cards (the main value)\n- `BashTool` — streams stdout as it arrives, shows exit code\n- `EditTool` — real unified diff with approve\u002Freject affordances (Claude Code pattern)\n- `SearchTool` — renders search results\n- `TodoTool` — renders task lists\n- `PlanTool` — structured plan with accept\u002Fredirect\n- `SubagentTool` — visualises nested agent delegation\n- `McpTool` — MCP server tool invocations\n- `ThinkingTool` — renders thinking\u002Freasoning output\n- `QuestionTool` — clarifying questions (single\u002Fmulti\u002Ffree-text)\n- `ToolGroup` — groups related tool calls\n- `GenericTool` — fallback for custom tools\n\n### Streaming indicators\n- `TextShimmer` — animated \"generating\" text\n- `SpiralLoader` — spinner\n\n## Installation\n\n```bash\n# Full chat surface (installs all transitive dependencies)\nnpx shadcn@latest add https:\u002F\u002Fagent-elements.21st.dev\u002Fr\u002Fagent-chat.json\n\n# Individual tool cards\nnpx shadcn@latest add https:\u002F\u002Fagent-elements.21st.dev\u002Fr\u002Fedit-tool.json\nnpx shadcn@latest add https:\u002F\u002Fagent-elements.21st.dev\u002Fr\u002Fbash-tool.json\nnpx shadcn@latest add https:\u002F\u002Fagent-elements.21st.dev\u002Fr\u002Fplan-tool.json\n\n# Teach your coding agent to use Agent Elements\nnpx skills add 21st-dev\u002Fagent-elements\n```\n\nFiles land in `components\u002Fagent-elements\u002F`. You own the code — no npm package, no runtime dependency on 21st.dev.\n\n## Usage with Vercel AI SDK\n\n```tsx\n\"use client\";\nimport { AgentChat } from \"@\u002Fcomponents\u002Fagent-elements\u002Fagent-chat\";\nimport { BashTool } from \"@\u002Fcomponents\u002Fagent-elements\u002Ftools\u002Fbash-tool\";\nimport { EditTool } from \"@\u002Fcomponents\u002Fagent-elements\u002Ftools\u002Fedit-tool\";\nimport { SearchTool } from \"@\u002Fcomponents\u002Fagent-elements\u002Ftools\u002Fsearch-tool\";\nimport { useChat } from \"@ai-sdk\u002Freact\";\n\nexport default function Chat() {\n  const { messages, status, sendMessage, stop } = useChat();\n\n  return (\n    \u003CAgentChat\n      messages={messages}\n      status={status}\n      onSend={({ content }) => sendMessage({ text: content })}\n      onStop={stop}\n      toolRenderers={{\n        Bash: BashTool,\n        Edit: EditTool,\n        Write: EditTool,\n        Search: SearchTool,\n      }}\n    \u002F>\n  );\n}\n```\n\n## Architecture pattern\n\nThe key insight: map your agent's tool calls to tool card renderers via a `toolRenderers` map. Each renderer receives the tool's `input`\u002F`args`, `output`\u002F`result`, and `state` (call, partial-call, result). Renderers handle their own loading, streaming, and completion states.\n\n## Pitfalls\n\n- Not an npm package — installs via shadcn CLI into your project. You own and maintain the code.\n- Requires Tailwind v4 and shadcn\u002Fui already set up.\n- Tool cards expect the Vercel AI SDK `UIMessage` shape or compatible adapter.\n- The agent-elements skill (`npx skills add 21st-dev\u002Fagent-elements`) must be installed for coding agents to use the components correctly — otherwise they hallucinate props.\n\n## Quality\n\nProduction-ready. MIT licensed. 77+ GitHub stars. Built by the 21st.dev team (@Ibelick, @serafimcloud). Part of the 21st.dev Agent SDK ecosystem. Computer-use card (screenshot + click sequences) is in development.\n",{"name":5,"tags":53,"description":7},[54,55,56,57,58],"agentic-webdesign","agent-ui","shadcn","21st-dev","tool-cards","master","8ec37df6d71fb664ea19d32c079e7d3ff931a8e0","skills\u002Fweb-design\u002Fagentic-webdesign-agent-elements",3,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit","https:\u002F\u002Fweblyfe.ai","https:\u002F\u002Fgithub.com\u002FS3YED","2026-08-27 01:54:02",{"source":8,"skillName":5,"commands":68,"prompt":78,"zipAvailable":79},[69,72,75],{"tool":70,"command":71},"npx","npx skills add S3YED\u002Fappie-kit --skill agentic-webdesign-agent-elements",{"tool":73,"command":74},"bunx","bunx skills add S3YED\u002Fappie-kit --skill agentic-webdesign-agent-elements",{"tool":76,"command":77},"pnpm","pnpm dlx skills add S3YED\u002Fappie-kit --skill agentic-webdesign-agent-elements","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-agent-elements\u002FSKILL.md",true,[],[82,114,142,173,198,228],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":95,"publishedAt":48},"01M6JFD4M6N4DSGC7TXEJ5R3J2","ai-music","AI music generation and audio tools: HeartMuLa lyrics-to-music generation, songwriting craft (+ Suno prompts), and audio spectrogram\u002Ffeature visualization.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fwethlete\u002Fai-music\u002FSKILL.md",[88,91,94],{"categoryNo":89,"categoryName":90,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":92,"categoryName":93,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113],"music","ai music","humanizer","visualization","Tools","Audio","hermes","hermes agent","songwriting","suno","lyrics","prompts","heartmula","craft","generation","feature","ai music generation","music generation",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":124,"publishedAt":48},"01M6JFCZE4XNFQFMNZDHKHT5V5","agentic-webdesign-design-system-ingestion","Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-design-system-ingestion\u002FSKILL.md",[120,123],{"categoryNo":121,"categoryName":122,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},[125,28,126,127,128,30,129,42,130,131,132,133,134,135,136,137,138,139,140,141],"design","design system","system","ingestion","agentic webdesign design system ingestion","generate","design systems","website","ui","Tailwind","bolt","lovable","v0","design-system","wed","design system components","appie",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":146,"categories":147,"keywords":152,"publishedAt":48},"01M6JFCQC7H65M9QJ6TRE71BS1","vercel-deployment","Deploy static sites and frontends to Vercel — handles both CLI and REST API paths, including the CLI token sanitization workaround.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fvercel-deployment\u002FSKILL.md",[148,151],{"categoryNo":149,"categoryName":150,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172],"deployment","vercel deployment","vercel","macos","cli","linux","windows","deploy","vercel deploy","REST","api","site","deploy to vercel","token","rest api","host","sites","paths","sanitization","static site",{"skillNo":174,"name":175,"nameZh":6,"description":176,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":177,"categories":178,"keywords":180,"publishedAt":48},"01M6JFCM4SMTXBM5A01BK2YQG1","software-quality-workflows","Umbrella workflow for TDD, debugging, code simplification, spikes, pre-commit review, and debugger-assisted investigation.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fsoftware-quality-workflows\u002FSKILL.md",[179],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197],"workflows","quality","software","software quality workflows","review","tdd","workflow","commit","debugging","code","debugger","pre-commit","investigation","code simplification","user","simplification","for",{"skillNo":199,"name":200,"nameZh":6,"description":201,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":202,"categories":203,"keywords":211,"publishedAt":48},"01M6JFCGD0M6CEATY01W7YN6DB","react-component-refactoring","Safely refactor large React components into smaller, maintainable pieces using proven patterns","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Freact-component-refactoring\u002FSKILL.md",[204,207,210],{"categoryNo":205,"categoryName":206,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":208,"categoryName":209,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[212,213,214,215,216,217,218,219,156,220,221,42,222,159,223,190,224,225,226,227],"react","component","refactoring","component refactoring","react component","react component refactoring","frontend","writing","safe","typescript","react components","modular","refactor","simplify","patterns","test-driven-development",{"skillNo":229,"name":230,"nameZh":6,"description":231,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":232,"categories":233,"keywords":235,"publishedAt":48},"01M6JFCC78QZZNDYKTB3VN7HQQ","hermes-gateway-troubleshooting","Troubleshoot Hermes Agent gateway\u002Fruntime issues: messaging sessions, model\u002Fprovider switches, auth, logs, and state.db consistency.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fhermes-gateway-troubleshooting\u002FSKILL.md",[234],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[236,237,102,238,156,239,240,159,189,241,242,243,244,245,246,247,248,249,250,141],"gateway","troubleshooting","hermes gateway troubleshooting","troubleshoot","auth","issues","messaging","logs","model","telegram","commands","db","systematic","hermes-agent","systematic-debugging"]