| 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
Decision tree
Run this before any motion performance audit:
-
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
-
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
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.
