用途：stitch-animate 是一个动效设计技能，用于给已生成的 Stitch 组件添加有目的的动画，而不是重建组件。应在组件生成（stitch-nextjs-components 或 stitch-svelte-components）之后运行。
主要能力：按三个层级分配动画——Micro（悬停、聚焦、激活等交互状态，100–200ms，ease-out）、Meso（元素进出视口，250–400ms，cubic-bezier(0,0,0.2,1)）、Macro（整页或区块过渡，400–600ms，ease-in-out）。原则是拿不准就用 Micro，过度动画比没有动画更糟。
使用方式：先审计组件文件，识别需要各层级的元素；再读取 package.json 判断框架并选择方案。Next.js/React 用 CSS 加可选 Framer Motion（npm install framer-motion），SvelteKit/Svelte 用内置过渡加 CSS，原生 HTML 仅用 CSS。修改现有文件时先读取结构，Micro 只加 CSS 类不改逻辑，Meso/Macro 用 motion 组件或 transition 指令包裹，并在主 CSS 中加入 reduced-motion 覆盖。
限制：必须始终添加 prefers-reduced-motion 覆盖，且该媒体查询需在动画 CSS 之后加载。不要动画导航链接（仅颜色/下划线过渡）、滚动行为、数据表格，每屏只选 2–3 个锚点动画。常见问题包括动画未播放、Framer Motion 水合错误（需 'use client'）、Svelte 过渡播放两次、动画卡顿（谨慎使用 will-change）等。参考资料为 resources/animation-patterns.md。