fixing-motion-performance

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: fixing-motion-performance
description: |
  Audits and fixes animation performance issues including layout thrashing,
  compositor properties, scroll-linked motion, and blur effects. Guides
  developers to smooth, GPU-accelerated animations that avoid jank.
triggers:
  - "motion performance"
  - "animation performance"
  - "layout thrashing"
  - "compositor properties"
das:
  category: motion-animation
  upstream: "https://github.com/ibelick/ui-skills"
  upstream_path: "skills/fixing-motion-performance/SKILL.md"
  version: latest
  install: true
---

# fixing-motion-performance

> Catalogue stub — full skill: [ibelick/ui-skills](https://github.com/ibelick/ui-skills)

## Decision tree

Run this before any motion performance audit:

1. **Is the full skill already installed?**
   Check: `~/.design-agent-skills/skills/fixing-motion-performance/SKILL.md` exists AND does NOT contain a `das:` block.
   - Yes → invoke `fixing-motion-performance` and proceed
   - No → go to step 2

2. **Do you have shell access?**
   - Yes → run the install command below, then invoke the skill
   - No → show the install command; in Claude Code, send it as a chat message starting with `!` — add `-g` for global install or omit for project-only

## Install command

```bash
npx skills add ibelick/ui-skills --skill fixing-motion-performance
```

Or per-agent:
- Claude Code: `claude skills add ibelick/ui-skills`
- Cursor/OpenCode: `npx skills add ibelick/ui-skills --skill fixing-motion-performance`

## Invoke after install

- Skill name: `fixing-motion-performance`
- Trigger phrases: "motion performance", "animation performance", "layout thrashing", "compositor properties"

## What it does

Audits animations for layout thrashing, incorrect compositor property usage, scroll-linked motion anti-patterns, and expensive blur effects. Provides concrete fixes to move animations onto the GPU and eliminate frame drops for smooth, production-grade motion.