[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6F6F0CF5TXF2B14RBYMD841":3,"skill-same:01M6F6F0CF5TXF2B14RBYMD841":74},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":45,"linkOnly":46,"markdownContent":47,"markdownBody":48,"frontMatter":49,"refName":33,"commitSha":54,"skillDirectory":55,"forksCount":56,"repositoryHtmlUrl":57,"repositoryHomepageUrl":6,"ownerHtmlUrl":58,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":59,"install":60,"resources":73},"01M6F6F0CF5TXF2B14RBYMD841","fixing-motion-performance",null,"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.","boisenoise\u002Fskills-collections","boisenoise","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F193180?v=4","01M6CDBDQK6BDN55ZMA6B6PKBM","01M6CDBDVSJ3JPTBYN26FZ7TZK",12,"MIT","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-fixing-motion-performance\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"performance","fixing motion performance","motion performance","motion","2026","css","audit and fix","when","effects","blur","animation performance","critical","layout","transitions","wed","main","community","properties","use","fix","Animation","ui","audit","https","license","issues","github","2026-11-10 10:12:30",false,"---\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: critical\nsource: https:\u002F\u002Fgithub.com\u002Fibelick\u002Fui-skills\u002Ftree\u002Fmain\u002Fskills\u002Ffixing-motion-performance\nsource_repo: ibelick\u002Fui-skills\nsource_type: community\ndate_added: 2026-07-01\nlicense: MIT\nlicense_source: https:\u002F\u002Fgithub.com\u002Fibelick\u002Fui-skills\u002Fblob\u002Fmain\u002FLICENSE\n---\n\n# fixing-motion-performance\n## When to Use\n\nUse this skill when you need 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.\n\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 apply\n\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\n- Use this skill only when the task clearly matches its upstream source and local project context.\n- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.\n- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.\n","# fixing-motion-performance\n## When to Use\n\nUse this skill when you need 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.\n\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 apply\n\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\n- Use this skill only when the task clearly matches its upstream source and local project context.\n- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.\n- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.\n",{"name":5,"risk":29,"source":50,"license":14,"date_added":51,"description":7,"source_repo":52,"source_type":34,"license_source":53},"https:\u002F\u002Fgithub.com\u002Fibelick\u002Fui-skills\u002Ftree\u002Fmain\u002Fskills\u002Ffixing-motion-performance",1782864000000,"ibelick\u002Fui-skills","https:\u002F\u002Fgithub.com\u002Fibelick\u002Fui-skills\u002Fblob\u002Fmain\u002FLICENSE","7bf2279c8a65758319526a721d5c4b75683aec9c","skills\u002Fantigravity-fixing-motion-performance",3,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections","https:\u002F\u002Fgithub.com\u002Fboisenoise","2026-11-11 14:20:43",{"source":8,"skillName":5,"commands":61,"prompt":71,"zipAvailable":72},[62,65,68],{"tool":63,"command":64},"npx","npx skills add boisenoise\u002Fskills-collections --skill fixing-motion-performance",{"tool":66,"command":67},"bunx","bunx skills add boisenoise\u002Fskills-collections --skill fixing-motion-performance",{"tool":69,"command":70},"pnpm","pnpm dlx skills add boisenoise\u002Fskills-collections --skill fixing-motion-performance","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-fixing-motion-performance\u002FSKILL.md",true,[],[75,102,127,152,171,194],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":79,"licenseFileUrl":80,"sourceHtmlUrl":81,"categories":82,"keywords":83,"publishedAt":45},"01M6WNH92BHVFXHGPDZCPJ0AG0","web-access","Use Treg for public web or platform data only when existing search, browser and connected tools cannot cover the task, with explicit cost and data boundaries.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-web-access\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-web-access\u002FSKILL.md",[],[84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,29,99,100,101,25,22],"web","access","web access","official","development","browser","search","data","Tools","read","fetch","only","youtube","free tools","platform","free","cover","normal",{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":79,"licenseFileUrl":106,"sourceHtmlUrl":107,"categories":108,"keywords":114,"publishedAt":45},"01M6WNF9XAYAB2CZDDJBAKNM93","treg","Use the Treg CLI or MCP catalog to discover, price and call authorized external tools with team-scoped credentials and a user-approved budget.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-treg\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-treg\u002FSKILL.md",[109],{"categoryNo":110,"categoryName":111,"taxonomyType":112,"taxonomyTypeDesc":113},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[104,115,116,44,87,88,42,92,117,118,119,120,36,121,122,29,123,124,125,126,22],"MCP","cli","Budget","credentials","team","catalog","call","discover","external tools","with","scoped","blob",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":79,"licenseFileUrl":131,"sourceHtmlUrl":132,"categories":133,"keywords":139,"publishedAt":45},"01M6WN93MEAZ4E41DYAHJRPHQT","recruit","Turn a job description into an evidence-linked candidate shortlist through Treg, with job-related ranking and optional authorized business contact enrichment.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-recruit\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-recruit\u002FSKILL.md",[134],{"categoryNo":135,"categoryName":136,"taxonomyType":137,"taxonomyTypeDesc":138},"01JBSEEDCAT000000000000038","人力资源","PROFESSION","适用职业",[129,44,87,42,41,140,141,142,143,144,29,145,146,147,124,148,149,150,151,126,104,22],"email","enrichment","business","evidence","phone","ranking","post","job description","for","person","candidate","reason",{"skillNo":153,"name":154,"nameZh":6,"description":155,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":79,"licenseFileUrl":156,"sourceHtmlUrl":157,"categories":158,"keywords":159,"publishedAt":45},"01M6WN8R5RXSMHM9B4D9FAFX42","rea-growth","Analyze a company’s public growth and content through Treg, distinguish observations from hypotheses, and produce an evidence-linked playbook within an approved budget.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-rea-growth\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-rea-growth\u002FSKILL.md",[],[160,161,162,44,87,42,163,164,41,165,117,166,167,168,143,29,169,170,126,104,22],"growth","rea","rea growth","produce","content","playbook","marketing","analyze","public","observations","company",{"skillNo":172,"name":173,"nameZh":6,"description":174,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":79,"licenseFileUrl":175,"sourceHtmlUrl":176,"categories":177,"keywords":178,"publishedAt":45},"01M6WN2EVE3RQRGWAKBT4S7YT2","make-ugc","Create original AI UGC-style product videos through Treg: research hooks, approve a licensed presenter and voice, generate clips, add captions and report costs.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-make-ugc\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-make-ugc\u002FSKILL.md",[],[179,180,44,181,87,182,42,183,184,185,186,187,29,188,189,190,191,192,193,126],"make","make ugc","research","create","Video","Captions","ads","short","hooks","head","style","niche","trending","talking-head","approve",{"skillNo":195,"name":196,"nameZh":6,"description":197,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":79,"licenseFileUrl":198,"sourceHtmlUrl":199,"categories":200,"keywords":201,"publishedAt":45},"01M6WN10ARAA63Y8K1YNGXJ2RM","lead-signals","Find and qualify public buying signals through Treg, rank fitting business accounts and optionally enrich authorized business contact information.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lead-signals\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lead-signals\u002FSKILL.md",[],[202,203,204,44,87,42,205,206,142,207,208,29,209,210,211,212,213,214,215,126],"signals","lead","lead signals","how","find","ready","as","how to","qualify","people","information","enrich","changes","funding"]