# 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

```bash
npx skillstore add ibelick/fixing-motion-performance
```

## Metadata

- Status: approved
- Slug: ibelick-fixing-motion-performance
- Skillstore revision: r2
- Version status: missing
- Tree hash: ed0d2a478c910c2ff63bbc7fd03c9cc6ab8a6a40be855122b69f02903aebc633
- Author: ibelick
- GitHub username: ibelick
- License: MIT
- Repository: https://github.com/ibelick/ui-skills/tree/main/skills/fixing-motion-performance/
- Ref: ebdfe608f5de2b66ff37ab4af12af8ac4f5e8006
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/ibelick-fixing-motion-performance
- Manifest: https://skillstore.pages.dev/api/skills/ibelick-fixing-motion-performance/manifest

## Capabilities

- Reviews CSS and JavaScript animation code for layout thrashing and repeated measurement.
- Identifies expensive layout, paint, filter, and scroll-linked animation patterns.
- Recommends transform and opacity techniques when they match the intended effect.
- Suggests FLIP, IntersectionObserver, and browser timeline approaches for suitable interactions.
- Checks layer promotion, will-change usage, blur effects, and view transition choices.
- Provides concrete fixes while preserving the existing animation library.

## Use Cases

- 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.

## Prompt Templates

### Quick Animation Check

```
Review this animation for performance problems. List each issue, explain its impact, and suggest a focused fix: [paste code]
```

### Inspect a Component

```
Audit [file or component] for layout thrashing, paint-heavy properties, unnecessary layers, and unbounded animation loops. Preserve the current animation library.
```

### Improve Scroll-Linked Motion

```
Analyze this scroll-linked interaction: [paste code]. Recommend suitable timelines or observers, off-screen pausing, and changes that prevent continuous layout or paint.
```

### Plan an Advanced Motion Refactor

```
Review the motion architecture across [files]. Prioritize critical issues, identify conflicting animation systems, and propose phased fixes with validation steps and tradeoffs.
```

## Limitations

- Does not measure runtime performance or replace browser profiling tools.
- Cannot confirm compositor behavior without traces, layer inspection, or device testing.
- Does not migrate animation libraries unless the user explicitly requests a migration.
- Recommendations require source code or a clear description of the affected motion.

## 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.

## Anti Patterns

- 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.

## Security Audit

- Audited at: 2026-07-23T18:43:21.821\+00:00
- Summary: 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.

## Stats

- Views: 137
- Downloads: 12
- Favorites: 0
- Popularity score: 0