[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EM32CGZAHKD259CMNPVH75":3,"skill-same:01M6EM32CGZAHKD259CMNPVH75":111},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":35,"linkOnly":36,"markdownContent":37,"markdownBody":38,"frontMatter":39,"refName":40,"commitSha":41,"skillDirectory":42,"forksCount":43,"repositoryHtmlUrl":44,"repositoryHomepageUrl":45,"ownerHtmlUrl":46,"ownerBlogUrl":6,"ownerDescription":47,"updatedAt":48,"install":49,"resources":62},"01M6EM32CGZAHKD259CMNPVH75","framer-motion",null,"Comprehensive Framer Motion animation library for React. Covers motion components, variants, gestures, page transitions, and scroll animations. Use when adding animations to React\u002FNext.js applications.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fasmayaseen\u002Fframer-motion\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34],"motion","framer motion","gestures","components","react","animation library","library","applications","Animation","Next.js","js","page","use","next","transitions","scroll","2026-11-10 10:12:30",false,"---\r\nname: framer-motion\r\ndescription: Comprehensive Framer Motion animation library for React. Covers motion components, variants, gestures, page transitions, and scroll animations. Use when adding animations to React\u002FNext.js applications.\r\n---\r\n\r\n# Framer Motion Skill\r\n\r\nProduction-ready animations for React applications.\r\n\r\n## Quick Start\r\n\r\n### Installation\r\n\r\n```bash\r\nnpm install framer-motion\r\n# or\r\npnpm add framer-motion\r\n```\r\n\r\n### Basic Usage\r\n\r\n```tsx\r\nimport { motion } from \"framer-motion\";\r\n\r\n\u002F\u002F Simple animation\r\n\u003Cmotion.div\r\n  initial={{ opacity: 0 }}\r\n  animate={{ opacity: 1 }}\r\n  transition={{ duration: 0.5 }}\r\n>\r\n  Content\r\n\u003C\u002Fmotion.div>\r\n```\r\n\r\n## Core Concepts\r\n\r\n| Concept | Guide |\r\n|---------|-------|\r\n| **Motion Component** | [reference\u002Fmotion-component.md](reference\u002Fmotion-component.md) |\r\n| **Variants** | [reference\u002Fvariants.md](reference\u002Fvariants.md) |\r\n| **Gestures** | [reference\u002Fgestures.md](reference\u002Fgestures.md) |\r\n| **Hooks** | [reference\u002Fhooks.md](reference\u002Fhooks.md) |\r\n\r\n## Examples\r\n\r\n| Pattern | Guide |\r\n|---------|-------|\r\n| **Page Transitions** | [examples\u002Fpage-transitions.md](examples\u002Fpage-transitions.md) |\r\n| **List Animations** | [examples\u002Flist-animations.md](examples\u002Flist-animations.md) |\r\n| **Scroll Animations** | [examples\u002Fscroll-animations.md](examples\u002Fscroll-animations.md) |\r\n| **Micro-interactions** | [examples\u002Fmicro-interactions.md](examples\u002Fmicro-interactions.md) |\r\n\r\n## Templates\r\n\r\n| Template | Purpose |\r\n|----------|---------|\r\n| [templates\u002Fpage-transition.tsx](templates\u002Fpage-transition.tsx) | Page transition wrapper |\r\n| [templates\u002Fanimated-list.tsx](templates\u002Fanimated-list.tsx) | Animated list component |\r\n\r\n## Quick Reference\r\n\r\n### Basic Animation\r\n\r\n```tsx\r\n\u003Cmotion.div\r\n  initial={{ opacity: 0, y: 20 }}\r\n  animate={{ opacity: 1, y: 0 }}\r\n  exit={{ opacity: 0, y: -20 }}\r\n  transition={{ duration: 0.3 }}\r\n>\r\n  Content\r\n\u003C\u002Fmotion.div>\r\n```\r\n\r\n### Hover & Tap\r\n\r\n```tsx\r\n\u003Cmotion.button\r\n  whileHover={{ scale: 1.05 }}\r\n  whileTap={{ scale: 0.95 }}\r\n  transition={{ type: \"spring\", stiffness: 400, damping: 17 }}\r\n>\r\n  Click me\r\n\u003C\u002Fmotion.button>\r\n```\r\n\r\n### Variants\r\n\r\n```tsx\r\nconst container = {\r\n  hidden: { opacity: 0 },\r\n  show: {\r\n    opacity: 1,\r\n    transition: { staggerChildren: 0.1 }\r\n  }\r\n};\r\n\r\nconst item = {\r\n  hidden: { opacity: 0, y: 20 },\r\n  show: { opacity: 1, y: 0 }\r\n};\r\n\r\n\u003Cmotion.ul variants={container} initial=\"hidden\" animate=\"show\">\r\n  {items.map(i => (\r\n    \u003Cmotion.li key={i} variants={item}>{i}\u003C\u002Fmotion.li>\r\n  ))}\r\n\u003C\u002Fmotion.ul>\r\n```\r\n\r\n### AnimatePresence (Exit Animations)\r\n\r\n```tsx\r\nimport { AnimatePresence, motion } from \"framer-motion\";\r\n\r\n\u003CAnimatePresence mode=\"wait\">\r\n  {isVisible && (\r\n    \u003Cmotion.div\r\n      key=\"modal\"\r\n      initial={{ opacity: 0 }}\r\n      animate={{ opacity: 1 }}\r\n      exit={{ opacity: 0 }}\r\n    >\r\n      Modal content\r\n    \u003C\u002Fmotion.div>\r\n  )}\r\n\u003C\u002FAnimatePresence>\r\n```\r\n\r\n### Scroll Trigger\r\n\r\n```tsx\r\n\u003Cmotion.div\r\n  initial={{ opacity: 0, y: 50 }}\r\n  whileInView={{ opacity: 1, y: 0 }}\r\n  viewport={{ once: true, margin: \"-100px\" }}\r\n  transition={{ duration: 0.5 }}\r\n>\r\n  Animates when scrolled into view\r\n\u003C\u002Fmotion.div>\r\n```\r\n\r\n### Drag\r\n\r\n```tsx\r\n\u003Cmotion.div\r\n  drag\r\n  dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}\r\n  dragElastic={0.1}\r\n>\r\n  Drag me\r\n\u003C\u002Fmotion.div>\r\n```\r\n\r\n### Layout Animation\r\n\r\n```tsx\r\n\u003Cmotion.div layout layoutId=\"shared-element\">\r\n  Content that animates when layout changes\r\n\u003C\u002Fmotion.div>\r\n```\r\n\r\n## Transition Types\r\n\r\n```tsx\r\n\u002F\u002F Tween (default)\r\ntransition={{ duration: 0.3, ease: \"easeOut\" }}\r\n\r\n\u002F\u002F Spring\r\ntransition={{ type: \"spring\", stiffness: 300, damping: 20 }}\r\n\r\n\u002F\u002F Spring presets\r\ntransition={{ type: \"spring\", bounce: 0.25 }}\r\n\r\n\u002F\u002F Inertia (for drag)\r\ntransition={{ type: \"inertia\", velocity: 50 }}\r\n```\r\n\r\n## Easing Functions\r\n\r\n```tsx\r\n\u002F\u002F Built-in easings\r\nease: \"linear\"\r\nease: \"easeIn\"\r\nease: \"easeOut\"\r\nease: \"easeInOut\"\r\nease: \"circIn\"\r\nease: \"circOut\"\r\nease: \"circInOut\"\r\nease: \"backIn\"\r\nease: \"backOut\"\r\nease: \"backInOut\"\r\n\r\n\u002F\u002F Custom cubic-bezier\r\nease: [0.17, 0.67, 0.83, 0.67]\r\n```\r\n\r\n## Reduced Motion\r\n\r\nAlways respect user preferences:\r\n\r\n```tsx\r\nimport { motion, useReducedMotion } from \"framer-motion\";\r\n\r\nfunction Component() {\r\n  const prefersReducedMotion = useReducedMotion();\r\n\r\n  return (\r\n    \u003Cmotion.div\r\n      initial={{ opacity: 0, y: prefersReducedMotion ? 0 : 20 }}\r\n      animate={{ opacity: 1, y: 0 }}\r\n      transition={{ duration: prefersReducedMotion ? 0 : 0.3 }}\r\n    >\r\n      Respects motion preferences\r\n    \u003C\u002Fmotion.div>\r\n  );\r\n}\r\n\r\n\u002F\u002F Or use media query\r\nconst variants = {\r\n  initial: { opacity: 0 },\r\n  animate: { opacity: 1 },\r\n};\r\n\r\n\u003Cmotion.div\r\n  variants={variants}\r\n  initial=\"initial\"\r\n  animate=\"animate\"\r\n  className=\"motion-reduce:transition-none\"\r\n>\r\n```\r\n\r\n## Common Patterns\r\n\r\n### Fade In Up\r\n\r\n```tsx\r\nconst fadeInUp = {\r\n  initial: { opacity: 0, y: 20 },\r\n  animate: { opacity: 1, y: 0 },\r\n  transition: { duration: 0.4 }\r\n};\r\n\r\n\u003Cmotion.div {...fadeInUp}>Content\u003C\u002Fmotion.div>\r\n```\r\n\r\n### Staggered List\r\n\r\n```tsx\r\nconst container = {\r\n  hidden: { opacity: 0 },\r\n  show: {\r\n    opacity: 1,\r\n    transition: { staggerChildren: 0.1, delayChildren: 0.2 }\r\n  }\r\n};\r\n\r\nconst item = {\r\n  hidden: { opacity: 0, x: -20 },\r\n  show: { opacity: 1, x: 0 }\r\n};\r\n```\r\n\r\n### Modal\r\n\r\n```tsx\r\n\u003CAnimatePresence>\r\n  {isOpen && (\r\n    \u003C>\r\n      {\u002F* Backdrop *\u002F}\r\n      \u003Cmotion.div\r\n        initial={{ opacity: 0 }}\r\n        animate={{ opacity: 1 }}\r\n        exit={{ opacity: 0 }}\r\n        className=\"fixed inset-0 bg-black\u002F50\"\r\n        onClick={onClose}\r\n      \u002F>\r\n      {\u002F* Modal *\u002F}\r\n      \u003Cmotion.div\r\n        initial={{ opacity: 0, scale: 0.95 }}\r\n        animate={{ opacity: 1, scale: 1 }}\r\n        exit={{ opacity: 0, scale: 0.95 }}\r\n        className=\"fixed inset-x-4 top-1\u002F2 -translate-y-1\u002F2 ...\"\r\n      >\r\n        Modal content\r\n      \u003C\u002Fmotion.div>\r\n    \u003C\u002F>\r\n  )}\r\n\u003C\u002FAnimatePresence>\r\n```\r\n\r\n### Accordion\r\n\r\n```tsx\r\n\u003Cmotion.div\r\n  initial={false}\r\n  animate={{ height: isOpen ? \"auto\" : 0 }}\r\n  transition={{ duration: 0.3, ease: \"easeInOut\" }}\r\n  className=\"overflow-hidden\"\r\n>\r\n  \u003Cdiv className=\"p-4\">Accordion content\u003C\u002Fdiv>\r\n\u003C\u002Fmotion.div>\r\n```\r\n\r\n## Best Practices\r\n\r\n1. **Use variants**: Cleaner code, easier orchestration\r\n2. **Respect reduced motion**: Always check `useReducedMotion`\r\n3. **Use `layout` sparingly**: Can be expensive, use only when needed\r\n4. **Exit animations**: Wrap with `AnimatePresence`\r\n5. **Spring for interactions**: More natural feel for hover\u002Ftap\r\n6. **Tween for page transitions**: More predictable timing\r\n7. **GPU-accelerated properties**: Prefer `opacity`, `scale`, `x`, `y` over `width`, `height`\r\n","# Framer Motion Skill\r\n\r\nProduction-ready animations for React applications.\r\n\r\n## Quick Start\r\n\r\n### Installation\r\n\r\n```bash\r\nnpm install framer-motion\r\n# or\r\npnpm add framer-motion\r\n```\r\n\r\n### Basic Usage\r\n\r\n```tsx\r\nimport { motion } from \"framer-motion\";\r\n\r\n\u002F\u002F Simple animation\r\n\u003Cmotion.div\r\n  initial={{ opacity: 0 }}\r\n  animate={{ opacity: 1 }}\r\n  transition={{ duration: 0.5 }}\r\n>\r\n  Content\r\n\u003C\u002Fmotion.div>\r\n```\r\n\r\n## Core Concepts\r\n\r\n| Concept | Guide |\r\n|---------|-------|\r\n| **Motion Component** | [reference\u002Fmotion-component.md](reference\u002Fmotion-component.md) |\r\n| **Variants** | [reference\u002Fvariants.md](reference\u002Fvariants.md) |\r\n| **Gestures** | [reference\u002Fgestures.md](reference\u002Fgestures.md) |\r\n| **Hooks** | [reference\u002Fhooks.md](reference\u002Fhooks.md) |\r\n\r\n## Examples\r\n\r\n| Pattern | Guide |\r\n|---------|-------|\r\n| **Page Transitions** | [examples\u002Fpage-transitions.md](examples\u002Fpage-transitions.md) |\r\n| **List Animations** | [examples\u002Flist-animations.md](examples\u002Flist-animations.md) |\r\n| **Scroll Animations** | [examples\u002Fscroll-animations.md](examples\u002Fscroll-animations.md) |\r\n| **Micro-interactions** | [examples\u002Fmicro-interactions.md](examples\u002Fmicro-interactions.md) |\r\n\r\n## Templates\r\n\r\n| Template | Purpose |\r\n|----------|---------|\r\n| [templates\u002Fpage-transition.tsx](templates\u002Fpage-transition.tsx) | Page transition wrapper |\r\n| [templates\u002Fanimated-list.tsx](templates\u002Fanimated-list.tsx) | Animated list component |\r\n\r\n## Quick Reference\r\n\r\n### Basic Animation\r\n\r\n```tsx\r\n\u003Cmotion.div\r\n  initial={{ opacity: 0, y: 20 }}\r\n  animate={{ opacity: 1, y: 0 }}\r\n  exit={{ opacity: 0, y: -20 }}\r\n  transition={{ duration: 0.3 }}\r\n>\r\n  Content\r\n\u003C\u002Fmotion.div>\r\n```\r\n\r\n### Hover & Tap\r\n\r\n```tsx\r\n\u003Cmotion.button\r\n  whileHover={{ scale: 1.05 }}\r\n  whileTap={{ scale: 0.95 }}\r\n  transition={{ type: \"spring\", stiffness: 400, damping: 17 }}\r\n>\r\n  Click me\r\n\u003C\u002Fmotion.button>\r\n```\r\n\r\n### Variants\r\n\r\n```tsx\r\nconst container = {\r\n  hidden: { opacity: 0 },\r\n  show: {\r\n    opacity: 1,\r\n    transition: { staggerChildren: 0.1 }\r\n  }\r\n};\r\n\r\nconst item = {\r\n  hidden: { opacity: 0, y: 20 },\r\n  show: { opacity: 1, y: 0 }\r\n};\r\n\r\n\u003Cmotion.ul variants={container} initial=\"hidden\" animate=\"show\">\r\n  {items.map(i => (\r\n    \u003Cmotion.li key={i} variants={item}>{i}\u003C\u002Fmotion.li>\r\n  ))}\r\n\u003C\u002Fmotion.ul>\r\n```\r\n\r\n### AnimatePresence (Exit Animations)\r\n\r\n```tsx\r\nimport { AnimatePresence, motion } from \"framer-motion\";\r\n\r\n\u003CAnimatePresence mode=\"wait\">\r\n  {isVisible && (\r\n    \u003Cmotion.div\r\n      key=\"modal\"\r\n      initial={{ opacity: 0 }}\r\n      animate={{ opacity: 1 }}\r\n      exit={{ opacity: 0 }}\r\n    >\r\n      Modal content\r\n    \u003C\u002Fmotion.div>\r\n  )}\r\n\u003C\u002FAnimatePresence>\r\n```\r\n\r\n### Scroll Trigger\r\n\r\n```tsx\r\n\u003Cmotion.div\r\n  initial={{ opacity: 0, y: 50 }}\r\n  whileInView={{ opacity: 1, y: 0 }}\r\n  viewport={{ once: true, margin: \"-100px\" }}\r\n  transition={{ duration: 0.5 }}\r\n>\r\n  Animates when scrolled into view\r\n\u003C\u002Fmotion.div>\r\n```\r\n\r\n### Drag\r\n\r\n```tsx\r\n\u003Cmotion.div\r\n  drag\r\n  dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}\r\n  dragElastic={0.1}\r\n>\r\n  Drag me\r\n\u003C\u002Fmotion.div>\r\n```\r\n\r\n### Layout Animation\r\n\r\n```tsx\r\n\u003Cmotion.div layout layoutId=\"shared-element\">\r\n  Content that animates when layout changes\r\n\u003C\u002Fmotion.div>\r\n```\r\n\r\n## Transition Types\r\n\r\n```tsx\r\n\u002F\u002F Tween (default)\r\ntransition={{ duration: 0.3, ease: \"easeOut\" }}\r\n\r\n\u002F\u002F Spring\r\ntransition={{ type: \"spring\", stiffness: 300, damping: 20 }}\r\n\r\n\u002F\u002F Spring presets\r\ntransition={{ type: \"spring\", bounce: 0.25 }}\r\n\r\n\u002F\u002F Inertia (for drag)\r\ntransition={{ type: \"inertia\", velocity: 50 }}\r\n```\r\n\r\n## Easing Functions\r\n\r\n```tsx\r\n\u002F\u002F Built-in easings\r\nease: \"linear\"\r\nease: \"easeIn\"\r\nease: \"easeOut\"\r\nease: \"easeInOut\"\r\nease: \"circIn\"\r\nease: \"circOut\"\r\nease: \"circInOut\"\r\nease: \"backIn\"\r\nease: \"backOut\"\r\nease: \"backInOut\"\r\n\r\n\u002F\u002F Custom cubic-bezier\r\nease: [0.17, 0.67, 0.83, 0.67]\r\n```\r\n\r\n## Reduced Motion\r\n\r\nAlways respect user preferences:\r\n\r\n```tsx\r\nimport { motion, useReducedMotion } from \"framer-motion\";\r\n\r\nfunction Component() {\r\n  const prefersReducedMotion = useReducedMotion();\r\n\r\n  return (\r\n    \u003Cmotion.div\r\n      initial={{ opacity: 0, y: prefersReducedMotion ? 0 : 20 }}\r\n      animate={{ opacity: 1, y: 0 }}\r\n      transition={{ duration: prefersReducedMotion ? 0 : 0.3 }}\r\n    >\r\n      Respects motion preferences\r\n    \u003C\u002Fmotion.div>\r\n  );\r\n}\r\n\r\n\u002F\u002F Or use media query\r\nconst variants = {\r\n  initial: { opacity: 0 },\r\n  animate: { opacity: 1 },\r\n};\r\n\r\n\u003Cmotion.div\r\n  variants={variants}\r\n  initial=\"initial\"\r\n  animate=\"animate\"\r\n  className=\"motion-reduce:transition-none\"\r\n>\r\n```\r\n\r\n## Common Patterns\r\n\r\n### Fade In Up\r\n\r\n```tsx\r\nconst fadeInUp = {\r\n  initial: { opacity: 0, y: 20 },\r\n  animate: { opacity: 1, y: 0 },\r\n  transition: { duration: 0.4 }\r\n};\r\n\r\n\u003Cmotion.div {...fadeInUp}>Content\u003C\u002Fmotion.div>\r\n```\r\n\r\n### Staggered List\r\n\r\n```tsx\r\nconst container = {\r\n  hidden: { opacity: 0 },\r\n  show: {\r\n    opacity: 1,\r\n    transition: { staggerChildren: 0.1, delayChildren: 0.2 }\r\n  }\r\n};\r\n\r\nconst item = {\r\n  hidden: { opacity: 0, x: -20 },\r\n  show: { opacity: 1, x: 0 }\r\n};\r\n```\r\n\r\n### Modal\r\n\r\n```tsx\r\n\u003CAnimatePresence>\r\n  {isOpen && (\r\n    \u003C>\r\n      {\u002F* Backdrop *\u002F}\r\n      \u003Cmotion.div\r\n        initial={{ opacity: 0 }}\r\n        animate={{ opacity: 1 }}\r\n        exit={{ opacity: 0 }}\r\n        className=\"fixed inset-0 bg-black\u002F50\"\r\n        onClick={onClose}\r\n      \u002F>\r\n      {\u002F* Modal *\u002F}\r\n      \u003Cmotion.div\r\n        initial={{ opacity: 0, scale: 0.95 }}\r\n        animate={{ opacity: 1, scale: 1 }}\r\n        exit={{ opacity: 0, scale: 0.95 }}\r\n        className=\"fixed inset-x-4 top-1\u002F2 -translate-y-1\u002F2 ...\"\r\n      >\r\n        Modal content\r\n      \u003C\u002Fmotion.div>\r\n    \u003C\u002F>\r\n  )}\r\n\u003C\u002FAnimatePresence>\r\n```\r\n\r\n### Accordion\r\n\r\n```tsx\r\n\u003Cmotion.div\r\n  initial={false}\r\n  animate={{ height: isOpen ? \"auto\" : 0 }}\r\n  transition={{ duration: 0.3, ease: \"easeInOut\" }}\r\n  className=\"overflow-hidden\"\r\n>\r\n  \u003Cdiv className=\"p-4\">Accordion content\u003C\u002Fdiv>\r\n\u003C\u002Fmotion.div>\r\n```\r\n\r\n## Best Practices\r\n\r\n1. **Use variants**: Cleaner code, easier orchestration\r\n2. **Respect reduced motion**: Always check `useReducedMotion`\r\n3. **Use `layout` sparingly**: Can be expensive, use only when needed\r\n4. **Exit animations**: Wrap with `AnimatePresence`\r\n5. **Spring for interactions**: More natural feel for hover\u002Ftap\r\n6. **Tween for page transitions**: More predictable timing\r\n7. **GPU-accelerated properties**: Prefer `opacity`, `scale`, `x`, `y` over `width`, `height`\r\n",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fasmayaseen\u002Fframer-motion",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":50,"prompt":60,"zipAvailable":61},[51,54,57],{"tool":52,"command":53},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill framer-motion",{"tool":55,"command":56},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill framer-motion",{"tool":58,"command":59},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill framer-motion","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fasmayaseen\u002Fframer-motion\u002FSKILL.md",true,[63,69,73,77,81,85,89,93,97,101,107],{"path":64,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":67,"sourceHtmlUrl":68},"examples\u002Flist-animations.md","REFERENCE","参考文档",12840,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fasmayaseen\u002Fframer-motion\u002Fexamples\u002Flist-animations.md",{"path":70,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":71,"sourceHtmlUrl":72},"examples\u002Fmicro-interactions.md",13152,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fasmayaseen\u002Fframer-motion\u002Fexamples\u002Fmicro-interactions.md",{"path":74,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":75,"sourceHtmlUrl":76},"examples\u002Fpage-transitions.md",9638,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fasmayaseen\u002Fframer-motion\u002Fexamples\u002Fpage-transitions.md",{"path":78,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":79,"sourceHtmlUrl":80},"examples\u002Fscroll-animations.md",10103,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fasmayaseen\u002Fframer-motion\u002Fexamples\u002Fscroll-animations.md",{"path":82,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":83,"sourceHtmlUrl":84},"reference\u002Fgestures.md",7332,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fasmayaseen\u002Fframer-motion\u002Freference\u002Fgestures.md",{"path":86,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":87,"sourceHtmlUrl":88},"reference\u002Fhooks.md",9025,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fasmayaseen\u002Fframer-motion\u002Freference\u002Fhooks.md",{"path":90,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":91,"sourceHtmlUrl":92},"reference\u002Fmotion-component.md",8074,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fasmayaseen\u002Fframer-motion\u002Freference\u002Fmotion-component.md",{"path":94,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":95,"sourceHtmlUrl":96},"reference\u002Fvariants.md",6935,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fasmayaseen\u002Fframer-motion\u002Freference\u002Fvariants.md",{"path":98,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":99,"sourceHtmlUrl":100},"skill-report.json",52543,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fasmayaseen\u002Fframer-motion\u002Fskill-report.json",{"path":102,"resourceType":103,"resourceTypeDesc":104,"sizeBytes":105,"sourceHtmlUrl":106},"templates\u002Fanimated-list.tsx","OTHER","其他",12469,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fasmayaseen\u002Fframer-motion\u002Ftemplates\u002Fanimated-list.tsx",{"path":108,"resourceType":103,"resourceTypeDesc":104,"sizeBytes":109,"sourceHtmlUrl":110},"templates\u002Fpage-transition.tsx",7392,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fasmayaseen\u002Fframer-motion\u002Ftemplates\u002Fpage-transition.tsx",[112,126,136,145,151,158],{"skillNo":113,"name":114,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":122,"publishedAt":35},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[117],{"categoryNo":118,"categoryName":119,"taxonomyType":120,"taxonomyTypeDesc":121},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[123,124,125],"model","model hierarchy","model hierarchy skill",{"skillNo":127,"name":128,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":132,"publishedAt":35},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[131],{"categoryNo":118,"categoryName":119,"taxonomyType":120,"taxonomyTypeDesc":121},[133,134,135],"MCP","zoom","zoom mcp",{"skillNo":137,"name":138,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":141,"publishedAt":35},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[142,143,144,134],"sdk","zoom apps sdk","apps",{"skillNo":146,"name":147,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":148,"categories":149,"keywords":150,"publishedAt":35},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[147],{"skillNo":152,"name":153,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":154,"categories":155,"keywords":157,"publishedAt":35},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[156],{"categoryNo":118,"categoryName":119,"taxonomyType":120,"taxonomyTypeDesc":121},[153],{"skillNo":159,"name":160,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":161,"categories":162,"keywords":163,"publishedAt":35},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[160]]