fixing-motion-performance
Fix Janky UI Animations
Slow or unstable animations can make interfaces feel unresponsive and waste browser resources. This skill reviews motion code and recommends focused performance improvements.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "fixing-motion-performance" from https://skillstore.io/skills/ibelick-fixing-motion-performance.md and its manifest at https://skillstore.io/api/skills/ibelick-fixing-motion-performance/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "fixing-motion-performance". Review a panel that animates its width during every open and close transition.
Expected outcome:
High priority: width changes trigger layout on each frame. Preserve the effect by measuring the target size once, then animate a transform.
Using "fixing-motion-performance". Check a reveal effect driven by a scroll event listener and repeated position reads.
Expected outcome:
Use IntersectionObserver for visibility and a browser timeline for progress when supported. Pause off-screen work and avoid repeated layout reads.
Using "fixing-motion-performance". Assess a large background with a continuous animated blur.
Expected outcome:
The large continuous filter is paint-heavy. Replace it with opacity or translation, or limit blur to a small, short, one-time effect.
Security Audit
SafeAll ten static findings are false positives caused by Markdown backticks, code fences, JavaScript template literals, and ordinary animation guidance. The skill contains no executable scripts, system reconnaissance, prompt injection, or other semantic security concerns.
Risk Factors
⚙️ External commands (6)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/ibelick-fixing-motion-performance/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/ibelick-fixing-motion-performance?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/ibelick-fixing-motion-performance?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/ibelick-fixing-motion-performance/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/ibelick-fixing-motion-performance.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
ibelick. (2026). fixing-motion-performance security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/ibelick-fixing-motion-performance/audits/5BibTeX citation
@techreport{ibelick-ibelick-fixing-motion-performance-2026,
author = {ibelick},
title = {fixing-motion-performance security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/ibelick-fixing-motion-performance/audits/5},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "fixing-motion-performance security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "ibelick"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/ibelick-fixing-motion-performance/audits/5"
identifiers:
- type: other
value: "skillstore:ibelick-fixing-motion-performance:audit:5"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Review a Component Animation
Find costly motion patterns in a component and receive focused code-level recommendations.
Diagnose Scroll Jank
Evaluate scroll-linked effects and choose browser APIs that reduce layout and paint work.
Set Motion Review Standards
Apply consistent performance checks during design system and pull request reviews.
Try These Prompts
Review this animation for performance problems. List each issue, explain its impact, and suggest a focused fix: [paste code]
Audit [file or component] for layout thrashing, paint-heavy properties, unnecessary layers, and unbounded animation loops. Preserve the current animation library.
Analyze this scroll-linked interaction: [paste code]. Recommend suitable timelines or observers, off-screen pausing, and changes that prevent continuous layout or paint.
Review the motion architecture across [files]. Prioritize critical issues, identify conflicting animation systems, and propose phased fixes with validation steps and tradeoffs.
Best Practices
- Provide the relevant component, styles, and animation setup so recommendations reflect the actual rendering path.
- Validate important changes with browser performance traces, layer tools, and representative devices.
- State interaction, duration, surface size, and browser support constraints before choosing a motion technique.
Avoid
- Do not treat every non-compositor animation as equally harmful without considering size, duration, and frequency.
- Do not add will-change broadly or leave temporary layer promotion active indefinitely.
- Do not combine animation libraries or partially migrate APIs during an unrelated performance fix.