[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6M33R3C62FBHZXXX2H2FCV6":3,"skill-same:01M6M33R3C62FBHZXXX2H2FCV6":73},{"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":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":53,"commitSha":54,"skillDirectory":55,"forksCount":13,"repositoryHtmlUrl":56,"repositoryHomepageUrl":6,"ownerHtmlUrl":57,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":58,"install":59,"resources":72},"01M6M33R3C62FBHZXXX2H2FCV6","gsap-performance",null,"Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.","endman100\u002Fskill-router-nexus","endman100","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F31997019?v=4","01M6KPDX17BYDWW4RRB0TNGGMX","01M6KPDX64Y2QBEWVFG5W5PWPF",0,"MIT","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWeb-Design\u002Ffrontend-and-motion-implementation\u002Fopen-design-gsap-performance\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"performance","gsap performance","gsap","when","github","animations","batching","for","about","gsap animations","animation performance","transforms","layout","motion","use","user","Animation","https","official","change","prototype","2026-11-10 10:12:30",false,"---\nname: gsap-performance\ndescription: |\n  Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.\ntriggers:\n  - \"gsap performance\"\n  - \"animation jank\"\n  - \"60fps animation\"\n  - \"will-change\"\n  - \"layout thrashing\"\nlicense: MIT\nod:\n  mode: prototype\n  category: animation-motion\n  upstream: \"https:\u002F\u002Fgithub.com\u002Fgreensock\u002Fgsap-skills\"\n---\n\n# GSAP Performance\n\n> Curated from GreenSock's official GSAP skills: https:\u002F\u002Fgithub.com\u002Fgreensock\u002Fgsap-skills\n\n## When to Use This Skill\n\nApply when optimizing GSAP animations for smooth 60fps, reducing layout\u002Fpaint cost, or when the user asks about performance, jank, or best practices for fast animations.\n\n**Related skills:** Build animations with **gsap-core** (transforms, autoAlpha) and **gsap-timeline**; for ScrollTrigger performance see **gsap-scrolltrigger**.\n\n## Prefer Transform and Opacity\n\nAnimating **transform** (`x`, `y`, `scaleX`, `scaleY`, `rotation`, `rotationX`, `rotationY`, `skewX`, `skewY`) and **opacity** keeps work on the compositor and avoids layout and most paint. Avoid animating layout-heavy properties when a transform can achieve the same effect.\n\n- ✅ Prefer: **x**, **y**, **scale**, **rotation**, **opacity**.\n- ❌ Avoid when possible: **width**, **height**, **top**, **left**, **margin**, **padding** (they trigger layout and can cause jank).\n\nGSAP’s **x** and **y** use transforms (translate) by default; use them instead of **left**\u002F**top** for movement.\n\n## will-change\n\nUse **will-change** in CSS on elements that will animate. It hints the browser to promote the layer.\n\n```css\nwill-change: transform;\n```\n\n## Batch Reads and Writes\n\nGSAP batches updates internally. When mixing GSAP with direct DOM reads\u002Fwrites or layout-dependent code, avoid interleaving reads and writes in a way that causes repeated layout thrashing. Prefer doing all reads first, then all writes (or let GSAP handle the writes in one go).\n\n## Many Elements (Stagger, Lists)\n\n- Use **stagger** instead of many separate tweens with manual delays when the animation is the same; it’s more efficient.\n- For long lists, consider **virtualization** or animating only visible items; avoid creating hundreds of simultaneous tweens if it causes jank.\n- Reuse timelines where possible; avoid creating new timelines every frame.\n\n## Frequently updated properties (e.g. mouse followers)\n\nPrefer **gsap.quickTo()** for properties that are updated often (e.g. mouse-follower x\u002Fy). It reuses a single tween instead of creating new tweens on each update. \n\n```javascript\nlet xTo = gsap.quickTo(\"#id\", \"x\", { duration: 0.4, ease: \"power3\" }),\n    yTo = gsap.quickTo(\"#id\", \"y\", { duration: 0.4, ease: \"power3\" });\n\ndocument.querySelector(\"#container\").addEventListener(\"mousemove\", (e) => {\n  xTo(e.pageX);\n  yTo(e.pageY);\n});\n```\n\n## ScrollTrigger and Performance\n\n- **pin: true** promotes the pinned element; pin only what’s needed.\n- **scrub** with a small value (e.g. `scrub: 1`) can reduce work during scroll; test on low-end devices.\n- Call **ScrollTrigger.refresh()** only when layout actually changes (e.g. after content load), not on every resize; debounce when possible.\n\n## Reduce Simultaneous Work\n\n- Pause or kill off-screen or inactive animations when they’re not visible (e.g. when the user navigates away).\n- Avoid animating huge numbers of properties on many elements at once; simplify or sequence if needed.\n\n## Best practices\n\n- ✅ Animate **transform** and **opacity**; use **will-change** in CSS only on elements that animate.\n- ✅ Use **stagger** instead of many separate tweens with manual delays when the animation is the same.\n- ✅ Use **gsap.quickTo()** for frequently updated properties (e.g. mouse followers).\n- ✅ Clean up or kill off-screen animations; call **ScrollTrigger.refresh()** when layout changes, debounced when possible.\n\n## Do Not\n\n- ❌ Animate **width**\u002F **height**\u002F **top**\u002F **left** for movement when **x**\u002F **y**\u002F **scale** can achieve the same look.\n- ❌ Set **will-change** or **force3D** on every element “just in case”; use for elements that are actually animating.\n- ❌ Create hundreds of overlapping tweens or ScrollTriggers without testing on low-end devices.\n- ❌ Ignore cleanup; stray tweens and ScrollTriggers keep running and can hurt performance and correctness.\n","# GSAP Performance\n\n> Curated from GreenSock's official GSAP skills: https:\u002F\u002Fgithub.com\u002Fgreensock\u002Fgsap-skills\n\n## When to Use This Skill\n\nApply when optimizing GSAP animations for smooth 60fps, reducing layout\u002Fpaint cost, or when the user asks about performance, jank, or best practices for fast animations.\n\n**Related skills:** Build animations with **gsap-core** (transforms, autoAlpha) and **gsap-timeline**; for ScrollTrigger performance see **gsap-scrolltrigger**.\n\n## Prefer Transform and Opacity\n\nAnimating **transform** (`x`, `y`, `scaleX`, `scaleY`, `rotation`, `rotationX`, `rotationY`, `skewX`, `skewY`) and **opacity** keeps work on the compositor and avoids layout and most paint. Avoid animating layout-heavy properties when a transform can achieve the same effect.\n\n- ✅ Prefer: **x**, **y**, **scale**, **rotation**, **opacity**.\n- ❌ Avoid when possible: **width**, **height**, **top**, **left**, **margin**, **padding** (they trigger layout and can cause jank).\n\nGSAP’s **x** and **y** use transforms (translate) by default; use them instead of **left**\u002F**top** for movement.\n\n## will-change\n\nUse **will-change** in CSS on elements that will animate. It hints the browser to promote the layer.\n\n```css\nwill-change: transform;\n```\n\n## Batch Reads and Writes\n\nGSAP batches updates internally. When mixing GSAP with direct DOM reads\u002Fwrites or layout-dependent code, avoid interleaving reads and writes in a way that causes repeated layout thrashing. Prefer doing all reads first, then all writes (or let GSAP handle the writes in one go).\n\n## Many Elements (Stagger, Lists)\n\n- Use **stagger** instead of many separate tweens with manual delays when the animation is the same; it’s more efficient.\n- For long lists, consider **virtualization** or animating only visible items; avoid creating hundreds of simultaneous tweens if it causes jank.\n- Reuse timelines where possible; avoid creating new timelines every frame.\n\n## Frequently updated properties (e.g. mouse followers)\n\nPrefer **gsap.quickTo()** for properties that are updated often (e.g. mouse-follower x\u002Fy). It reuses a single tween instead of creating new tweens on each update. \n\n```javascript\nlet xTo = gsap.quickTo(\"#id\", \"x\", { duration: 0.4, ease: \"power3\" }),\n    yTo = gsap.quickTo(\"#id\", \"y\", { duration: 0.4, ease: \"power3\" });\n\ndocument.querySelector(\"#container\").addEventListener(\"mousemove\", (e) => {\n  xTo(e.pageX);\n  yTo(e.pageY);\n});\n```\n\n## ScrollTrigger and Performance\n\n- **pin: true** promotes the pinned element; pin only what’s needed.\n- **scrub** with a small value (e.g. `scrub: 1`) can reduce work during scroll; test on low-end devices.\n- Call **ScrollTrigger.refresh()** only when layout actually changes (e.g. after content load), not on every resize; debounce when possible.\n\n## Reduce Simultaneous Work\n\n- Pause or kill off-screen or inactive animations when they’re not visible (e.g. when the user navigates away).\n- Avoid animating huge numbers of properties on many elements at once; simplify or sequence if needed.\n\n## Best practices\n\n- ✅ Animate **transform** and **opacity**; use **will-change** in CSS only on elements that animate.\n- ✅ Use **stagger** instead of many separate tweens with manual delays when the animation is the same.\n- ✅ Use **gsap.quickTo()** for frequently updated properties (e.g. mouse followers).\n- ✅ Clean up or kill off-screen animations; call **ScrollTrigger.refresh()** when layout changes, debounced when possible.\n\n## Do Not\n\n- ❌ Animate **width**\u002F **height**\u002F **top**\u002F **left** for movement when **x**\u002F **y**\u002F **scale** can achieve the same look.\n- ❌ Set **will-change** or **force3D** on every element “just in case”; use for elements that are actually animating.\n- ❌ Create hundreds of overlapping tweens or ScrollTriggers without testing on low-end devices.\n- ❌ Ignore cleanup; stray tweens and ScrollTriggers keep running and can hurt performance and correctness.\n",{"od":44,"name":5,"license":14,"triggers":47,"description":52},{"mode":38,"category":45,"upstream":46},"animation-motion","https:\u002F\u002Fgithub.com\u002Fgreensock\u002Fgsap-skills",[19,48,49,50,51],"animation jank","60fps animation","will-change","layout thrashing","Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.\n","main","f19b254e8975d0bfddb394686706106930d7964d","Web-Design\u002Ffrontend-and-motion-implementation\u002Fopen-design-gsap-performance","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus","https:\u002F\u002Fgithub.com\u002Fendman100","2026-11-12 18:13:37",{"source":8,"skillName":5,"commands":60,"prompt":70,"zipAvailable":71},[61,64,67],{"tool":62,"command":63},"npx","npx skills add endman100\u002Fskill-router-nexus --skill gsap-performance",{"tool":65,"command":66},"bunx","bunx skills add endman100\u002Fskill-router-nexus --skill gsap-performance",{"tool":68,"command":69},"pnpm","pnpm dlx skills add endman100\u002Fskill-router-nexus --skill gsap-performance","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWeb-Design\u002Ffrontend-and-motion-implementation\u002Fopen-design-gsap-performance\u002FSKILL.md",true,[],[74,98,134,155,164,188],{"skillNo":75,"name":76,"nameZh":6,"description":77,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":78,"sourceHtmlUrl":79,"categories":80,"keywords":86,"publishedAt":39},"01M6MPCT5BXVER8HQZTW3QE9AS","create-master","基于佛教经典文献，生成特定高僧大德的 AI 教学角色","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FMetaphysics-and-Spirituality\u002FMaster-skill\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FMetaphysics-and-Spirituality\u002FMaster-skill\u002FSKILL.md",[81],{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},"01JBSEEDCAT000000000000039","教师与教育","PROFESSION","适用职业",[87,88,89,90,91,92,93,94,95,96,97],"create master","master","create","生成","true","webfetch","edit","write","read","grep","Bash",{"skillNo":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":102,"sourceHtmlUrl":103,"categories":104,"keywords":116,"publishedAt":39},"01M6M43AKE95Y64E1JRXEF5QQ3","writing-dna-skill","从至少 20 篇完整文章中蒸馏可复用的写作 DNA，分析语言、文章结构、选题逻辑、素材策略、认知框架和视觉风格，并生成 Writing-DNA.md；按该 DNA 写作时会读取全部蒸馏产物和 5 篇相关原文。用于中英文作者、账号、品牌或出版物的风格分析与一致性写作。 Distill reusable Writing DNA from at least 20 complete articles for Chinese or English authors, publications, brands, and accounts; use for language, structure, topic logic, source strategy, cognitive-frame, and visual-style analysis.","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fwriting-dna-skill\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fwriting-dna-skill\u002FSKILL.md",[105,110,113],{"categoryNo":106,"categoryName":107,"taxonomyType":108,"taxonomyTypeDesc":109},"01JBSEEDCAT000000000000018","写作与文案","SCENARIO","使用场景",{"categoryNo":111,"categoryName":112,"taxonomyType":108,"taxonomyTypeDesc":109},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":114,"categoryName":115,"taxonomyType":84,"taxonomyTypeDesc":85},"01JBSEEDCAT000000000000036","内容创作者",[117,118,119,120,121,122,123,124,125,126,32,127,128,90,129,130,131,25,132,133],"writing dna skill","DNA","writing","strategy","english","logic","visual","structure","chinese","reusable","style","distill","analysis","frame","source","at","complete",{"skillNo":135,"name":136,"nameZh":6,"description":137,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":138,"sourceHtmlUrl":139,"categories":140,"keywords":143,"publishedAt":39},"01M6M428TTCGQ4ME3KY99VN037","stop-slop","Remove AI writing patterns from prose. Use when drafting, editing, or reviewing text to eliminate predictable AI tells.","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fstop-slop\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fstop-slop\u002FSKILL.md",[141,142],{"categoryNo":106,"categoryName":107,"taxonomyType":108,"taxonomyTypeDesc":109},{"categoryNo":114,"categoryName":115,"taxonomyType":84,"taxonomyTypeDesc":85},[144,145,146,147,21,148,35,149,150,32,151,152,153,25,154,119],"slop","stop slop","stop","drafting","drafts","patterns","prose","remove","editing","text","content",{"skillNo":156,"name":157,"nameZh":6,"description":158,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":159,"sourceHtmlUrl":160,"categories":161,"keywords":162,"publishedAt":39},"01M6M41X0B7EBX42TK435DMGGR","shuorenhua","检查和清理中英文文本里的 AI 套路，适用于“去 AI 味”“说人话”“自然一点”“别像模板”“先标问题”这类改写和审稿需求；按场景控制力度，同时保留事实、术语、语域和责任主体。","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fshuorenhua\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fshuorenhua\u002FSKILL.md",[],[157,163],"文本",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":168,"sourceHtmlUrl":169,"categories":170,"keywords":171,"publishedAt":39},"01M6M3ZD12WBEW5KXKDM4N6DFG","naming","Name products, SaaS, brands, open source projects, bots, and apps. Use when the user needs to name something, find a brand name, or pick a product name. Metaphor-driven process that produces memorable, meaningful names and avoids AI slop.","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fnaming-main\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fnaming-main\u002FSKILL.md",[],[166,172,173,174,175,176,32,177,95,131,178,179,180,181,97,182,183,184,185,21,186,187,144],"repo","websearch","product name","apps","bots","view","brand","pick","gh","projects","open","saas","open source","product","describe","ai slop",{"skillNo":189,"name":190,"nameZh":6,"description":191,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":192,"sourceHtmlUrl":193,"categories":194,"keywords":196,"publishedAt":39},"01M6M3YVXAFAAWJ7F6JMPFREYE","humanizer-zh","去除文本中的 AI 生成痕迹。适用于编辑或审阅文本，使其听起来更自然、更像人类书写。\n基于维基百科的\"AI 写作特征\"综合指南。检测并修复以下模式：夸大的象征意义、\n宣传性语言、以 -ing 结尾的肤浅分析、模糊的归因、破折号过度使用、三段式法则、\nAI 词汇、否定式排比、过多的连接性短语。","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fhumanizer-zh\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fhumanizer-zh\u002FSKILL.md",[195],{"categoryNo":106,"categoryName":107,"taxonomyType":108,"taxonomyTypeDesc":109},[197,198,199,95,94,93,119,90,163,200,144,146],"humanizer","zh","humanizer zh","翻译"]