aiskillstore/framer-motion
skills/asmayaseen/framer-motion/SKILL.md
Comprehensive Framer Motion animation library for React. Covers motion components, variants, gestures, page transitions, and scroll animations. Use when adding animations to React/Next.js applications.
$ install --global
skillsauthnpx skillsauth add aiskillstore/marketplace framer-motionInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 30, 2026, 9:28 PM59.5s12 files scanned
SKILL.md
- name:
- framer-motion
- description:
- Comprehensive Framer Motion animation library for React. Covers motion components, variants, gestures, page transitions, and scroll animations. Use when adding animations to React/Next.js applications.
Framer Motion Skill
Production-ready animations for React applications.
Quick Start
Installation
npm install framer-motion
# or
pnpm add framer-motion
Basic Usage
import { motion } from "framer-motion";
// Simple animation
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
>
Content
</motion.div>
Core Concepts
| Concept | Guide | |---------|-------| | Motion Component | reference/motion-component.md | | Variants | reference/variants.md | | Gestures | reference/gestures.md | | Hooks | reference/hooks.md |
Examples
| Pattern | Guide | |---------|-------| | Page Transitions | examples/page-transitions.md | | List Animations | examples/list-animations.md | | Scroll Animations | examples/scroll-animations.md | | Micro-interactions | examples/micro-interactions.md |
Templates
| Template | Purpose | |----------|---------| | templates/page-transition.tsx | Page transition wrapper | | templates/animated-list.tsx | Animated list component |
Quick Reference
Basic Animation
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3 }}
>
Content
</motion.div>
Hover & Tap
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
transition={{ type: "spring", stiffness: 400, damping: 17 }}
>
Click me
</motion.button>
Variants
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: { staggerChildren: 0.1 }
}
};
const item = {
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0 }
};
<motion.ul variants={container} initial="hidden" animate="show">
{items.map(i => (
<motion.li key={i} variants={item}>{i}</motion.li>
))}
</motion.ul>
AnimatePresence (Exit Animations)
import { AnimatePresence, motion } from "framer-motion";
<AnimatePresence mode="wait">
{isVisible && (
<motion.div
key="modal"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
Modal content
</motion.div>
)}
</AnimatePresence>
Scroll Trigger
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.5 }}
>
Animates when scrolled into view
</motion.div>
Drag
<motion.div
drag
dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
dragElastic={0.1}
>
Drag me
</motion.div>
Layout Animation
<motion.div layout layoutId="shared-element">
Content that animates when layout changes
</motion.div>
Transition Types
// Tween (default)
transition={{ duration: 0.3, ease: "easeOut" }}
// Spring
transition={{ type: "spring", stiffness: 300, damping: 20 }}
// Spring presets
transition={{ type: "spring", bounce: 0.25 }}
// Inertia (for drag)
transition={{ type: "inertia", velocity: 50 }}
Easing Functions
// Built-in easings
ease: "linear"
ease: "easeIn"
ease: "easeOut"
ease: "easeInOut"
ease: "circIn"
ease: "circOut"
ease: "circInOut"
ease: "backIn"
ease: "backOut"
ease: "backInOut"
// Custom cubic-bezier
ease: [0.17, 0.67, 0.83, 0.67]
Reduced Motion
Always respect user preferences:
import { motion, useReducedMotion } from "framer-motion";
function Component() {
const prefersReducedMotion = useReducedMotion();
return (
<motion.div
initial={{ opacity: 0, y: prefersReducedMotion ? 0 : 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: prefersReducedMotion ? 0 : 0.3 }}
>
Respects motion preferences
</motion.div>
);
}
// Or use media query
const variants = {
initial: { opacity: 0 },
animate: { opacity: 1 },
};
<motion.div
variants={variants}
initial="initial"
animate="animate"
className="motion-reduce:transition-none"
>
Common Patterns
Fade In Up
const fadeInUp = {
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 },
transition: { duration: 0.4 }
};
<motion.div {...fadeInUp}>Content</motion.div>
Staggered List
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: { staggerChildren: 0.1, delayChildren: 0.2 }
}
};
const item = {
hidden: { opacity: 0, x: -20 },
show: { opacity: 1, x: 0 }
};
Modal
<AnimatePresence>
{isOpen && (
<>
{/* Backdrop */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="fixed inset-0 bg-black/50"
onClick={onClose}
/>
{/* Modal */}
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
className="fixed inset-x-4 top-1/2 -translate-y-1/2 ..."
>
Modal content
</motion.div>
</>
)}
</AnimatePresence>
Accordion
<motion.div
initial={false}
animate={{ height: isOpen ? "auto" : 0 }}
transition={{ duration: 0.3, ease: "easeInOut" }}
className="overflow-hidden"
>
<div className="p-4">Accordion content</div>
</motion.div>
Best Practices
- Use variants: Cleaner code, easier orchestration
- Respect reduced motion: Always check
useReducedMotion - Use
layoutsparingly: Can be expensive, use only when needed - Exit animations: Wrap with
AnimatePresence - Spring for interactions: More natural feel for hover/tap
- Tween for page transitions: More predictable timing
- GPU-accelerated properties: Prefer
opacity,scale,x,yoverwidth,height
Related Skills
aiskillstore/hig-components-content
development
VerifiedTrustedCommunity
Apple Human Interface Guidelines for content display components. Use this skill when the user asks about charts component, collection view, image view, web view, color well, image well, activity view, lockup, data visualization, content display, displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says how should I display charts, what's the best way to show images, should I use a web view, how do I build a grid of items, what component shows media, or how do I present a share sheet. Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.
244SKILL.mdUpdated Apr 10, 2026
aiskillstore/helpdesk-automation
tools
VerifiedTrustedCommunity
Automate HelpDesk tasks via Rube MCP (Composio): list tickets, manage views, use canned responses, and configure custom fields. Always search tools first for current schemas.
244SKILL.mdUpdated Apr 10, 2026
aiskillstore/haskell-pro
testing
VerifiedTrustedCommunity
Expert Haskell engineer specializing in advanced type systems, pure functional design, and high-reliability software. Use PROACTIVELY for type-level programming, concurrency, and architecture guidance.
244SKILL.mdUpdated Apr 10, 2026
aiskillstore/graphql
tools
VerifiedTrustedCommunity
GraphQL gives clients exactly the data they need - no more, no less. One endpoint, typed schema, introspection. But the flexibility that makes it powerful also makes it dangerous. Without proper controls, clients can craft queries that bring down your server. This skill covers schema design, resolvers, DataLoader for N+1 prevention, federation for microservices, and client integration with Apollo/urql. Key insight: GraphQL is a contract. The schema is the API documentation. Design it carefully.
244SKILL.mdUpdated Apr 10, 2026