motion-react-best-practices
Motion React Best Practices
Apply these rules when working on React codebases that use Motion.
Rule loading order
- Read
rules/motion-react-setup.md. - Read
rules/motion-react-variants-transitions.md. - Read
rules/motion-react-presence-layout.md. - Read
rules/motion-react-hooks-gestures-scroll.md. - Read
rules/motion-react-performance-accessibility.md. - Use
AGENTS.mdas a compact summary plus pointer.
Enforcement policy
- Use recommendation-first language for style and performance guidance.
- Use strict language (
must/must not) only for lifecycle correctness, accessibility, and regression-risk behavior. - Prefer official Motion and React docs when resolving conflicts; update these rules when docs change.
More from jackkkonggg/skills
gsap-best-practices
Use when writing, reviewing, or refactoring GSAP animation code in JavaScript/TypeScript (tweens, timelines, ScrollTrigger, matchMedia, plugin usage, and performance tuning) to enforce production-safe animation patterns.
13react-gsap-best-practices
Use when building, reviewing, or refactoring React components that use GSAP or @gsap/react (useGSAP, contextSafe, dependency-driven updates, ScrollTrigger integration, and SSR-safe setup) to enforce production-safe animation patterns.
8convex-best-practices
Use when writing, reviewing, or refactoring Convex backend code (queries, mutations, actions, HTTP actions, schema, indexes, scheduling, file storage, and search) to enforce production-safe patterns.
7code-audit
Use when auditing a codebase against best practices. Auto-detects technologies, loads relevant docs via Context7 MCP and installed skills, evaluates code systematically, and produces a prioritized findings report with optional auto-fix.
1swift-best-practices
Use when writing, reviewing, or refactoring Swift code to enforce best practices — naming, types, error handling, protocols, memory management, performance, and modern patterns — for idiomatic, safe Swift.
1typescript-clean-code
Use when writing, reviewing, or refactoring TypeScript code to enforce Clean Code principles — naming, functions, types, error handling, modules, testing, comments, and code smells — adapted for idiomatic TypeScript.
1