Framer Motion
by pproencacf93c57cac89No license215 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 weeks ago
Framer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensure optimal performance patterns. Triggers on tasks involving motion components, animations, gestures, layout transitions, scroll-linked effects, and SVG animations.
Only the file list is public. File contents are available once the skill is installed in a workspace.
| Path | Size | Type |
|---|---|---|
| assets/templates/_template.md | 1.2 KB | text/markdown |
| metadata.json | 1 KB | application/json |
| references/anim-hardware-acceleration.md | 2.8 KB | text/markdown |
| references/anim-independent-transforms.md | 2.9 KB | text/markdown |
| references/anim-keyframes-array.md | 3.2 KB | text/markdown |
| references/anim-opacity-filter.md | 2.3 KB | text/markdown |
| references/anim-transform-properties.md | 2.1 KB | text/markdown |
| references/anim-will-change.md | 2.7 KB | text/markdown |
| references/bundle-dom-animation.md | 2.3 KB | text/markdown |
| references/bundle-dynamic-features.md | 1.7 KB | text/markdown |
| references/bundle-lazy-motion.md | 1.8 KB | text/markdown |
| references/bundle-strict-mode.md | 2.2 KB | text/markdown |
| references/bundle-use-animate-mini.md | 2 KB | text/markdown |
| references/exit-animate-presence.md | 1.6 KB | text/markdown |
| references/exit-mode-wait.md | 1.9 KB | text/markdown |
| references/exit-unique-keys.md | 1.7 KB | text/markdown |
| references/gesture-drag-constraints.md | 2.1 KB | text/markdown |
| references/gesture-drag-elastic.md | 2 KB | text/markdown |
| references/gesture-tap-cancel.md | 2 KB | text/markdown |
| references/gesture-variants-flow.md | 2 KB | text/markdown |
| references/gesture-while-props.md | 1.8 KB | text/markdown |
| references/layout-dependency.md | 1.7 KB | text/markdown |
| references/layout-group.md | 2.3 KB | text/markdown |
| references/layout-id-shared.md | 3 KB | text/markdown |
| references/layout-position-size.md | 2 KB | text/markdown |
| references/layout-scroll.md | 2.4 KB | text/markdown |
| references/rerender-animate-prop.md | 1.7 KB | text/markdown |
| references/rerender-motion-value-event.md | 1.7 KB | text/markdown |
| references/rerender-motion-value.md | 1.3 KB | text/markdown |
| references/rerender-stable-callbacks.md | 1.6 KB | text/markdown |
| references/rerender-use-transform.md | 1.3 KB | text/markdown |
| references/rerender-variants-object.md | 1.5 KB | text/markdown |
| references/scroll-container-ref.md | 2.3 KB | text/markdown |
| references/scroll-element-tracking.md | 2 KB | text/markdown |
| references/scroll-offset-configuration.md | 2.2 KB | text/markdown |
| references/scroll-use-scroll.md | 1.8 KB | text/markdown |
| references/scroll-use-spring-smooth.md | 1.4 KB | text/markdown |
| references/_sections.md | 2.1 KB | text/markdown |
| references/spring-damping-ratio.md | 1.9 KB | text/markdown |
| references/spring-mass-inertia.md | 2 KB | text/markdown |
| references/spring-physics-based.md | 1.8 KB | text/markdown |
| references/spring-use-spring-hook.md | 1.9 KB | text/markdown |
| references/svg-morph-matching-points.md | 2 KB | text/markdown |
| references/svg-motion-components.md | 1.7 KB | text/markdown |
| references/svg-path-length.md | 1.6 KB | text/markdown |
| references/svg-viewbox-animation.md | 1.6 KB | text/markdown |
| SKILL.md | 6.8 KB | text/markdown |
Source and attribution
Source:pproenca/dot-skillsinskills/.experimental/framer-motionat commitcf93c57
License: No license
Content belongs to its original authors. SourceWeft indexes it from a public repository.
More from pproenca/dot-skills
Typescript Refactor
pproenca
Guidelines for refactoring and modernizing TypeScript and React/TSX code, covering 47 rules across nine categories.
Tailwind Ui Refactor
pproenca
A 52-rule Tailwind CSS UI refactoring guide covering hierarchy, spacing, typography, color, depth and polish.
Shell
pproenca
A reference guide of 49 shell scripting best practices for writing safe, portable, and maintainable bash and sh scripts.
React Refactor
pproenca
Architectural refactoring guide for React apps, with 40 rules on component, state, hook, and data patterns.
Expo React Native Performance
pproenca
Guidelines for optimizing performance in Expo React Native apps, covering startup, lists, re-renders, animations, assets, memory and async.
Emilkowal Animations
pproenca
Reference guide of web animation best practices covering easing, timing, transforms, gestures, accessibility and Tailwind v4.
More in Software Development
Playground
anthropics
Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.
M5 Onboard
anthropics
Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.
Cardputer Buddy
anthropics
Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.
Web Design Guidelines
vercel-labs
Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.
Vercel React Native Skills
vercel-labs
React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.
Vercel React Best Practices
vercel-labs
Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.