{"id":"e6c6057e-fbdd-44a4-ae94-1be665b847fb","shortId":"XFKWjc","kind":"skill","title":"fixing-motion-performance","tagline":"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/JS animation performance.","description":"# fixing-motion-performance\n\nFix animation performance issues.\n\n## how to use\n\n- `/fixing-motion-performance`\n  Apply these constraints to any UI animation work in this conversation.\n\n- `/fixing-motion-performance <file>`\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 (<=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/* layout thrashing: animate transform instead of width */\n/* before */ .panel { transition: width 0.3s; }\n/* after */  .panel { transition: transform 0.3s; }\n\n/* scroll-linked: use scroll-timeline instead of JS */\n/* before */ window.addEventListener('scroll', () => el.style.opacity = scrollY / 500)\n/* after */  .reveal { animation: fade-in linear; animation-timeline: view(); }\n```\n\n```js\n// measurement: batch reads before writes (FLIP)\n// before — layout thrash\nel.style.left = el.getBoundingClientRect().left + 10 + 'px';\n// 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.","tags":["fixing","motion","performance","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-fixing-motion-performance","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/fixing-motion-performance","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34793 github stars · SKILL.md body (5,598 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-24T00:50:57.327Z","embedding":null,"createdAt":"2026-04-18T21:37:19.949Z","updatedAt":"2026-04-24T00:50:57.327Z","lastSeenAt":"2026-04-24T00:50:57.327Z","tsv":"'/fixing-motion-performance':45,57 '0.3':614,620,686 '1':177,215 '10':662 '2':181,269 '3':186,320 '4':189,362 '5':192,412 '500':637 '6':197,462 '7':200,494 '8':205,529 '8px':503 '9':209,567 'accept':296,307 'action':730 'ad':108 'allow':422 'altern':734 'anim':8,25,32,39,52,90,112,133,232,243,261,285,294,326,344,389,393,420,430,440,450,455,501,514,518,576,587,605,640,646,667 'animation-timelin':645 'api':592 'appli':46,95,581 'approach':356 'ask':770 'assum':471 'audit':5 'avail':376 'avoid':460,480,542,550 'batch':331,358,651 'behavior':488 'blur':21,201,495,500,505,515,519,528 'border':159 'boundari':211,569,698,778 'cancel':556 'categori':171,175 'chang':110,147,476,541,561 'choic':714 'choos':182,270,699 'clarif':772 'clear':745 'code':84 'code-level':83 'color':158 'common':600 'compon':142,599 'composit':154 'compositor':14,465 'concret':81,733 'condit':256 'const':670,675 'constraint':48,717 'contain':437 'continu':234,311,405,516 'convers':56 'criteria':781 'critic':180,185,212,218,273,570,692 'css':113,139,441,452,456,602 'css/js':31 'default':274,713 'describ':749 'dom':333 'downgrad':314 'drive':242 'driven':284 'durat':723 'effect':22,305,354,512 'el.classlist.add':673 'el.getboundingclientrect':660,672,677 'el.style.left':659 'el.style.opacity':635 'el.style.transform':678,688 'el.style.transition':684 'element':427 'enforc':691 'entir':319 'environ':761 'environment-specif':760 'event':249 'exact':70 'exist':99,586 'expens':702 'expert':766 'explicit':93,579 'fade':642 'fade-in':641 'file':60 'filter':135,163,203,497 'first':671,694 'first.left':680 'fix':2,7,35,38,82,601 'fixing-motion-perform':1,34 'flex':169 'flip':347,655 'flip-styl':346 'flow':167 'frame':229 'glossari':153 'gradient':137,160 'grid':168 'gsap':117 'guidanc':690 'guidelin':106 'heavi':433,548 'high':188,191,196,322,364,416 'imag':162 'impact':176 'implement':123 'includ':11 'inherit':451,461 'input':775 'instead':607,629 'intent':708 'interact':120,288,547,725 'interaction-heavi':546 'interleav':221 'interrupt':554 'intersectionobserv':378 'isol':300,426 'issu':10,41 'jank':28 'janki':119 'js':283,631,649 'js-driven':282 'justifi':719 'keep':499 'larg':236,410,436,483,521 'last':676 'last.left':681 'layer':198,463,468,485,487 'layout':12,134,164,222,233,268,293,340,352,406,565,603,657 'layout-lik':351 'layout-trigg':564 'least':701 'left':661 'level':85,540 'librari':91,577 'like':353 'limit':737 'line':71 'linear':644 'link':18,126,373,400,624 'local':458 'loop':252 'low':208,532 'mani':481 'mask':136,161 'match':706,746 'matter':76,493 'meaning':238 'measur':150,187,265,321,323,359,650,665 'mechan':184,272 'medium':195,199,204,415,464,498 'medium-high':194,414 'migrat':89,573,591 'miss':783 'mix':259,594 'motion':3,19,36,115,127,280,312,318,374,401,466 'move':674 'multipl':260 'must':402 'mutat':267 'navig':539 'navigation-level':538 'never':178,216,470,513,517,589,695 'non':712 'non-default':711 'note':731 'off-screen':395 'often':309 'one':77,303,510 'one-shot':302 'one-tim':509 'opac':156,278,330,445,524 'output':755 'paint':157,193,291,408,413,418,432 'paint-heavi':431 'paint-trigg':417 'panel':611,617 'partial':590 'pattern':179,217,696 'paus':382,390 'perform':4,9,33,37,40,492 'permiss':776 'poll':385 'posit':166,387,447 'potenti':563 'prefer':313,345,355,365,523,729 'prioriti':173,174 'promot':469,484 'properti':15,434 'px':663,682 'quick':213 'quot':68 'raf':116 'read':223,334,339,652 'refactor':118 'refer':104,214 'remov':317 'render':151,703 'repeat':341 'report':66 'request':94,580 'requestanimationfram':251,683 'requir':289,467,558,726,774 'reveal':130,639 'reveal-on-scrol':129 'review':30,58,141,689,728,767 'rewrit':575 'rule':63,96,170,583,693 'safeti':777 'scope':454,748 'screen':397 'scroll':17,125,132,190,248,363,366,372,386,399,623,627,634 'scroll-link':16,124,371,398,622 'scroll-timelin':626 'scrolli':246,636 'scrolltop':245 'sentenc':79 'short':78,508 'shot':304 'size':165,560,722 'skill':740 'skill-fixing-motion-performance' 'small':299,425,502 'snippet':73 'source-sickn33' 'specif':762 'stack':100 'state':715 'step':152 'stop':255,392,768 'stutter':26 'style':348,595 'substitut':758 'success':780 'suggest':86 'surfac':239,301,411,522,721 'surgic':479 'system':262,588 'task':744 'techniqu':315 'temporarili':477 'test':764 'theori':736 'thrash':13,604,658 'time':511 'timelin':369,628,647 'tool':210,490,568,697 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'transform':148,155,276,328,444,606,619,669,685 'transit':27,122,207,349,531,535,544,552,612,618 'translat':526 'translatex':679 'treat':559,753 'trigger':404,419,566 'ui':51,111,549 'unless':92,578 'use':23,44,103,144,281,377,473,504,533,625,738 'valid':486,763 'variabl':140,442,453,457 'via':327,668 'view':206,368,530,534,543,551,648 'violat':67 'visibl':380 'waapi':114 'width':609,613 'will-chang':145,474 'window.addeventlistener':633 'within':97,584,596 'without':253 'work':53,704 'write':225,336,361,654","prices":[{"id":"d1f867ef-76aa-4d6c-8a54-026ea51b3f5e","listingId":"e6c6057e-fbdd-44a4-ae94-1be665b847fb","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:37:19.949Z"}],"sources":[{"listingId":"e6c6057e-fbdd-44a4-ae94-1be665b847fb","source":"github","sourceId":"sickn33/antigravity-awesome-skills/fixing-motion-performance","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/fixing-motion-performance","isPrimary":false,"firstSeenAt":"2026-04-18T21:37:19.949Z","lastSeenAt":"2026-04-24T00:50:57.327Z"}],"details":{"listingId":"e6c6057e-fbdd-44a4-ae94-1be665b847fb","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"fixing-motion-performance","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34793,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-24T00:28:59Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"df3fbbae13816e9575945ebb99b15a5ffffca08d","skill_md_path":"skills/fixing-motion-performance/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/fixing-motion-performance"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"fixing-motion-performance","description":"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/JS animation performance."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/fixing-motion-performance"},"updatedAt":"2026-04-24T00:50:57.327Z"}}