Skip to main content
SkillJury
Back to registry

framer-motion-best-practices

pproenca/dot-skills

Comprehensive performance optimization guide for Framer Motion animations in React applications. Contains 42 rules across 9 categories, prioritized by impact to guide automated refactoring and code generation.

Installs187
Install command
npx skills add https://github.com/pproenca/dot-skills --skill framer-motion-best-practices
Security audits
Gen Agent Trust HubPASS
SocketPASS
SnykPASS
About this skill
Comprehensive performance optimization guide for Framer Motion animations in React applications. Contains 42 rules across 9 categories, prioritized by impact to guide automated refactoring and code generation. Reference these guidelines when: Read individual reference files for detailed explanations and code examples: - Adding animations to React components with Framer Motion - Optimizing bundle size for animation-heavy applications - Preventing unnecessary re-renders during animations - Implementing layout transitions or shared element animations - Building scroll-linked or gesture-based interactions - bundle-lazy-motion - Use LazyMotion and m component instead of motion - bundle-dynamic-features - Dynamically import motion features - bundle-dom-animation - Use domAnimation for basic animations - bundle-use-animate-mini - Use mini useAnimate for simple cases - bundle-strict-mode - Enable strict mode to catch accidental imports - rerender-motion-value - Use useMotionValue instead of useState - rerender-use-transform - Derive values with useTransform - rerender-stable-callbacks - Keep animation callbacks stable - rerender-variants-object - Define variants outside component - rerender-animate-prop - Use stable animate values - rerender-motion-value-event - Use motion value events - anim-transform-properties - Animate transform properties - anim-opacity-filter - Prefer opacity...

Source description provided by the upstream skill listing. Community reviews and install context appear in the sections below.

Community Reviews

Latest reviews

Sign in to review

No community reviews yet. Be the first to review.

Browse this skill in context
FAQ
What does framer-motion-best-practices do?

Comprehensive performance optimization guide for Framer Motion animations in React applications. Contains 42 rules across 9 categories, prioritized by impact to guide automated refactoring and code generation.

Is framer-motion-best-practices good?

framer-motion-best-practices does not have approved reviews yet, so SkillJury cannot publish a community verdict.

What agent does framer-motion-best-practices work with?

framer-motion-best-practices currently lists compatibility with codex, gemini-cli, opencode, github-copilot, claude-code, antigravity.

What are alternatives to framer-motion-best-practices?

Skills in the same category include telegram-bot-builder, flutter-app-size, sharp-edges, iterative-retrieval.

How do I install framer-motion-best-practices?

npx skills add https://github.com/pproenca/dot-skills --skill framer-motion-best-practices

telegram-bot-builderflutter-app-sizesharp-edgesiterative-retrieval
Related skills

More from pproenca/dot-skills

zod

by pproenca/dot-skills

744

Comprehensive schema validation guide for Zod in TypeScript applications. Contains 43 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

Software EngineeringFrontend and DesignFirst seen Jan 19, 2026

clean-architecture

by pproenca/dot-skills

695

Comprehensive guide to Clean Architecture principles for designing maintainable, testable software systems. Based on Robert C. Martin's "Clean Architecture: A Craftsman's Guide to Software Structure and Design." Contains 42 rules across 8 categories, prioritized by architectural impact.

Software EngineeringFrontend and DesignFirst seen Jan 23, 2026

emilkowal-animations

by pproenca/dot-skills

502

Comprehensive animation guide for web interfaces based on Emil Kowalski's teachings, open-source libraries (Sonner, Vaul), and his animations.dev course. Contains 43 rules across 7 categories, prioritized by impact.

Software EngineeringFrontend and DesignFirst seen Jan 28, 2026

nuqs

by pproenca/dot-skills

426

Comprehensive guide for type-safe URL query state management with nuqs in Next.js applications. Contains 42 rules across 8 categories, prioritized by impact to guide code generation, refactoring, and code review.

Software EngineeringFrontend and DesignFirst seen Jan 19, 2026
Related skills

Alternatives in Software Engineering

telegram-bot-builder

by sickn33/antigravity-awesome-skills

998

Source details, install context, and public review data are available on the full page.

Software EngineeringFrontend and DesignFirst seen Jan 18, 2026

flutter-app-size

by flutter/skills

996

Analyzes and optimizes Flutter application size by measuring build artifacts, generating size analysis reports, utilizing Dart DevTools for component breakdown, and implementing specific size reduction strategies such as debug info splitting, resource compression, and platform-specific tree-shaking. Assumes a...

Software EngineeringFrontend and Design

sharp-edges

by trailofbits/skills

994

Evaluates whether APIs, configurations, and interfaces are resistant to developer misuse. Identifies designs where the "easy path" leads to insecurity.

Software EngineeringFrontend and DesignFirst seen Jan 18, 2026

iterative-retrieval

by affaan-m/everything-claude-code

993

Solves the "context problem" in multi-agent workflows where subagents don't know what context they need until they start working.

Software EngineeringFrontend and DesignFirst seen Jan 25, 2026