作者 199-biotechnologies · 199-biotechnologies/motion-dev-animations-skill
描述您想要的動作；取得以 60fps+ 運行速度的 Motion.dev 程式碼，具有彈簧物理、簡化運動支援且無佈局轉換。
Motion-dev-animations-skill 是一項 Claude 程式碼技能，可使用 Motion.dev（以前稱為 Framer Motion）編寫生產級動畫。 它會在提及動畫、滾動效果、Motion.dev、彈簧物理等時自動激活，並發出針對 60fps+、<50KB 捆綁影響、完全可訪問性（首選減少運動）和零 CLS 的代碼。 涵蓋入口動畫、滾動效果、手勢互動、微互動、版面動畫。
%APPDATA%\Claude\claude_desktop_config.json{
"mcpServers": {
"motion-dev-animations-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
"~/.claude/skills/motion-dev-animations"
],
"_inferred": false
}
}
}開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。
{
"mcpServers": {
"motion-dev-animations-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
"~/.claude/skills/motion-dev-animations"
],
"_inferred": false
}
}
}Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。
{
"mcpServers": {
"motion-dev-animations-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
"~/.claude/skills/motion-dev-animations"
],
"_inferred": false
}
}
}點擊 Cline 側欄中的 MCP Servers 圖示，然後選 "Edit Configuration"。
{
"mcpServers": {
"motion-dev-animations-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
"~/.claude/skills/motion-dev-animations"
],
"_inferred": false
}
}
}格式與 Claude Desktop 相同。重啟 Windsurf 生效。
{
"mcpServers": [
{
"name": "motion-dev-animations-skill",
"command": "git",
"args": [
"clone",
"https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
"~/.claude/skills/motion-dev-animations"
]
}
]
}Continue 使用伺服器物件陣列，而非映射。
{
"context_servers": {
"motion-dev-animations-skill": {
"command": {
"path": "git",
"args": [
"clone",
"https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
"~/.claude/skills/motion-dev-animations"
]
}
}
}
}加入 context_servers。Zed 儲存後熱重載。
claude mcp add motion-dev-animations-skill -- git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations一行命令搞定。用 claude mcp list 驗證，claude mcp remove 移除。
何時使用： 你的英雄感覺是靜態的，你想要一個精美的載入動畫。
結果： 一個在不犧牲可訪問性的情況下感覺還活著的英雄。
何時使用： 您的長格式登陸頁需要滾動展開的部分。
結果： 滾動體驗可增加深度而不會分散注意力。
何時使用： 產品卡片需要微互動打磨。
結果： 令人愉快的卡片交互，無需任何性能成本。
何時使用： 你的清單重新排序感覺很不和諧；你想要平滑的過渡。
結果： 重新排序感覺物理但尊重使用者的喜好。
Magic UI 用於預先建置元件，motion.dev 用於自訂位
審核運動以減少運動支持
Figma 到程式碼 + 動畫在一個流程中
| 工具 | 輸入參數 | 何時呼叫 | 成本 |
|---|---|---|---|
| motion-dev (SKILL) | describe the animation (element + intent + constraints) | 任何時候你想要動畫程式碼，尤其是。 具有可訪問性和效能限制 | 0 |
滾動時卡頓檢查您正在動畫變換，而不是佈局道具（寬度/頂部）。 謹慎使用 will-change。
Chrome DevTools → Performance → layout shift count減少運動時忽略動畫用 useReducedMotion 包裝並短路動畫變體。
System → Motion preferences → reduce motion; reload加入運動後的大束僅從“motion/react”匯入您需要的內容；避免重新出口所有東西。
Bundle analyzer on the chunks| 替代方案 | 何時用它替代 | 權衡 |
|---|---|---|
| magic-ui-mcp | 您需要預先建立的動畫元件，而不是自訂動作 | 客製化更少，採用速度更快 |
| cc-frontend-skill | 您需要一般的前端指導，而不是專門針對 Motion.dev | 不以動畫為主 |
| excalidraw-skill | 您需要圖表，而不是網頁動畫 | 不同的問題 |