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