[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7162F41W92XZJSW93QX8499":3,"skill-same:01M7162F41W92XZJSW93QX8499":64},{"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":18,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":14,"repositoryHtmlUrl":47,"repositoryHomepageUrl":6,"ownerHtmlUrl":48,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":49,"install":50,"resources":63},"01M7162F41W92XZJSW93QX8499","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.","sapsapshen\u002Fai-memory-router","sapsapshen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20347959?v=4","01M6XDQEF1DP50DKF37H81J3J5","shenmian","01M6XDQEJPE41Y3DT2763X8ZJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Ffixing-motion-performance\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"performance","motion","fixing motion performance","motion performance","layout","properties","transitions","unknown","when","effects","use","blur","issues","fix","animations","audit and fix","css","compositor","Animation","community","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: unknown\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","# 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",{"name":5,"risk":26,"source":38,"description":7},"main","7a38d8e7073e61c16eda85681cb32fb68a8657a5","skills-store\u002Fcursor\u002Ffixing-motion-performance","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router","https:\u002F\u002Fgithub.com\u002Fsapsapshen","2026-04-14 21:12:12",{"source":8,"skillName":5,"commands":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add sapsapshen\u002Fai-memory-router --skill fixing-motion-performance",{"tool":56,"command":57},"bunx","bunx skills add sapsapshen\u002Fai-memory-router --skill fixing-motion-performance",{"tool":59,"command":60},"pnpm","pnpm dlx skills add sapsapshen\u002Fai-memory-router --skill fixing-motion-performance","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Ffixing-motion-performance\u002FSKILL.md",true,[],[65,89,114,124,137,156],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":76,"publishedAt":39},"01M71ATQRKG48SH06FQ697T5G9","wechat-search","Search WeChat Official Account articles using OpenClaw's web search and fetch capabilities with compliance-focused design.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fwechat-search-release\u002FSKILL.md",[71],{"categoryNo":72,"categoryName":73,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000037","律师与法务","PROFESSION","适用职业",[77,78,79,80,81,82,83,84,85,86,87,88],"wechat search","wechat","search","capabilities","openclaw","design","web search","compliance","web","official","fetch","with",{"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":95,"publishedAt":39},"01M71ATNAVGZB35PFYM2GC5N00","trend-tap","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend tap', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-tap\u002FSKILL.md",[],[96,97,98,99,100,101,79,102,103,104,105,27,106,107,108,109,110,111,112,113],"trend","trend tap","tap","api keys","Bash","time","trending","hacker","aggregator","do","brew","live","data","google","install","read","across","api",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":120,"publishedAt":39},"01M71ATJ9AM5KM15AA8PS302EB","trend-radar","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend pulse', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-radar\u002FSKILL.md",[],[121,122,96,106,107,108,109,100,79,111,123,112,113,27,104,103,102,110,101,99],"trend radar","radar","pulse",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":130,"publishedAt":39},"01M71ATGF095N3EJM9G8SD0BB5","tech-news-daily","每日科技新闻汇——从全球多个 RSS 源抓取最新科技新闻，翻译（英→中）、去重、排版成每日简报。当用户询问科技新闻、科技新鲜事、每日科技、技术动态、Daily Tech News 或类似表达时触发此技能。","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftech-news-daily\u002FSKILL.md",[],[131,132,133,134,135,136],"news","tech","tech news daily","daily","rss","翻译",{"skillNo":138,"name":139,"nameZh":6,"description":140,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":141,"categories":142,"keywords":148,"publishedAt":39},"01M71ATFAEAMQ17M70NQNY7SR8","summarize","Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsummarize\u002FSKILL.md",[143],{"categoryNo":144,"categoryName":145,"taxonomyType":146,"taxonomyTypeDesc":147},"01JBSEEDCAT000000000000021","资料检索与研究","SCENARIO","使用场景",[139,85,149,150,151,88,106,152,153,154,98,155,110],"Audio","cli","youtube","images","https","files","pdfs",{"skillNo":157,"name":158,"nameZh":6,"description":159,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":160,"categories":161,"keywords":162,"publishedAt":39},"01M71ATDNS3R0M4H936PACQAWZ","sonoscli","Control Sonos speakers (discover\u002Fstatus\u002Fplay\u002Fvolume\u002Fgroup).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsonoscli\u002FSKILL.md",[],[158,163,164,165,110,166,153,167,168,169,170,171],"status","play","go","latest","github","discover","control","cmd","volume"]