--- name: SVG version: 1.1.0 changelog: "Restructured with auxiliary files for focused reference" description: Create and optimize SVG graphics with proper viewBox, accessibility, and CSS styling. metadata: {"clawdbot":{"emoji":"📐","requires":{},"os":["linux","darwin","win32"]}} ---

Quick Reference

| Topic | File | Key Trap | |-------|------|----------| | viewBox & Scaling | viewbox.md | Missing viewBox = no scaling | | Screen Readers | accessibility.md | role="img" + title as first child | | SVGO Config | optimization.md | Default removes viewBox/title | | Inline vs img | embedding.md | cannot be styled with CSS | | currentColor | styling.md | Hardcoded fills block theming |

Critical Defaults

<!-- Minimum viable SVG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
  <path d="..."/>
</svg>

Common Mistakes Checklist

[ ] viewBox present (not just width/height)
[ ] Coordinates within viewBox bounds
[ ] No hardcoded fill="#000" if theming needed
[ ] role="img" + </code> for informative SVGs</li><li>[ ] <code>aria-hidden="true"</code> for decorative SVGs</li><li>[ ] Unique IDs across all inline SVGs on page</li><li>[ ] xmlns included for external <code>.svg</code> files</li></ul> <h2>Memory Storage</h2> <p>User preferences persist in <code>~/svg/memory.md</code>. Create on first use.</p> <pre><code class="language-markdown">## User Preferences   ## Accessibility Mode  ## Optimization   ## Icon Defaults  </code></pre> <p><em>Empty sections = use skill defaults. Learns user preferences over time.</em></p></div></div><div class="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 space-y-4"><div><h2 class="text-base font-semibold text-neutral-900 dark:text-white">Prompt 示例</h2><p class="text-xs text-neutral-400 dark:text-neutral-500 mt-1">安装 SVG 后，可以对 AI 说这些话来触发它</p></div><div class="space-y-3"><div class="rounded-xl border border-neutral-100 dark:border-neutral-800 overflow-hidden"><div class="flex items-start gap-3 px-4 py-3 bg-neutral-50 dark:bg-neutral-800/50"><span class="flex-shrink-0 w-5 h-5 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center text-[10px] font-bold text-blue-600 dark:text-blue-400 mt-0.5">U</span><p class="text-sm text-neutral-700 dark:text-neutral-300">Help me get started with SVG</p></div><div class="flex items-start gap-3 px-4 py-3"><span class="flex-shrink-0 w-5 h-5 rounded-full bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center text-[10px] font-bold text-emerald-600 dark:text-emerald-400 mt-0.5">A</span><p class="text-sm text-neutral-500 dark:text-neutral-400">Explains what SVG does, walks through the setup, and runs a quick demo based on your current project</p></div></div><div class="rounded-xl border border-neutral-100 dark:border-neutral-800 overflow-hidden"><div class="flex items-start gap-3 px-4 py-3 bg-neutral-50 dark:bg-neutral-800/50"><span class="flex-shrink-0 w-5 h-5 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center text-[10px] font-bold text-blue-600 dark:text-blue-400 mt-0.5">U</span><p class="text-sm text-neutral-700 dark:text-neutral-300">Use SVG to create and optimize SVG graphics with proper viewBox, accessibility...</p></div><div class="flex items-start gap-3 px-4 py-3"><span class="flex-shrink-0 w-5 h-5 rounded-full bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center text-[10px] font-bold text-emerald-600 dark:text-emerald-400 mt-0.5">A</span><p class="text-sm text-neutral-500 dark:text-neutral-400">Invokes SVG with the right parameters and returns the result directly in the conversation</p></div></div><div class="rounded-xl border border-neutral-100 dark:border-neutral-800 overflow-hidden"><div class="flex items-start gap-3 px-4 py-3 bg-neutral-50 dark:bg-neutral-800/50"><span class="flex-shrink-0 w-5 h-5 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center text-[10px] font-bold text-blue-600 dark:text-blue-400 mt-0.5">U</span><p class="text-sm text-neutral-700 dark:text-neutral-300">What can I do with SVG in my data & analytics workflow?</p></div><div class="flex items-start gap-3 px-4 py-3"><span class="flex-shrink-0 w-5 h-5 rounded-full bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center text-[10px] font-bold text-emerald-600 dark:text-emerald-400 mt-0.5">A</span><p class="text-sm text-neutral-500 dark:text-neutral-400">Lists the top use cases for SVG, with example commands for each scenario</p></div></div><div class="rounded-xl border border-neutral-100 dark:border-neutral-800 overflow-hidden"><template id="P:4"></template><template id="P:5"></template></div></div></div><div class="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 space-y-3"><h2 class="text-base font-semibold text-neutral-900 dark:text-white">常见问题</h2><details class="group rounded-xl border border-neutral-100 dark:border-neutral-800"><summary class="flex items-center justify-between px-4 py-3 cursor-pointer text-sm font-medium text-neutral-800 dark:text-neutral-200 list-none">如何安装 SVG？<span class="text-neutral-400 group-open:rotate-180 transition-transform ml-2 flex-shrink-0">▾</span></summary><p class="px-4 pb-3 text-sm text-neutral-500 dark:text-neutral-400 leading-relaxed">将技能文件夹放到 ~/.claude/skills/svg/ 目录（个人级，所有项目可用），或 .claude/skills/svg/（项目级）。重启 AI 客户端后，用 /svg 主动调用，或让 AI 根据上下文自动发现并使用。</p></details><details class="group rounded-xl border border-neutral-100 dark:border-neutral-800"><summary class="flex items-center justify-between px-4 py-3 cursor-pointer text-sm font-medium text-neutral-800 dark:text-neutral-200 list-none">SVG 支持哪些 AI 平台？<span class="text-neutral-400 group-open:rotate-180 transition-transform ml-2 flex-shrink-0">▾</span></summary><p class="px-4 pb-3 text-sm text-neutral-500 dark:text-neutral-400 leading-relaxed">SVG 支持 Claude、Cursor、OpenClaw，可与这些 AI 平台无缝集成，扩展其能力。</p></details><details class="group rounded-xl border border-neutral-100 dark:border-neutral-800"><summary class="flex items-center justify-between px-4 py-3 cursor-pointer text-sm font-medium text-neutral-800 dark:text-neutral-200 list-none">SVG 是免费的吗？<span class="text-neutral-400 group-open:rotate-180 transition-transform ml-2 flex-shrink-0">▾</span></summary><p class="px-4 pb-3 text-sm text-neutral-500 dark:text-neutral-400 leading-relaxed">SVG 可免费安装使用。请查阅仓库了解许可证信息。</p></details><details class="group rounded-xl border border-neutral-100 dark:border-neutral-800"><summary class="flex items-center justify-between px-4 py-3 cursor-pointer text-sm font-medium text-neutral-800 dark:text-neutral-200 list-none">SVG 有什么功能？<span class="text-neutral-400 group-open:rotate-180 transition-transform ml-2 flex-shrink-0">▾</span></summary><p class="px-4 pb-3 text-sm text-neutral-500 dark:text-neutral-400 leading-relaxed">Create and optimize SVG graphics with proper viewBox, accessibility, and CSS styling.</p></details><details class="group rounded-xl border border-neutral-100 dark:border-neutral-800"><summary class="flex items-center justify-between px-4 py-3 cursor-pointer text-sm font-medium text-neutral-800 dark:text-neutral-200 list-none">SVG 属于哪个分类？<span class="text-neutral-400 group-open:rotate-180 transition-transform ml-2 flex-shrink-0">▾</span></summary><p class="px-4 pb-3 text-sm text-neutral-500 dark:text-neutral-400 leading-relaxed">SVG 属于「Data & Analytics」分类，该分类的技能帮助 AI 智能体在此领域执行专业任务。</p></details></div><div class="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 space-y-3"><h2 class="text-base font-semibold text-neutral-900 dark:text-white">使用场景</h2><div class="space-y-2"><a class="flex items-center gap-3 px-4 py-3 rounded-xl border border-neutral-100 dark:border-neutral-800 hover:border-blue-300 dark:hover:border-blue-700 hover:bg-blue-50/50 dark:hover:bg-blue-950/20 transition-all group" href="/skills/svg/use-cases/getting-started"><span class="w-1.5 h-1.5 rounded-full bg-blue-400 flex-shrink-0 group-hover:bg-blue-500 transition-colors"></span><span class="text-sm text-neutral-700 dark:text-neutral-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">Getting Started with SVG</span><span class="ml-auto text-neutral-300 dark:text-neutral-600 group-hover:text-blue-400 transition-colors text-xs">→</span></a><a class="flex items-center gap-3 px-4 py-3 rounded-xl border border-neutral-100 dark:border-neutral-800 hover:border-blue-300 dark:hover:border-blue-700 hover:bg-blue-50/50 dark:hover:bg-blue-950/20 transition-all group" href="/skills/svg/use-cases/workflow-automation"><span class="w-1.5 h-1.5 rounded-full bg-blue-400 flex-shrink-0 group-hover:bg-blue-500 transition-colors"></span><span class="text-sm text-neutral-700 dark:text-neutral-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">Automate Data & Analytics Workflows with SVG</span><span class="ml-auto text-neutral-300 dark:text-neutral-600 group-hover:text-blue-400 transition-colors text-xs">→</span></a><a class="flex items-center gap-3 px-4 py-3 rounded-xl border border-neutral-100 dark:border-neutral-800 hover:border-blue-300 dark:hover:border-blue-700 hover:bg-blue-50/50 dark:hover:bg-blue-950/20 transition-all group" href="/skills/svg/use-cases/team-collaboration"><span class="w-1.5 h-1.5 rounded-full bg-blue-400 flex-shrink-0 group-hover:bg-blue-500 transition-colors"></span><span class="text-sm text-neutral-700 dark:text-neutral-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">Team Collaboration with SVG</span><span class="ml-auto text-neutral-300 dark:text-neutral-600 group-hover:text-blue-400 transition-colors text-xs">→</span></a></div></div><div><div class="flex items-center justify-between mb-4"><h2 class="text-base font-semibold text-neutral-900 dark:text-white">同类技能推荐</h2><a class="text-xs text-blue-500 hover:text-blue-600 transition-colors" href="/zh/skills?category=data-analytics">查看全部 Data & Analytics →</a></div><div class="grid grid-cols-1 sm:grid-cols-2 gap-3"><a class="group block" href="/zh/skills/weather"><div class="relative flex flex-col gap-3 rounded-xl border border-neutral-200 bg-white p-4 hover:border-blue-300 hover:shadow-md transition-all duration-200 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:border-neutral-700"><div class="flex items-start justify-between gap-2"><div class="flex-1 min-w-0"><div class="flex items-center gap-1.5 flex-wrap"><h3 class="font-semibold text-sm text-neutral-900 dark:text-neutral-100 group-hover:text-blue-600 transition-colors">Weather</h3><span class="inline-flex items-center font-semibold tracking-wide uppercase rounded bg-gradient-to-r from-emerald-600 to-teal-600 text-white dark:from-emerald-500 dark:to-teal-500 shadow-sm gap-0.5 text-[10px] px-1.5 py-0.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check w-2.5 h-2.5"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>严选</span></div><span class="text-xs text-neutral-400 dark:text-neutral-500">Data & Analytics</span></div></div><p class="text-xs text-neutral-600 dark:text-neutral-400 line-clamp-2 leading-relaxed">Get current weather and forecasts (no API key required).</p><div class="flex items-center justify-between pt-1 border-t border-neutral-100 dark:border-neutral-800"><div class="flex gap-1 flex-wrap"><span class="text-[10px] px-1.5 py-0.5 rounded-md bg-neutral-50 border border-neutral-200 text-neutral-500 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">Claude</span><span class="text-[10px] px-1.5 py-0.5 rounded-md bg-neutral-50 border border-neutral-200 text-neutral-500 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">Cursor</span><span class="text-[10px] px-1.5 py-0.5 rounded-md bg-neutral-50 border border-neutral-200 text-neutral-500 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">OpenClaw</span></div><div class="flex items-center gap-2.5 text-neutral-400"><span class="flex items-center gap-0.5 text-[10px]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download w-3 h-3"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg>136.1k</span><span class="flex items-center gap-0.5 text-[10px]"><template id="P:6"></template>3.6k</span><template id="P:7"></template></div></div></div></a><template id="P:8"></template><template id="P:9"></template><template id="P:a"></template></div></div></div><script> (function() { try { var url = '/api/view?slug=' + encodeURIComponent("svg"); if (navigator.sendBeacon) { navigator.sendBeacon(url); } else { fetch(url, { method: 'POST', keepalive: true }).catch(function(){}); } } catch(e) {} })(); </script></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>self.__next_f.push([1,"38:[\"$\",\"circle\",\"1v7zrd\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"3\"}]\n39:[\"$\",\"span\",null,{\"className\":\"flex items-center gap-0.5 text-[10px] text-amber-500\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-star w-3 h-3 fill-amber-400\",\"children\":[[\"$\",\"path\",\"r04s7s\",{\"d\":\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\"}],\"$undefined\"]}],\"567\"]}]\n3a:[\"$\",\"circle\",\"1v7zrd\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"3\"}]\n3b:[\"$\",\"span\",null,{\"className\":\"flex items-center gap-0.5 text-[10px] text-amber-500\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-star w-3 h-3 fill-amber-400\",\"children\":[[\"$\",\"path\",\"r04s7s\",{\"d\":\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\"}],\"$undefined\"]}],\"216\"]}]\n3c:[\"$\",\"circle\",\"1v7zrd\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"3\"}]\n3d:[\"$\",\"span\",null,{\"className\":\"flex items-center gap-0.5 text-[10px] text-amber-500\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-star w-3 h-3 fill-amber-400\",\"children\":[[\"$\",\"path\",\"r04s7s\",{\"d\":\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\"}],\"$undefined\"]}],\"204\"]}]\n"])</script><div hidden id="S:4"><div class="flex items-start gap-3 px-4 py-3 bg-neutral-50 dark:bg-neutral-800/50"><span class="flex-shrink-0 w-5 h-5 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center text-[10px] font-bold text-blue-600 dark:text-blue-400 mt-0.5">U</span><p class="text-sm text-neutral-700 dark:text-neutral-300">Automate my data & analytics tasks using SVG</p></div></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"><div class="flex items-start gap-3 px-4 py-3"><span class="flex-shrink-0 w-5 h-5 rounded-full bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center text-[10px] font-bold text-emerald-600 dark:text-emerald-400 mt-0.5">A</span><p class="text-sm text-neutral-500 dark:text-neutral-400">Identifies repetitive steps in your workflow and sets up SVG to handle them automatically</p></div></div><script>$RS("S:5","P:5")</script><div hidden id="S:6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-3 h-3"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg></div><script>$RS("S:6","P:6")</script><div hidden id="S:7"><span class="flex items-center gap-0.5 text-[10px] text-amber-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-3 h-3 fill-amber-400"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>359</span></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"><a class="group block" href="/zh/skills/multi-search-engine"><div class="relative flex flex-col gap-3 rounded-xl border border-neutral-200 bg-white p-4 hover:border-blue-300 hover:shadow-md transition-all duration-200 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:border-neutral-700"><div class="flex items-start justify-between gap-2"><div class="flex-1 min-w-0"><div class="flex items-center gap-1.5 flex-wrap"><h3 class="font-semibold text-sm text-neutral-900 dark:text-neutral-100 group-hover:text-blue-600 transition-colors">Multi Search Engine</h3><span class="inline-flex items-center font-semibold tracking-wide uppercase rounded bg-gradient-to-r from-emerald-600 to-teal-600 text-white dark:from-emerald-500 dark:to-teal-500 shadow-sm gap-0.5 text-[10px] px-1.5 py-0.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check w-2.5 h-2.5"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>严选</span></div><span class="text-xs text-neutral-400 dark:text-neutral-500">Data & Analytics</span></div></div><p class="text-xs text-neutral-600 dark:text-neutral-400 line-clamp-2 leading-relaxed">Multi search engine integration with 16 engines (7 CN + 9 Global). Supports advanced search operators, time filters, site search, privacy engines, and Wolfra...</p><div class="flex items-center justify-between pt-1 border-t border-neutral-100 dark:border-neutral-800"><div class="flex gap-1 flex-wrap"><span class="text-[10px] px-1.5 py-0.5 rounded-md bg-neutral-50 border border-neutral-200 text-neutral-500 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">Claude</span><span class="text-[10px] px-1.5 py-0.5 rounded-md bg-neutral-50 border border-neutral-200 text-neutral-500 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">Cursor</span><span class="text-[10px] px-1.5 py-0.5 rounded-md bg-neutral-50 border border-neutral-200 text-neutral-500 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">OpenClaw</span></div><div class="flex items-center gap-2.5 text-neutral-400"><span class="flex items-center gap-0.5 text-[10px]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download w-3 h-3"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg>122.0k</span><span class="flex items-center gap-0.5 text-[10px]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-3 h-3"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg>1.9k</span><span class="flex items-center gap-0.5 text-[10px] text-amber-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-3 h-3 fill-amber-400"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>567</span></div></div></div></a></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"><a class="group block" href="/zh/skills/openclaw-tavily-search"><div class="relative flex flex-col gap-3 rounded-xl border border-neutral-200 bg-white p-4 hover:border-blue-300 hover:shadow-md transition-all duration-200 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:border-neutral-700"><div class="flex items-start justify-between gap-2"><div class="flex-1 min-w-0"><div class="flex items-center gap-1.5 flex-wrap"><h3 class="font-semibold text-sm text-neutral-900 dark:text-neutral-100 group-hover:text-blue-600 transition-colors">Tavily 搜索</h3><span class="inline-flex items-center font-semibold tracking-wide uppercase rounded bg-gradient-to-r from-emerald-600 to-teal-600 text-white dark:from-emerald-500 dark:to-teal-500 shadow-sm gap-0.5 text-[10px] px-1.5 py-0.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check w-2.5 h-2.5"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>严选</span></div><span class="text-xs text-neutral-400 dark:text-neutral-500">Data & Analytics</span></div></div><p class="text-xs text-neutral-600 dark:text-neutral-400 line-clamp-2 leading-relaxed">Web search via Tavily API (alternative to Brave). Use when the user asks to search the web / look up sources / find links and Brave web_search is unavailable...</p><div class="flex items-center justify-between pt-1 border-t border-neutral-100 dark:border-neutral-800"><div class="flex gap-1 flex-wrap"><span class="text-[10px] px-1.5 py-0.5 rounded-md bg-neutral-50 border border-neutral-200 text-neutral-500 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">Claude</span><span class="text-[10px] px-1.5 py-0.5 rounded-md bg-neutral-50 border border-neutral-200 text-neutral-500 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">Cursor</span><span class="text-[10px] px-1.5 py-0.5 rounded-md bg-neutral-50 border border-neutral-200 text-neutral-500 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">OpenClaw</span></div><div class="flex items-center gap-2.5 text-neutral-400"><span class="flex items-center gap-0.5 text-[10px]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download w-3 h-3"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg>83.2k</span><span class="flex items-center gap-0.5 text-[10px]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-3 h-3"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg>1.3k</span><span class="flex items-center gap-0.5 text-[10px] text-amber-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-3 h-3 fill-amber-400"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>216</span></div></div></div></a></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"><a class="group block" href="/zh/skills/baidu-search"><div class="relative flex flex-col gap-3 rounded-xl border border-neutral-200 bg-white p-4 hover:border-blue-300 hover:shadow-md transition-all duration-200 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:border-neutral-700"><div class="flex items-start justify-between gap-2"><div class="flex-1 min-w-0"><div class="flex items-center gap-1.5 flex-wrap"><h3 class="font-semibold text-sm text-neutral-900 dark:text-neutral-100 group-hover:text-blue-600 transition-colors">Baidu web search</h3><span class="inline-flex items-center font-semibold tracking-wide uppercase rounded bg-gradient-to-r from-emerald-600 to-teal-600 text-white dark:from-emerald-500 dark:to-teal-500 shadow-sm gap-0.5 text-[10px] px-1.5 py-0.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check w-2.5 h-2.5"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>严选</span></div><span class="text-xs text-neutral-400 dark:text-neutral-500">Data & Analytics</span></div></div><p class="text-xs text-neutral-600 dark:text-neutral-400 line-clamp-2 leading-relaxed">Search the web using Baidu AI Search Engine (BDSE). Use for live information, documentation, or research topics.</p><div class="flex items-center justify-between pt-1 border-t border-neutral-100 dark:border-neutral-800"><div class="flex gap-1 flex-wrap"><span class="text-[10px] px-1.5 py-0.5 rounded-md bg-neutral-50 border border-neutral-200 text-neutral-500 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">Claude</span><span class="text-[10px] px-1.5 py-0.5 rounded-md bg-neutral-50 border border-neutral-200 text-neutral-500 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">Cursor</span><span class="text-[10px] px-1.5 py-0.5 rounded-md bg-neutral-50 border border-neutral-200 text-neutral-500 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">OpenClaw</span></div><div class="flex items-center gap-2.5 text-neutral-400"><span class="flex items-center gap-0.5 text-[10px]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download w-3 h-3"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg>79.7k</span><span class="flex items-center gap-0.5 text-[10px]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-3 h-3"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg>870</span><span class="flex items-center gap-0.5 text-[10px] text-amber-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-3 h-3 fill-amber-400"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>204</span></div></div></div></a></div><script>$RS("S:a","P:a")</script><script>$RC("B:1","S:1")</script></body></html>

SVG

安装

关于 SVG

Quick Reference

Critical Defaults

Common Mistakes Checklist