[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-133bbd79-796f-4d2b-9348-45e7a807e17f":3,"$f7RQPd8qWhP9it9RBI4qxW9jqiMePgbQ3Mbj9plnQG9M":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"133bbd79-796f-4d2b-9348-45e7a807e17f","fixing-motion-performance","审计和修复动画性能问题，包括布局抖动、合成器属性、滚动联动运动和模糊效果。当动画卡顿、过渡不流畅或审查CSS\u002FJS动画性能时使用。","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: fixing-motion-performance\ndescription: Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS\u002FJS animation performance.\nrisk: safe\nsource: community\n---\n\n# fixing-motion-performance\n\nFix animation performance issues.\n\n## how to use\n\n- `\u002Ffixing-motion-performance`\n  Apply these constraints to any UI animation work in this conversation.\n\n- `\u002Ffixing-motion-performance \u003Cfile>`\n  Review the file against all rules below and report:\n  - violations (quote the exact line or snippet)\n  - why it matters (one short sentence)\n  - a concrete fix (code-level suggestion)\n\nDo not migrate animation libraries unless explicitly requested. Apply rules within the existing stack.\n\n## When to Use\nReference these guidelines when:\n- adding or changing UI animations (CSS, WAAPI, Motion, rAF, GSAP)\n- refactoring janky interactions or transitions\n- implementing scroll-linked motion or reveal-on-scroll\n- animating layout, filters, masks, gradients, or CSS variables\n- reviewing components that use will-change, transforms, or measurement\n\n## rendering steps glossary\n\n- composite: transform, opacity\n- paint: color, borders, gradients, masks, images, filters\n- layout: size, position, flow, grid, flex\n\n## rule categories by priority\n\n| priority | category | impact |\n|----------|----------|--------|\n| 1 | never patterns | critical |\n| 2 | choose the mechanism | critical |\n| 3 | measurement | high |\n| 4 | scroll | high |\n| 5 | paint | medium-high |\n| 6 | layers | medium |\n| 7 | blur and filters | medium |\n| 8 | view transitions | low |\n| 9 | tool boundaries | critical |\n\n## quick reference\n\n### 1. never patterns (critical)\n\n- do not interleave layout reads and writes in the same frame\n- do not animate layout continuously on large or meaningful surfaces\n- do not drive animation from scrollTop, scrollY, or scroll events\n- no requestAnimationFrame loops without a stop condition\n- do not mix multiple animation systems that each measure or mutate layout\n\n### 2. choose the mechanism (critical)\n\n- default to transform and opacity for motion\n- use JS-driven animation only when interaction requires it\n- paint or layout animation is acceptable only on small, isolated surfaces\n- one-shot effects are acceptable more often than continuous motion\n- prefer downgrading technique over removing motion entirely\n\n### 3. measurement (high)\n\n- measure once, then animate via transform or opacity\n- batch all DOM reads before writes\n- do not read layout repeatedly during an animation\n- prefer FLIP-style transitions for layout-like effects\n- prefer approaches that batch measurement and writes\n\n### 4. scroll (high)\n\n- prefer Scroll or View Timelines for scroll-linked motion when available\n- use IntersectionObserver for visibility and pausing\n- do not poll scroll position for animation\n- pause or stop animations when off-screen\n- scroll-linked motion must not trigger continuous layout or paint on large surfaces\n\n### 5. paint (medium-high)\n\n- paint-triggering animation is allowed only on small, isolated elements\n- do not animate paint-heavy properties on large containers\n- do not animate CSS variables for transform, opacity, or position\n- do not animate inherited CSS variables\n- scope animated CSS variables locally and avoid inheritance\n\n### 6. layers (medium)\n\n- compositor motion requires layer promotion, never assume it\n- use will-change temporarily and surgically\n- avoid many or large promoted layers\n- validate layer behavior with tooling when performance matters\n\n### 7. blur and filters (medium)\n\n- keep blur animation small (\u003C=8px)\n- use blur only for short, one-time effects\n- never animate blur continuously\n- never animate blur on large surfaces\n- prefer opacity and translate before blur\n\n### 8. view transitions (low)\n\n- use view transitions only for navigation-level changes\n- avoid view transitions for interaction-heavy UI\n- avoid view transitions when interruption or cancellation is required\n- treat size changes as potentially layout-triggering\n\n### 9. tool boundaries (critical)\n\n- do not migrate or rewrite animation libraries unless explicitly requested\n- apply these rules within the existing animation system\n- never partially migrate APIs or mix styles within the same component\n\n## common fixes\n\n```css\n\u002F* layout thrashing: animate transform instead of width *\u002F\n\u002F* before *\u002F .panel { transition: width 0.3s; }\n\u002F* after *\u002F  .panel { transition: transform 0.3s; }\n\n\u002F* scroll-linked: use scroll-timeline instead of JS *\u002F\n\u002F* before *\u002F window.addEventListener('scroll', () => el.style.opacity = scrollY \u002F 500)\n\u002F* after *\u002F  .reveal { animation: fade-in linear; animation-timeline: view(); }\n```\n\n```js\n\u002F\u002F measurement: batch reads before writes (FLIP)\n\u002F\u002F before — layout thrash\nel.style.left = el.getBoundingClientRect().left + 10 + 'px';\n\u002F\u002F after — measure once, animate via transform\nconst first = el.getBoundingClientRect();\nel.classList.add('moved');\nconst last = el.getBoundingClientRect();\nel.style.transform = `translateX(${first.left - last.left}px)`;\nrequestAnimationFrame(() => { el.style.transition = 'transform 0.3s'; el.style.transform = ''; });\n```\n\n## review guidance\n\n- enforce critical rules first (never patterns, tool boundaries)\n- choose the least expensive rendering work that matches the intent\n- for any non-default choice, state the constraint that justifies it (surface size, duration, or interaction requirement)\n- when reviewing, prefer actionable notes and concrete alternatives over theory\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,99,2027,"2026-05-16 13:18:23",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"2d7982ad-24d6-45af-8db3-d06434565d61","1.0.0","fixing-motion-performance.zip",2524,"uploads\u002Fskills\u002F133bbd79-796f-4d2b-9348-45e7a807e17f\u002Ffixing-motion-performance.zip","459a943ca51f1053ddb11d83157796c1e8f200310732cbf5c30532fe95c783b7","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":5910}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]