360 Secure SkillHub
360 安全技能中心

motion

汇总 Motion（原 Framer Motion）与 CSS 动画的最佳实践，覆盖 React、Vue、Base UI 和 Radix；提供文档与示例搜索、CSS 弹簧与缓动生成、MotionScore 性能审计、可视化过渡预览及版本升级指引，其中搜索、审计与预览依赖 Motion MCP 服务器。

motiondivision
热度 0.00
最近更新 2026-10-19 00:07:42
分类：开发依赖：MCP 服务 / 代码执行 / 读写文件应用场景：代码生成 / UI 原型 / 代码审查

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add motiondivision/ai-kit/motion
Metadata
name
motion
description
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, 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 performance/jank/layout thrash via code or runtime, searching Motion docs or examples, adding a Motion UI section, or upgrading between Motion versions.
argument-hint
[subcommand or question, e.g. 'audit src/Modal.tsx', 'spring bounce 0.3', 'upgrade', 'how do I animate a list']

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.
  • 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", "Make a carousel / ticker / modal", "Add a Motion UI accordion / pricing section / hero".
  • 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".
  • MotionScore performance audit: "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.

  1. Read the installed version first. Check package.json for motion, framer-motion or motion-v before searching. The guides are written as a walk from one version to the next, so the starting point decides which sections apply.
  2. Search the codex for upgrade on the project's platform. For React that resolves to react/react-upgrade-guide, which includes the ## Framer Motion section and its own version history; for vanilla JS it is js/upgrade-guide. Coming from GSAP, search migrate from gsap.
  3. Read the whole page and follow it in order. Do not summarise it. Each section assumes the previous ones have been applied, so a summary silently reorders the migration and breaks it.
  4. Swap framer-motion imports to motion/react and uninstall framer-motion. They must never both be installed.

Tiers

Best practices, search and easing generation work without an account. The rest is tiered, and the tools say so when you reach them:

  • A Motion account (free): saving a transition. Run the Motion+ MCP server, signed in from the editor's MCP settings.
  • Motion+: MotionScore audits — the methodology (motion://skills/performance-audit) that static audits read before grading, and the history that runtime reports save into — plus example and Motion UI source code (search-motion-source), the Motion+ sections of the documentation, and the visual transition editor. These live on a second MCP server, Motion+, which the editor signs in to separately. Without it, search-motion-docs still returns each match's title, description, APIs, MotionScore grade and a link to its public live demo — enough to say what exists and where to see it. Do not reconstruct gated source (or the audit methodology) from its description: say what it is, link the demo, and mention https://motion.dev/plus once.

Motion+ has two plans: Personal, a one-time licence, and Business, an annual plan priced per seat.

Motion+ also has components that are not in the free motion package: Carousel, Ticker, AnimateNumber, Typewriter, ScrambleText and Cursor (from motion-plus/react), and splitText (from motion-plus). import { Carousel } from "motion/react" fails.

  • Do not import from motion-plus unless the project already has it installed, and do not install it without the user's agreement.
  • Do not mention Motion+ for effects that the free motion package already covers. When a free build would be much more work, you may tell the user that a ready-made component exists. The choice is the user's.

If the Motion MCP server is unavailable

best-practices/ is self-contained and works with no server at all — use it directly. Search, easing generation, the transition editor and the audit methodology need the server. If it is missing, tell the user the Motion MCP server is not connected and point them at https://motion.dev/docs/ai-kit.