[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71K5DYRWWJGASCCMB7EAC9B":3,"skill-same:01M71K5DYRWWJGASCCMB7EAC9B":88},{"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":34,"publishedAt":55,"linkOnly":56,"markdownContent":57,"markdownBody":58,"frontMatter":59,"refName":67,"commitSha":68,"skillDirectory":69,"forksCount":70,"repositoryHtmlUrl":71,"repositoryHomepageUrl":6,"ownerHtmlUrl":72,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":73,"install":74,"resources":87},"01M71K5DYRWWJGASCCMB7EAC9B","motion-design",null,"Use when implementing motion design — page transitions, element animations, micro-interactions, layout animations. Covers Motion (ex Framer Motion), View Transitions API, auto-animate, SVG animation (Rive, Lottie), and accessibility.","KeiSeiLab\u002FKeiSeiKit","KeiSeiLab","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F283315582?v=4","01M71K2EW81JRFHSGF0T844B32","KeiSei Lab","01M71K2EWXTB52KWC65E55S6M2",7,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Fmotion-design\u002FSKILL.md",[18,23,26,29],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54],"motion","motion design","design","interaction","transition","astro","react","api","framer motion","when","rive","false","svelte","auto","auto-detect","implementing","element","loading","Lottie","Animation","2026-11-10 10:12:30",false,"---\nname: motion-design\ndescription: Use when implementing motion design — page transitions, element animations, micro-interactions, layout animations. Covers Motion (ex Framer Motion), View Transitions API, auto-animate, SVG animation (Rive, Lottie), and accessibility.\narguments:\n  - name: type\n    description: \"Type: page-transition, micro-interaction, layout-animation, svg-animation, loading, hover (auto-detect if omitted)\"\n    required: false\n  - name: framework\n    description: \"Framework: react, next, astro, vue, svelte, vanilla (auto-detect if omitted)\"\n    required: false\n---\n\n# Motion Design Skill\n\n## Decision Matrix — Pick Library\n\n| Need | Library | Bundle | Why |\n|------|---------|--------|-----|\n| React component animations | Motion 12 | ~32KB gzip | Best React DX, layout animations |\n| Page transitions (MPA) | View Transitions API | 0KB | Native browser API |\n| Page transitions (Astro) | Astro View Transitions | 0KB | Built-in, zero JS |\n| Zero-config list animations | AutoAnimate | ~2KB gzip | One line, FLIP-based |\n| Interactive vector graphics | Rive | ~78KB WASM | State machines, 60fps |\n| After Effects exports | Lottie\u002FdotLottie | ~50KB runtime | Huge asset library |\n| SVG path morphing | GSAP MorphSVG | included in gsap | Now free, best morph engine |\n| Line drawing | CSS stroke-dasharray | 0KB | Pure CSS, no library |\n\n---\n\n## 1. Motion (ex Framer Motion)\n\n**Install:** `npm i motion`\n**Bundle:** ~32KB min+gzip\n\n### Core API\n\n```jsx\nimport { motion, AnimatePresence } from \"motion\u002Freact\";\n\n\u002F\u002F Basic animation\n\u003Cmotion.div\n  initial={{ opacity: 0, y: 20 }}\n  animate={{ opacity: 1, y: 0 }}\n  exit={{ opacity: 0, y: -20 }}\n  transition={{ duration: 0.3, ease: \"easeOut\" }}\n>\n  Content\n\u003C\u002Fmotion.div>\n\n\u002F\u002F Layout animation (FLIP under the hood)\n\u003Cmotion.div layout layoutId=\"card-expand\">\n  {isExpanded ? \u003CExpandedCard \u002F> : \u003CCompactCard \u002F>}\n\u003C\u002Fmotion.div>\n\n\u002F\u002F AnimatePresence — exit animations\n\u003CAnimatePresence mode=\"wait\">\n  {items.map(item => (\n    \u003Cmotion.div\n      key={item.id}\n      initial={{ opacity: 0, scale: 0.9 }}\n      animate={{ opacity: 1, scale: 1 }}\n      exit={{ opacity: 0, scale: 0.9 }}\n    \u002F>\n  ))}\n\u003C\u002FAnimatePresence>\n```\n\n### Gestures\n\n```jsx\n\u003Cmotion.button\n  whileHover={{ scale: 1.05 }}\n  whileTap={{ scale: 0.95 }}\n  transition={{ type: \"spring\", stiffness: 400, damping: 17 }}\n>\n  Click me\n\u003C\u002Fmotion.button>\n\n\u002F\u002F Drag\n\u003Cmotion.div\n  drag=\"x\"\n  dragConstraints={{ left: -200, right: 200 }}\n  dragElastic={0.1}\n\u002F>\n```\n\n### Scroll-Linked\n\n```jsx\nimport { useScroll, useTransform, motion } from \"motion\u002Freact\";\n\nfunction ParallaxHero() {\n  const { scrollYProgress } = useScroll();\n  const y = useTransform(scrollYProgress, [0, 1], [0, -300]);\n  const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);\n\n  return (\n    \u003Cmotion.div style={{ y, opacity }}>\n      Hero Content\n    \u003C\u002Fmotion.div>\n  );\n}\n```\n\n### AnimateView (View Transitions integration)\n\n```jsx\nimport { AnimateView } from \"motion\u002Freact\";\n\n\u003CAnimateView>\n  \u003CRoutes>\n    \u003CRoute path=\"\u002F\" element={\u003CHome \u002F>} \u002F>\n    \u003CRoute path=\"\u002Fabout\" element={\u003CAbout \u002F>} \u002F>\n  \u003C\u002FRoutes>\n\u003C\u002FAnimateView>\n```\n\n---\n\n## 2. View Transitions API\n\n### Vanilla Implementation\n\n```js\n\u002F\u002F Single-document transition\ndocument.startViewTransition(() => {\n  container.innerHTML = newContent;\n});\n```\n\n```css\n::view-transition-old(root) { animation: fade-out 0.2s ease-out; }\n::view-transition-new(root) { animation: fade-in 0.3s ease-in; }\n\n.hero-image { view-transition-name: hero; }\n```\n\n### Astro Integration (Built-in)\n\n```astro\n---\nimport { ViewTransitions } from \"astro:transitions\";\n---\n\u003Chtml>\n  \u003Chead>\u003CViewTransitions \u002F>\u003C\u002Fhead>\n  \u003Cbody>\u003Cslot \u002F>\u003C\u002Fbody>\n\u003C\u002Fhtml>\n\n\u003Cimg transition:name=\"hero\" src=\"\u002Fhero.jpg\" \u002F>\n\u003Ch1 transition:animate=\"slide\">Page Title\u003C\u002Fh1>\n```\n\nBuilt-in animation presets: `fade`, `slide`, `morph`, `none`.\n\n---\n\n## 3. AutoAnimate\n\n**Install:** `npm i @formkit\u002Fauto-animate`\n**Zero config.** Uses FLIP technique internally.\n\n```jsx\nimport { useAutoAnimate } from \"@formkit\u002Fauto-animate\u002Freact\";\n\nfunction TodoList({ items }) {\n  const [parent] = useAutoAnimate();\n  return (\n    \u003Cul ref={parent}>\n      {items.map(item => \u003Cli key={item.id}>{item.text}\u003C\u002Fli>)}\n    \u003C\u002Ful>\n  );\n}\n\n\u002F\u002F Vanilla JS\nimport autoAnimate from \"@formkit\u002Fauto-animate\";\nautoAnimate(document.getElementById(\"list\"));\n```\n\n**Best for:** List reordering, add\u002Fremove items, accordion expand\u002Fcollapse.\n\n---\n\n## 4. SVG Animation\n\n### Rive\n\n```jsx\nimport Rive from \"@rive-app\u002Freact-canvas\";\n\n\u003CRive\n  src=\"\u002Fanimations\u002Fhero.riv\"\n  stateMachines=\"MainState\"\n  style={{ width: 400, height: 400 }}\n\u002F>\n```\n\n**Key features:** State Machines, layout engine, scroll-linked via data inputs.\n**When to use:** Interactive illustrations, mascots, loading states, onboarding flows.\n\n### Lottie \u002F dotLottie\n\n```jsx\nimport { DotLottieReact } from \"@lottiefiles\u002Fdotlottie-react\";\n\n\u003CDotLottieReact\n  src=\"\u002Fanimations\u002Fhero.lottie\"\n  loop\n  autoplay\n  style={{ width: 300, height: 300 }}\n\u002F>\n```\n\n**Rive vs Lottie:**\n| Factor | Rive | Lottie |\n|--------|------|--------|\n| Interactivity | Built-in state machine | Manual JS coding |\n| Design tool | Rive editor | After Effects + plugin |\n| File size | Smaller (binary) | Larger (JSON) |\n| Asset ecosystem | Growing | Massive marketplace |\n\n### SVG Morphing\n\n**GSAP MorphSVG** (now free with gsap):\n```js\ngsap.to(\"#star\", { morphSVG: \"#circle\", duration: 1, ease: \"power2.inOut\" });\n```\n\n**SVG points limit:** Keep under 200 points for smooth 60fps morphing.\n\n### Line Drawing (Pure CSS)\n\n```css\n.svg-line {\n  stroke-dasharray: 1000;\n  stroke-dashoffset: 1000;\n  animation: draw 2s ease forwards;\n}\n@keyframes draw { to { stroke-dashoffset: 0; } }\n```\n\nGet path length: `document.querySelector(\"path\").getTotalLength()`.\n\n---\n\n## 5. Micro-Interaction Patterns\n\n### Button Hover\u002FTap\n\n```jsx\n\u003Cmotion.button\n  whileHover={{ scale: 1.03, boxShadow: \"0 4px 20px rgba(0,0,0,0.15)\" }}\n  whileTap={{ scale: 0.97 }}\n  transition={{ type: \"spring\", stiffness: 500, damping: 25 }}\n\u002F>\n```\n\n### Toast\u002FNotification Enter\n\n```jsx\n\u003CAnimatePresence>\n  {toast && (\n    \u003Cmotion.div\n      initial={{ opacity: 0, y: 50, scale: 0.9 }}\n      animate={{ opacity: 1, y: 0, scale: 1 }}\n      exit={{ opacity: 0, y: 20, scale: 0.95 }}\n      transition={{ type: \"spring\", damping: 20 }}\n    \u002F>\n  )}\n\u003C\u002FAnimatePresence>\n```\n\n### Staggered List\n\n```jsx\nconst container = { animate: { transition: { staggerChildren: 0.06 } } };\nconst item = { initial: { opacity: 0, y: 15 }, animate: { opacity: 1, y: 0 } };\n\n\u003Cmotion.ul variants={container} initial=\"initial\" animate=\"animate\">\n  {items.map(i => \u003Cmotion.li key={i} variants={item} \u002F>)}\n\u003C\u002Fmotion.ul>\n```\n\n---\n\n## 6. Timing & Easing Reference\n\n### Duration Guidelines\n\n| Element | Duration | Easing |\n|---------|----------|--------|\n| Button hover | 150-200ms | ease-out |\n| Tooltip appear | 100-150ms | ease-out |\n| Modal enter | 200-300ms | ease-out \u002F spring |\n| Modal exit | 150-200ms | ease-in |\n| Page transition | 200-400ms | ease-in-out |\n| Layout shift | 200-350ms | ease-out \u002F spring |\n| Scroll reveal | 400-600ms | ease-out |\n\n### Spring Presets (Motion)\n\n```js\n\u002F\u002F Snappy UI feedback\n{ type: \"spring\", stiffness: 500, damping: 25 }\n\u002F\u002F Smooth layout\n{ type: \"spring\", stiffness: 300, damping: 30 }\n\u002F\u002F Bouncy\u002Fplayful\n{ type: \"spring\", stiffness: 400, damping: 10 }\n```\n\n---\n\n## 7. Accessibility\n\n### prefers-reduced-motion\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n```\n\n```jsx\n\u002F\u002F Motion respects prefers-reduced-motion by default\nconst prefersReduced = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n```\n\n### Guidelines\n\n- Never rely on animation alone to convey information\n- Ensure all animated content is accessible via keyboard\n- Provide static fallback for critical content\n- Test with reduced motion enabled in OS settings\n\n---\n\n## Workflow\n\n1. **Identify animation type** — page transition, reveal, micro-interaction, SVG\n2. **Pick library** — use Decision Matrix above\n3. **Define timing** — use Duration Guidelines, spring presets\n4. **Implement** — start with `initial` + `animate` states\n5. **Add exit** — wrap in AnimatePresence for unmount animations\n6. **Add a11y** — prefers-reduced-motion, keyboard testing\n7. **Performance audit** — Chrome DevTools, check for layout thrashing\n","# Motion Design Skill\n\n## Decision Matrix — Pick Library\n\n| Need | Library | Bundle | Why |\n|------|---------|--------|-----|\n| React component animations | Motion 12 | ~32KB gzip | Best React DX, layout animations |\n| Page transitions (MPA) | View Transitions API | 0KB | Native browser API |\n| Page transitions (Astro) | Astro View Transitions | 0KB | Built-in, zero JS |\n| Zero-config list animations | AutoAnimate | ~2KB gzip | One line, FLIP-based |\n| Interactive vector graphics | Rive | ~78KB WASM | State machines, 60fps |\n| After Effects exports | Lottie\u002FdotLottie | ~50KB runtime | Huge asset library |\n| SVG path morphing | GSAP MorphSVG | included in gsap | Now free, best morph engine |\n| Line drawing | CSS stroke-dasharray | 0KB | Pure CSS, no library |\n\n---\n\n## 1. Motion (ex Framer Motion)\n\n**Install:** `npm i motion`\n**Bundle:** ~32KB min+gzip\n\n### Core API\n\n```jsx\nimport { motion, AnimatePresence } from \"motion\u002Freact\";\n\n\u002F\u002F Basic animation\n\u003Cmotion.div\n  initial={{ opacity: 0, y: 20 }}\n  animate={{ opacity: 1, y: 0 }}\n  exit={{ opacity: 0, y: -20 }}\n  transition={{ duration: 0.3, ease: \"easeOut\" }}\n>\n  Content\n\u003C\u002Fmotion.div>\n\n\u002F\u002F Layout animation (FLIP under the hood)\n\u003Cmotion.div layout layoutId=\"card-expand\">\n  {isExpanded ? \u003CExpandedCard \u002F> : \u003CCompactCard \u002F>}\n\u003C\u002Fmotion.div>\n\n\u002F\u002F AnimatePresence — exit animations\n\u003CAnimatePresence mode=\"wait\">\n  {items.map(item => (\n    \u003Cmotion.div\n      key={item.id}\n      initial={{ opacity: 0, scale: 0.9 }}\n      animate={{ opacity: 1, scale: 1 }}\n      exit={{ opacity: 0, scale: 0.9 }}\n    \u002F>\n  ))}\n\u003C\u002FAnimatePresence>\n```\n\n### Gestures\n\n```jsx\n\u003Cmotion.button\n  whileHover={{ scale: 1.05 }}\n  whileTap={{ scale: 0.95 }}\n  transition={{ type: \"spring\", stiffness: 400, damping: 17 }}\n>\n  Click me\n\u003C\u002Fmotion.button>\n\n\u002F\u002F Drag\n\u003Cmotion.div\n  drag=\"x\"\n  dragConstraints={{ left: -200, right: 200 }}\n  dragElastic={0.1}\n\u002F>\n```\n\n### Scroll-Linked\n\n```jsx\nimport { useScroll, useTransform, motion } from \"motion\u002Freact\";\n\nfunction ParallaxHero() {\n  const { scrollYProgress } = useScroll();\n  const y = useTransform(scrollYProgress, [0, 1], [0, -300]);\n  const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);\n\n  return (\n    \u003Cmotion.div style={{ y, opacity }}>\n      Hero Content\n    \u003C\u002Fmotion.div>\n  );\n}\n```\n\n### AnimateView (View Transitions integration)\n\n```jsx\nimport { AnimateView } from \"motion\u002Freact\";\n\n\u003CAnimateView>\n  \u003CRoutes>\n    \u003CRoute path=\"\u002F\" element={\u003CHome \u002F>} \u002F>\n    \u003CRoute path=\"\u002Fabout\" element={\u003CAbout \u002F>} \u002F>\n  \u003C\u002FRoutes>\n\u003C\u002FAnimateView>\n```\n\n---\n\n## 2. View Transitions API\n\n### Vanilla Implementation\n\n```js\n\u002F\u002F Single-document transition\ndocument.startViewTransition(() => {\n  container.innerHTML = newContent;\n});\n```\n\n```css\n::view-transition-old(root) { animation: fade-out 0.2s ease-out; }\n::view-transition-new(root) { animation: fade-in 0.3s ease-in; }\n\n.hero-image { view-transition-name: hero; }\n```\n\n### Astro Integration (Built-in)\n\n```astro\n---\nimport { ViewTransitions } from \"astro:transitions\";\n---\n\u003Chtml>\n  \u003Chead>\u003CViewTransitions \u002F>\u003C\u002Fhead>\n  \u003Cbody>\u003Cslot \u002F>\u003C\u002Fbody>\n\u003C\u002Fhtml>\n\n\u003Cimg transition:name=\"hero\" src=\"\u002Fhero.jpg\" \u002F>\n\u003Ch1 transition:animate=\"slide\">Page Title\u003C\u002Fh1>\n```\n\nBuilt-in animation presets: `fade`, `slide`, `morph`, `none`.\n\n---\n\n## 3. AutoAnimate\n\n**Install:** `npm i @formkit\u002Fauto-animate`\n**Zero config.** Uses FLIP technique internally.\n\n```jsx\nimport { useAutoAnimate } from \"@formkit\u002Fauto-animate\u002Freact\";\n\nfunction TodoList({ items }) {\n  const [parent] = useAutoAnimate();\n  return (\n    \u003Cul ref={parent}>\n      {items.map(item => \u003Cli key={item.id}>{item.text}\u003C\u002Fli>)}\n    \u003C\u002Ful>\n  );\n}\n\n\u002F\u002F Vanilla JS\nimport autoAnimate from \"@formkit\u002Fauto-animate\";\nautoAnimate(document.getElementById(\"list\"));\n```\n\n**Best for:** List reordering, add\u002Fremove items, accordion expand\u002Fcollapse.\n\n---\n\n## 4. SVG Animation\n\n### Rive\n\n```jsx\nimport Rive from \"@rive-app\u002Freact-canvas\";\n\n\u003CRive\n  src=\"\u002Fanimations\u002Fhero.riv\"\n  stateMachines=\"MainState\"\n  style={{ width: 400, height: 400 }}\n\u002F>\n```\n\n**Key features:** State Machines, layout engine, scroll-linked via data inputs.\n**When to use:** Interactive illustrations, mascots, loading states, onboarding flows.\n\n### Lottie \u002F dotLottie\n\n```jsx\nimport { DotLottieReact } from \"@lottiefiles\u002Fdotlottie-react\";\n\n\u003CDotLottieReact\n  src=\"\u002Fanimations\u002Fhero.lottie\"\n  loop\n  autoplay\n  style={{ width: 300, height: 300 }}\n\u002F>\n```\n\n**Rive vs Lottie:**\n| Factor | Rive | Lottie |\n|--------|------|--------|\n| Interactivity | Built-in state machine | Manual JS coding |\n| Design tool | Rive editor | After Effects + plugin |\n| File size | Smaller (binary) | Larger (JSON) |\n| Asset ecosystem | Growing | Massive marketplace |\n\n### SVG Morphing\n\n**GSAP MorphSVG** (now free with gsap):\n```js\ngsap.to(\"#star\", { morphSVG: \"#circle\", duration: 1, ease: \"power2.inOut\" });\n```\n\n**SVG points limit:** Keep under 200 points for smooth 60fps morphing.\n\n### Line Drawing (Pure CSS)\n\n```css\n.svg-line {\n  stroke-dasharray: 1000;\n  stroke-dashoffset: 1000;\n  animation: draw 2s ease forwards;\n}\n@keyframes draw { to { stroke-dashoffset: 0; } }\n```\n\nGet path length: `document.querySelector(\"path\").getTotalLength()`.\n\n---\n\n## 5. Micro-Interaction Patterns\n\n### Button Hover\u002FTap\n\n```jsx\n\u003Cmotion.button\n  whileHover={{ scale: 1.03, boxShadow: \"0 4px 20px rgba(0,0,0,0.15)\" }}\n  whileTap={{ scale: 0.97 }}\n  transition={{ type: \"spring\", stiffness: 500, damping: 25 }}\n\u002F>\n```\n\n### Toast\u002FNotification Enter\n\n```jsx\n\u003CAnimatePresence>\n  {toast && (\n    \u003Cmotion.div\n      initial={{ opacity: 0, y: 50, scale: 0.9 }}\n      animate={{ opacity: 1, y: 0, scale: 1 }}\n      exit={{ opacity: 0, y: 20, scale: 0.95 }}\n      transition={{ type: \"spring\", damping: 20 }}\n    \u002F>\n  )}\n\u003C\u002FAnimatePresence>\n```\n\n### Staggered List\n\n```jsx\nconst container = { animate: { transition: { staggerChildren: 0.06 } } };\nconst item = { initial: { opacity: 0, y: 15 }, animate: { opacity: 1, y: 0 } };\n\n\u003Cmotion.ul variants={container} initial=\"initial\" animate=\"animate\">\n  {items.map(i => \u003Cmotion.li key={i} variants={item} \u002F>)}\n\u003C\u002Fmotion.ul>\n```\n\n---\n\n## 6. Timing & Easing Reference\n\n### Duration Guidelines\n\n| Element | Duration | Easing |\n|---------|----------|--------|\n| Button hover | 150-200ms | ease-out |\n| Tooltip appear | 100-150ms | ease-out |\n| Modal enter | 200-300ms | ease-out \u002F spring |\n| Modal exit | 150-200ms | ease-in |\n| Page transition | 200-400ms | ease-in-out |\n| Layout shift | 200-350ms | ease-out \u002F spring |\n| Scroll reveal | 400-600ms | ease-out |\n\n### Spring Presets (Motion)\n\n```js\n\u002F\u002F Snappy UI feedback\n{ type: \"spring\", stiffness: 500, damping: 25 }\n\u002F\u002F Smooth layout\n{ type: \"spring\", stiffness: 300, damping: 30 }\n\u002F\u002F Bouncy\u002Fplayful\n{ type: \"spring\", stiffness: 400, damping: 10 }\n```\n\n---\n\n## 7. Accessibility\n\n### prefers-reduced-motion\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n```\n\n```jsx\n\u002F\u002F Motion respects prefers-reduced-motion by default\nconst prefersReduced = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n```\n\n### Guidelines\n\n- Never rely on animation alone to convey information\n- Ensure all animated content is accessible via keyboard\n- Provide static fallback for critical content\n- Test with reduced motion enabled in OS settings\n\n---\n\n## Workflow\n\n1. **Identify animation type** — page transition, reveal, micro-interaction, SVG\n2. **Pick library** — use Decision Matrix above\n3. **Define timing** — use Duration Guidelines, spring presets\n4. **Implement** — start with `initial` + `animate` states\n5. **Add exit** — wrap in AnimatePresence for unmount animations\n6. **Add a11y** — prefers-reduced-motion, keyboard testing\n7. **Performance audit** — Chrome DevTools, check for layout thrashing\n",{"name":5,"arguments":60,"description":7},[61,64],{"name":62,"required":56,"description":63},"type","Type: page-transition, micro-interaction, layout-animation, svg-animation, loading, hover (auto-detect if omitted)",{"name":65,"required":56,"description":66},"framework","Framework: react, next, astro, vue, svelte, vanilla (auto-detect if omitted)","main","32e85218a997294f68da27ff3dfd638196186ae5","skills\u002Fmotion-design",8,"https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit","https:\u002F\u002Fgithub.com\u002FKeiSeiLab","2026-10-11 11:17:46",{"source":8,"skillName":5,"commands":75,"prompt":85,"zipAvailable":86},[76,79,82],{"tool":77,"command":78},"npx","npx skills add KeiSeiLab\u002FKeiSeiKit --skill motion-design",{"tool":80,"command":81},"bunx","bunx skills add KeiSeiLab\u002FKeiSeiKit --skill motion-design",{"tool":83,"command":84},"pnpm","pnpm dlx skills add KeiSeiLab\u002FKeiSeiKit --skill motion-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Fmotion-design\u002FSKILL.md",true,[],[89,119,142,173,198,224],{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":98,"publishedAt":55},"01M71K887N78V089XR5BWT0JAV","wave-audit","3-wave parallel audit — Wave 1 discovery (4 agents), Wave 2 verification (4 agents), Wave 3 cross-optimization (1 synthesizer). Each wave runs agents in parallel. Combines security review, runtime analysis, quality check, and constructor pattern into one unified workflow with evidence grading and Go\u002FNo-Go verdict.","https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Fwave-audit\u002FSKILL.md",[95],{"categoryNo":96,"categoryName":97,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118],"wave audit","audit","unified workflow","workflow","analysis","review","verification","security review","pattern","grading","go","security","parallel","evidence","runtime","quality check","discovery","Optimization","one","check",{"skillNo":120,"name":121,"nameZh":6,"description":122,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":123,"categories":124,"keywords":125,"publishedAt":55},"01M71K85100JQS4Y10EGCTWQXW","vm-provision","End-to-end VPS provisioning — select provider → plan → provision → harden → verify (ssh-check + firewall-diff hard-gate) → handoff. 6 phases, ≥6 AskUserQuestion calls, defensive-only. Stops if either verification primitive fails.","https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Fvm-provision\u002FSKILL.md",[],[126,127,128,129,130,131,132,133,134,135,117,42,136,118,105,137,138,139,140,141],"vm","vm provision","firewall","diff","provider","select","end","calls","only","either","hetzner","plan","defensive","verify","intent","line",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":146,"licenseFileUrl":6,"sourceHtmlUrl":147,"categories":148,"keywords":153,"publishedAt":55},"01M71K80ZRH2H5ES83QS97BB91","visual-explainer","Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.","MIT","https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Fvisual-explainer\u002FSKILL.md",[149,150],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":151,"categoryName":152,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000033","数据分析师",[154,155,156,157,158,159,160,161,137,162,163,164,165,166,167,168,169,170,171,172],"visual","visual explainer","explainer","project","files","image","you","architecture","generate","present","concepts","table","as","view","for","ascii table","ascii","surf","use",{"skillNo":174,"name":175,"nameZh":6,"description":176,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":177,"categories":178,"keywords":180,"publishedAt":55},"01M71K7VSD5ZWN26QJEC4T0770","video-gen","Use when generating video from frame sequences — FFmpeg extraction, WebP\u002FAVIF conversion, sprite sheets, scroll-synced playback, video encoding\u002Ftranscoding. Covers the full pipeline from video source to web-ready frame sequence or optimized video.","https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Fvideo-gen\u002FSKILL.md",[179],{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[181,182,183,184,185,186,187,188,46,44,159,189,190,191,192,193,194,195,196,197],"Video","gen","video gen","ready","pipeline","default","generated","synced","conversion","directory","sequences","sequence","source","full","path","webp","target",{"skillNo":199,"name":200,"nameZh":6,"description":201,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":202,"categories":203,"keywords":207,"publishedAt":55},"01M71K7R88RM8ENVCRZHZSMM5T","test-matrix","Use when a project needs testing BEYOND unit tests — fuzzing, property-based, load, E2E, or mutation. Five-phase hub-and-spoke pipeline composes the right mix per language × critical path × CI target, scaffolds configs + corpus + fixtures, wires CI jobs, and defines the crash\u002Fregression triage workflow. Pure-click: every decision except intake is an AskUserQuestion.","https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Ftest-matrix\u002FSKILL.md",[204],{"categoryNo":205,"categoryName":206,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[208,209,210,211,197,212,157,213,185,214,215,216,217,218,219,220,221,172,222,223],"test","matrix","test matrix","unit","click","regression","mix","intake","testing","decision","ci","tests","e2e","mutation","load","fuzzing",{"skillNo":225,"name":226,"nameZh":6,"description":227,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":228,"categories":229,"keywords":231,"publishedAt":55},"01M71K7N3ZY9FMMH3CSE1H8K5J","test-gen","Use when generating tests for untested code — happy path, edge cases, error handling","https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Ftest-gen\u002FSKILL.md",[230],{"categoryNo":205,"categoryName":206,"taxonomyType":21,"taxonomyTypeDesc":22},[232,182,208,233,197,168,234,219,235,172,44,236,237,238,239,195],"test gen","error","true","edge","file","code","error handling","name"]