fixing-motion-performance
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/JS animation performance.
IT & Software DevelopmentDesign & UX
fixing-motion-performance
When to Use
Use this skill when you need 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/JS animation performance.
Fix animation performance issues.
how to use
/fixing-motion-performance
Apply these constraints to any UI animation work in this conversation.
/fixing-motion-performance <file>- violations (quote the exact line or snippet)
- why it matters (one short sentence)
- a concrete fix (code-level suggestion)
Review the file against all rules below and report:
Do not migrate animation libraries unless explicitly requested. Apply rules within the existing stack.
when to apply
Reference these guidelines when:
- adding or changing UI animations (CSS, WAAPI, Motion, rAF, GSAP)
- refactoring janky interactions or transitions
- implementing scroll-linked motion or reveal-on-scroll
- animating layout, filters, masks, gradients, or CSS variables
- reviewing components that use will-change, transforms, or measurement
rendering steps glossary
- composite: transform, opacity
- paint: color, borders, gradients, masks, images, filters
- layout: size, position, flow, grid, flex
rule categories by priority
| priority | category | impact |
|---|
Subscribers only
The full skill, its 1 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | ibelick/ui-skills |
|---|---|
| License | MIT |
| Risk label | critical ("critical" means the skill may run commands or touch files — read before use) |
| Files | SKILL.md |
| Added | 2026-07-01 |
Related skills
anti-ui-slop
Stop coding agents from shipping generic UI. Extend the product's design system, use UIZZE evidence only when useful, cover required states, and inspect the rendered result.
astro
Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.
chat-widget
Build a real-time support chat system with a floating widget for users and an admin dashboard for support staff. Use when the user wants live chat, customer support chat, real-time messaging, or in-app support.
chrome-extension-developer
Expert in building Chrome Extensions using Manifest V3. Covers background scripts, service workers, content scripts, and cross-context communication.
design-it
Routes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting a specific aesthetic.
design-taste-frontend
Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.