Skills
.Work. You
Rest

fixing-motion-performance

Community

Speed up UI animations with smoother performance.

Design & Creative#performance#UI#fix#animation#guidelines#motion
Authorkimmyxpow
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps teams diagnose and reduce animation jank by applying a structured set of performance rules to UI motion across apps and components.

Core Features & Use Cases

  • Enforces best-practice constraints for animation (transform and opacity focus, measurement batching, and avoiding layout thrash).
  • Guides scroll-linked motion, view transitions, and layering decisions to minimize layout and paint overhead.
  • Enables quick audits of existing animations and targeted optimizations without replacing animation libraries.

Quick Start

/fixing-motion-performance Apply these constraints to any UI animation work in this conversation.

  • /fixing-motion-performance <file> Review the file against all rules below and report:
    • violations (quote the exact line or snippet)
    • why it matters (one short sentence)
    • a concrete fix (code-level suggestion) Do not migrate animation libraries unless explicitly requested. Apply rules within the existing stack.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: fixing-motion-performance
Download link: https://github.com/kimmyxpow/focus/archive/main.zip#fixing-motion-performance

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.