通過 magicpath-ai CLI 使用 MagicPath 來尋找、預覽、檢查、安裝、建立和編輯 UI 元件，並管理 MagicPath 技能。
MagicPath 是一套整合於 CLI 與開發環境中的 UI 元件管理與設計系統工具。它允許開發者透過 `magicpath-ai` 指令快速搜尋、預覽、檢查、安裝、建立及編輯 UI 元件。該技能特別適合用於 MagicPath 請求、設計稿或元件庫、個人或團隊專案、當前畫布專案或選取元件/圖片、主題設計系統、使用者/團隊技能、團隊成員與歸屬查詢、已安裝元件稽核，以及共用或檢視連結等場景。除了支援元件安裝與生產程式碼適應（針對 React/TypeScript 專案），還可開發響應式互動畫布元件（透過 `code start/submit`），並透過 `skills` 指令群組管理自訂技能。在具備內嵌瀏覽器的環境中，可透過分享連結保持 MagicPath 專案畫布開啟，方便視覺化協作。
npx skills add https://github.com/magicpathai/agent-skills/tree/main/skills/magicpathInstalled? Explore more 影像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
使用 MagicPath 可以透過 magicpath-ai 指令列介面來搜尋、預覽、檢查、安裝、建立和編輯 UI 元件，以及管理 MagicPath 技能。觸發條件包含：MagicPath 請求；設計稿或元件；個人或團隊專案；當前畫布專案或選取的元件/圖片；主題或設計系統；使用者/團隊技能；團隊、成員、擁有權、歸屬或誰處理了某件事；已安裝元件的稽核；以及分享/檢視連結。
此技能也適用於兩種工作流程方向：將 MagicPath React/TypeScript 元件透過 inspect/add 安裝到應用程式中，並將其調整為生產環境程式碼；透過 code start/submit 編寫/編輯響應式互動畫布元件；或透過 skills 指令群組建立、擷取、更新、匯入、刪除 MagicPath 技能。
當需要從本地路徑或 GitHub/GitLab/Bitbucket 儲存庫匯入或重新建立 UI 至 MagicPath 時，請使用此技能。在具備內嵌瀏覽器的宿主環境中，可透過分享網址保持 MagicPath 專案畫布開啟，以便進行視覺化工作。
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.