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.
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.
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
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.
All 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.
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
https://skillstore.io/skills/ibelick-fixing-motion-performance/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/ibelick-fixing-motion-performance?utm_source=security_passport_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><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>ibelick. (2026). fixing-motion-performance security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/ibelick-fixing-motion-performance/audits/5@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}
}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"
Find costly motion patterns in a component and receive focused code-level recommendations.
Evaluate scroll-linked effects and choose browser APIs that reduce layout and paint work.
Apply consistent performance checks during design system and pull request reviews.
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.
Author
ibelickLicense
MIT
Skillstore revision
r2
Version notice
The author did not declare a version.
Ref
ebdfe608f5de2b66ff37ab4af12af8ac4f5e8006
Maintenance freshness
7/25/2026
Usage
10 downloads · 137 views
File structure
📄 SKILL.md
Fix HTML Metadata and Social Previews
Missing or inconsistent metadata harms search indexing and social previews. This skill audits page metadata and guides focused fixes across common web frameworks.
Fix Accessibility Issues in Web Interfaces
Web interfaces often exclude users through missing labels, weak keyboard support, and incorrect focus behavior. This skill audits common accessibility failures and proposes minimal, targeted fixes.
Refine Interface Code with a Clear UI Baseline
Inconsistent interface code creates visual, accessibility, and performance problems. This skill reviews UI work against focused rules and recommends concrete improvements.
Build React Email Templates
by resend
HTML email work is difficult because email clients render styles differently. This skill guides Claude, Codex, and Claude Code through React Email templates, previews, sending, and accessibility.
Implement React View Transitions
by vercel-labs
React view transitions are easy to misplace, causing silent or noisy animations. This skill guides route, Suspense, list, and shared element animation choices.
Improve Vue 3 TypeScript Practices
by hyf0
Vue TypeScript projects often hit confusing template, router, and Volar errors. This skill gives targeted Vue 3 fixes for Codex, Claude, and Claude Code.
Improve Vue Options API Code
by vuejs-ai
Vue Options API projects often lose type safety and correct this binding. This skill gives focused rules for safer Vue 3 components.
Build Frontend Apps Faster
by davila7
Frontend work often needs consistent React patterns, performance checks, and project scaffolding. This skill gives Claude and compatible agents practical guidance and local helper scripts for modern web application development.
Optimize React and Next.js Code
by vercel-labs
React and Next.js applications often lose performance through waterfalls, large bundles, and avoidable re-renders. This skill gives Claude, Codex, and Claude Code concrete review rules for faster frontend work.