為論文和部落格文章創建高品質的動畫解釋視覺效果。當使用者想要透過互動式 Web 動畫視覺化概念、流程、資料或想法時使用。觸發諸如“創建視覺效果”、“動畫化這個概念”、“製作解釋器”、“可視化這個想法”、“用圖表表示這個過程”、“顯示這個數據”等請求，或者當論文內容受益於視覺解釋時。處理抽象概念（心理模型、框架）、技術流程（演算法、系統）和資料視覺化（趨勢、比較）。輸出直接嵌入網頁內容的獨立 HTML/CSS/JS。
透過命令列快速安裝 explainer-visuals AI 技能到你的開發環境
來源：petekp/agent-skills。
Create animated, interactive visuals that make complex ideas intuitive.
Great explainer visuals don't just illustrate—they reveal. They show the structure hidden in complexity, the motion implicit in static descriptions, the relationships that words struggle to convey.
Before creating any visual, conduct a brief discovery interview using AskUserQuestion. Understand not just WHAT to visualize, but WHY this idea needs visual treatment.
為論文和部落格文章創建高品質的動畫解釋視覺效果。當使用者想要透過互動式 Web 動畫視覺化概念、流程、資料或想法時使用。觸發諸如“創建視覺效果”、“動畫化這個概念”、“製作解釋器”、“可視化這個想法”、“用圖表表示這個過程”、“顯示這個數據”等請求，或者當論文內容受益於視覺解釋時。處理抽象概念（心理模型、框架）、技術流程（演算法、系統）和資料視覺化（趨勢、比較）。輸出直接嵌入網頁內容的獨立 HTML/CSS/JS。 來源：petekp/agent-skills。
為搜尋與 AI 引用準備的穩定欄位與指令。
npx skills add https://github.com/petekp/agent-skills --skill explainer-visuals為論文和部落格文章創建高品質的動畫解釋視覺效果。當使用者想要透過互動式 Web 動畫視覺化概念、流程、資料或想法時使用。觸發諸如“創建視覺效果”、“動畫化這個概念”、“製作解釋器”、“可視化這個想法”、“用圖表表示這個過程”、“顯示這個數據”等請求，或者當論文內容受益於視覺解釋時。處理抽象概念（心理模型、框架）、技術流程（演算法、系統）和資料視覺化（趨勢、比較）。輸出直接嵌入網頁內容的獨立 HTML/CSS/JS。 來源：petekp/agent-skills。
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/petekp/agent-skills --skill explainer-visuals 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/petekp/agent-skills