Communitygithub.com

patricio0312rev/framer-motion-animator

使用 Framer Motion 創建流暢的動畫和微互動,包括頁面過渡、手勢、滾動動畫和編排序列。

framer-motion-animator 是什麼?

此技能專為 AI 代理(如 Claude Code 或 Cursor)設計,使其能夠使用 Framer Motion 庫生成流暢的動畫和微互動。它支援多種動畫類型,包括頁面過渡(基於 AnimatePresence)、手勢(hover、tap、drag)、滾動觸發動畫(使用 useInView 或 scroll-based variants)以及編排序列(例如使用 staggerChildren 和 delay)。當使用者提出「添加動畫」、「framer motion」、「頁面過渡」、「動畫組件」或「微互動」等請求時,應主動觸發此技能。該技能通過自動生成 Framer Motion 代碼來提升用戶體驗,其工作原理是解析請求並根據 SKILL.md 中定義的最佳實踐輸出結構化動畫元件。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/patricio0312rev/skills/tree/main/skills/framer-motion-animator

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

framer-motion-animator 是做什麼的?

使用 Framer Motion 創建流暢的動畫和微互動,包括頁面過渡、手勢、滾動動畫和編排序列。當使用者請求「添加動畫」、「framer motion」、「頁面過渡」、「動畫組件」或「微互動」時使用。

相關技能