AI导哈

前端开发

motion

motiondivision/ai-kit

Animation skill for Motion (prev Framer Motion) and CSS animation. Provides: animation best practices (including specific advice for vanilla JS, React, Vue, Base UI and Radix), documentation and example search, CSS spring and bounce generation, MotionScore code and runtime performance audits with Performance Doctor fixes, and the visual transition editor. Use when writing animations, working with Motion (motion, motion/react, motion-v, framer-motion), animating a UI, writing CSS linear() springs, auditing or fixing slow animations, performance, jank or layout thrash via code or runtime, searching Motion docs or examples, adding, inserting or building a Motion component or Motion UI section, or upgrading between Motion versions.

  • 835 次安装
  • 66 星标
  • 收录于

安装命令

npx skills add https://github.com/motiondivision/ai-kit --skill motion

SKILL.md

Motion

Animation for the web, done properly.

  • Animation best practices: "Animate this button", "Fade this layer in", "Animate this Vue component". Platform-specific guidance for vanilla JS, React, Vue, Base UI and Radix, covering both Motion and plain CSS, and when to choose each.
  • Insert panel: "/motion make accordion", "/motion insert", "/motion add", "Build a carousel", "Add a pricing section / hero". Opens Motion's library for the user to pick from. Prefer the Motion+ server's panel when it is connected.
  • Documentation, examples and Motion UI search: "What options does X have", "How does X work", "Use X to do Y", "Show me an example of X".
  • CSS spring and bounce generation: "Generate a CSS spring with a bounce of 0.5 over 0.3s", "Make this bouncier", "Give me a bounce easing".
  • Performance Doctor (MotionScore audit): "Fix animation performance on the homepage", "Why is this animation slow", "Run Performance Doctor on src/", "Audit src/Modal.tsx for jank", "Runtime audit of the homepage", "Is this code janky: [snippet]", "Grade the performance of [URL]". You may also run audits proactively and report what you find. Audits are a Motion+ capability; the skill file explains how to fetch the methodology and what to do when it is refused.
  • Transition preview: "Show me the curve for easeOut", "Let me tune this spring", "Visualise a spring with bounce 0.5".

Upgrading Motion

"/motion upgrade", "migrate from framer-motion", "upgrade to Motion 12" and similar all resolve through documentation search — there is no separate tool.

Motion

Animation for the web, done properly.

  • Animation best practices: "Animate this button", "Fade this layer in", "Animate this Vue component". Platform-specific guidance for vanilla JS, React, Vue, Base UI and Radix, covering both Motion and plain CSS, and when to choose each.
  • Insert panel: "/motion make accordion", "/motion insert", "/motion add", "Build a carousel", "Add a pricing section / hero". Opens Motion's library for the user to pick from. Prefer the Motion+ server's panel when it is connected.
  • Documentation, examples and Motion UI search: "What options does X have", "How does X work", "Use X to do Y", "Show me an example of X".
  • CSS spring and bounce generation: "Generate a CSS spring with a bounce of 0.5 over 0.3s", "Make this bouncier", "Give me a bounce easing".
  • Performance Doctor (MotionScore audit): "Fix animation performance on the homepage", "Why is this animation slow", "Run Performance Doctor on src/", "Audit src/Modal.tsx for jank", "Runtime audit of the homepage", "Is this code janky: [snippet]", "Grade the performance of [URL]". You may also run audits proactively and report what you find. Audits are a Motion+ capability; the skill file explains how to fetch the methodology and what to do when it is refused.
  • Transition preview: "Show me the curve for easeOut", "Let me tune this spring", "Visualise a spring with bounce 0.5".

Upgrading Motion

"/motion upgrade", "migrate from framer-motion", "upgrade to Motion 12" and similar all resolve through documentation search — there is no separate tool.