[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7CTBSD5YREH9AXF39GGKJ35":3,"skill-same:01M7CTBSD5YREH9AXF39GGKJ35":46},{"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":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":14,"repositoryHtmlUrl":27,"repositoryHomepageUrl":6,"ownerHtmlUrl":28,"ownerBlogUrl":29,"ownerDescription":30,"updatedAt":31,"install":32,"resources":45},"01M7CTBSD5YREH9AXF39GGKJ35","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.","Henrique1601\u002FSkiilsToIAs","Henrique1601","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F92006691?v=4","01M7CRXVT0GVXVK80JT1GR687S","Henrique Bezerra Dos Santos","01M7CRXVTN5Y8TMWJ1MDSKCQ1T",0,"MIT","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Ffixing-motion-performance\u002FSKILL.md",[],[],"2026-11-15 14:19:17",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.\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 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","# 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 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",{"name":5,"description":7},"main","a73152352c0612252131e5cf84e91312a6cf17dc","design\u002Ffixing-motion-performance","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs","https:\u002F\u002Fgithub.com\u002FHenrique1601","https:\u002F\u002Fbezerraportifolio.netlify.app\u002F","Full Stack Developer | React, Next.js, TypeScript, Node.js & IA | Construindo produtos digitais e soluções SaaS","2026-11-15 02:56:04",{"source":8,"skillName":5,"commands":33,"prompt":43,"zipAvailable":44},[34,37,40],{"tool":35,"command":36},"npx","npx skills add Henrique1601\u002FSkiilsToIAs --skill fixing-motion-performance",{"tool":38,"command":39},"bunx","bunx skills add Henrique1601\u002FSkiilsToIAs --skill fixing-motion-performance",{"tool":41,"command":42},"pnpm","pnpm dlx skills add Henrique1601\u002FSkiilsToIAs --skill fixing-motion-performance","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Ffixing-motion-performance\u002FSKILL.md",true,[],[47,54,61,69,76,83],{"skillNo":48,"name":49,"nameZh":6,"description":50,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":51,"categories":52,"keywords":53,"publishedAt":19},"01M7E2ANBW9V6AVX5JXNCEAWF8","rag-architect-agent","Agente Arquiteto de RAG, Embeddings & Busca Vetorial. Especialista em design e implementação de pipelines de Retrieval-Augmented Generation de alta fidelidade: chunking semântico, modelagem pgvector no PostgreSQL (Neon\u002FSupabase), busca híbrida (cosseno + BM25), reranking, validação via TypeSafe AI e filosofia Ponytail (anti-overengineering).","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fcustom-agents\u002Frag-architect-agent\u002FSKILL.md",[],[],{"skillNo":55,"name":56,"nameZh":6,"description":57,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":58,"categories":59,"keywords":60,"publishedAt":19},"01M7E29KKF8R02ZRGYE2MJM67G","rag-architecture-patterns","Padrões arquiteturais e implementação de pipelines RAG (Retrieval-Augmented Generation) de alta fidelidade para qualquer projeto ou sistema. Cobre chunking semântico, embeddings, busca híbrida (pgvector + BM25), reranking, validação via TypeSafe AI e filosofia Ponytail (anti-overengineering).","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fai-agents\u002Frag-architecture-patterns\u002FSKILL.md",[],[],{"skillNo":62,"name":63,"nameZh":6,"description":64,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":65,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":68,"publishedAt":19},"01M7CWRA8E3BJ7CPY8N8EG28J1","skill-repair","Use this to fix and re-install agent skills that have failed installation.\nThis skill provides the necessary context and permissions to surgically update\nthe `manifest.json` after a fix has been applied.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Futilities\u002Fskill-repair\u002FSKILL.md",[],[],{"skillNo":70,"name":71,"nameZh":6,"description":72,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":19},"01M7CWR66FZP8FA47WVZ4Z2EXC","security-scan","Scan your Claude Code configuration (.claude\u002F directory) for security vulnerabilities, misconfigurations, and injection risks using AgentShield. Checks CLAUDE.md, settings.json, MCP servers, hooks, and agent definitions.","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Futilities\u002Fsecurity-scan\u002FSKILL.md",[],[],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":19},"01M7CWR0QPY58QPTR1P759TFNG","security-review","Use this skill when adding authentication, handling user input, working with secrets, creating API endpoints, or implementing payment\u002Fsensitive features. Provides comprehensive security checklist and patterns.","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Futilities\u002Fsecurity-review\u002FSKILL.md",[],[],{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":19},"01M7CWQXCE40XWT4FZ3VWZFGDP","security-bounty-hunter","Hunt for exploitable, bounty-worthy security issues in repositories. Focuses on remotely reachable vulnerabilities that qualify for real reports instead of noisy local-only findings.","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Futilities\u002Fsecurity-bounty-hunter\u002FSKILL.md",[],[]]