mcpField
F
fixing-motion-performance

fixing-motion-performance

github.com/podoDevelopment29167 installsUpdated 4d ago
Repository

About fixing-motion-performance

fixing-motion-performance is an agent skill for auditing animation performance and suggesting concrete fixes. It focuses on layout thrashing, compositor property use, scroll-linked motion, and costly blur effects.

Key features

  1. 01Detects layout thrashing
  2. 02Checks compositor property use
  3. 03Flags scroll-linked motion anti-patterns
  4. 04Identifies expensive blur effects
  5. 05Suggests fixes to reduce frame drops

Use cases

  1. 01Auditing animation performance
  2. 02Finding causes of dropped frames
  3. 03Reviewing scroll-linked animation patterns

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill fixing-motion-performance

After installing, type/fixing-motion-performancein Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

fixing-motion-performance

Catalogue stub — full skill: ibelick/ui-skills

Decision tree

  1. Is the full skill already installed?

    • Global: f=~/.agents/skills/fixing-motion-performance/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/fixing-motion-performance/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as fixing-motion-performance, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/fixing-motion-performance ] && echo "global" || echo "project"

    Global:

    npx skills add ibelick/ui-skills --skill fixing-motion-performance -g -y

    Project:

    npx skills add ibelick/ui-skills --skill fixing-motion-performance -y

    Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

  • License: MIT

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.

When NOT to use

  • Choosing easing, timing, or motion design principles (not performance) → use design-motion-principles
  • Library-specific GSAP work (ScrollTrigger, timelines, useGSAP) → use gsap-skills

Comments

Markdown supported