motion-v-skilld
starsforks
How to install motion-v-skilld?
skilld-dev/vue-ecosystem-skills/motion-v-skilld
$npx -y skills add skilld-dev/vue-ecosystem-skills --skill motion-v-skilldALWAYS use when writing code importing \"motion-v\". Consult for debugging, best practices, or modifying motion-v, motion v, motion-vue, motion vue.
SKILL.md
| 1 | # motiondivision/motion-vue `motion-v@2.2.1` |
| 2 | **Tags:** latest: 2.2.1 |
| 3 | |
| 4 | **References:** [Docs](./references/docs/_INDEX.md) |
| 5 | ## API Changes |
| 6 | |
| 7 | This section documents version-specific API changes — prioritize recent major/minor releases. |
| 8 | |
| 9 | - BREAKING: `focus`, `hover`, `press`, `inView` shorthand props — removed in v2.0.0-beta.1. Use `whileFocus`, `whileHover`, `whilePress`, and `whileInView` for animations, and full event handlers (e.g. `@hoverStart`, `@pressStart`) for logic [source](./references/releases/v2.0.0-beta.1.md) |
| 10 | |
| 11 | - NEW: `v-motion` directive — new in v2.0.0-beta.1, enables declarative animations on any element without requiring a `<motion>` component wrapper [source](./references/releases/v2.0.0-beta.1.md) |
| 12 | |
| 13 | - BREAKING: ESM-only — v2.0.0-beta.1 dropped CommonJS support. The package now only ships ESM (`.mjs`) exports [source](./references/releases/v2.0.0-beta.1.md) |
| 14 | |
| 15 | - NEW: `MotionPlugin` — new in v2.0.0-beta.1, a Vue plugin for global `v-motion` and custom preset directive registration |
| 16 | |
| 17 | - NEW: `createPresetDirective()` — new in v2.0.0-beta.1, allows creating reusable animation directives with baked-in motion options |
| 18 | |
| 19 | - BREAKING: `AnimatePresence` lazy discovery — v2.0.0-beta.1 refactored to use `data-ap` attribute for lazy discovery instead of eager registration [source](./references/releases/v2.0.0-beta.1.md) |
| 20 | |
| 21 | - DEPRECATED: `staggerChildren` and `staggerDirection` — deprecated in v1.4.0 in favor of using the `stagger()` utility within the `transition` prop [source](./references/releases/v1.4.0.md) |
| 22 | |
| 23 | - NEW: `stagger()` utility — correctly handles staggering for newly-entering siblings alongside existing ones since v1.7.0 [source](./references/releases/v1.7.0.md) |
| 24 | |
| 25 | - NEW: `useTransform` output maps — supports providing multiple output value maps for complex coordinate transformations since v1.9.0 [source](./references/releases/v1.9.0.md) |
| 26 | |
| 27 | - NEW: `Reorder` auto-scrolling — supports automatic parent container scrolling when a `Reorder.Item` is dragged to the edges since v1.8.0 [source](./references/releases/v1.8.0.md) |
| 28 | |
| 29 | - NEW: `useScroll` VueInstance support — `container` and `target` options now accept `VueInstance` (ref to component) since v1.6.0 [source](./references/releases/v1.6.0.md) |
| 30 | |
| 31 | - NEW: `useInView` `root` option — now accepts `MaybeRef` for dynamic root element assignment since v1.6.0 [source](./references/releases/v1.6.0.md) |
| 32 | |
| 33 | - NEW: `AnimatePresence` direct children — supports multiple direct `motion` components as children since v1.10.0 [source](./references/releases/v1.10.0.md) |
| 34 | |
| 35 | - NEW: `delayInMs` — exported as a standalone utility function for time-based animation delays since v1.6.0 [source](./references/releases/v1.6.0.md) |
| 36 | |
| 37 | **Also changed:** `useTransform` reactive update fix (v1.2.1) · `sequence` at relative start (v1.3.0) · `AnimatePresence` custom prop fix (v1.3.0) · `motionGlobalConfig` exported (v2.0.0-beta.1) · `FeatureBundle` tree-shaking architecture (v2.0.0-beta.1) |
| 38 | |
| 39 | ## Best Practices |
| 40 | |
| 41 | - Use `LazyMotion` + `m` component instead of `motion` to reduce the initial bundle from ~34kb to ~6kb — load `domAnimation` (+18kb) for variants/exit/gestures or `domMax` (+28kb) when you also need drag and layout animations. Add `:strict="true"` to catch accidental `motion` imports inside `LazyMotion` at dev time [source](./references/docs/docs/vue-lazymotion.md#usage) |
| 42 | |
| 43 | - Render live motion value output with `<RowValue :value="motionValue" />` rather than syncing to Vue state — `RowValue` writes to `innerHTML` directly and bypasses Vue's reactivity cycle, keeping fast-changing values off the render path [source](./references/docs/docs/vue-animation.md#animate-content) |
| 44 | |
| 45 | - Set `reducedMotion="user"` on `MotionConfig` at the app root — the default is `"never"`, meaning transform and layout animations run regardless of the OS accessibility setting unless you explicitly opt in [source](./references/docs/docs/vue-motion-config.md#reducedmotion) |
| 46 | |
| 47 | - For layout animations, apply changing CSS to `:style` (not `:animate`) and let the `layout` prop handle the transition — if the value is placed in `:animate`, Motion's FLIP measurement will conflict with it [source](./references/docs/docs/vue-layout-animations.md#usage) |
| 48 | |
| 49 | - Set `borderRadius` and `boxShadow` via `:style` (not CSS classes) on `layout`-animated elements — Motion auto-corrects scale distortion on these properties only when they are set as inline style motion values [source](./references/docs/docs/vue-layout-animations.md#scale-correction) |
| 50 | |
| 51 | - Add `layoutScroll` to scrollable container ancestors and `layoutRoot` to fixed-position ancestors of layout-animated elements — without these props, Motion measures child positions incorrectly when scroll offset or viewport offset is n |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
