fixing-motion-performance
Fix animation performance issues.
Best use case
fixing-motion-performance is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Fix animation performance issues.
Teams using fixing-motion-performance should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/fixing-motion-performance/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How fixing-motion-performance Compares
| Feature / Agent | fixing-motion-performance | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Fix animation performance issues.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# fixing-motion-performance Fix animation performance issues. ## how to use - `/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. ## when to apply Reference these guidelines when: - adding or changing UI animations (CSS, WAAPI, Motion, rAF, GSAP) - refactoring janky interactions or transitions - implementing scroll-linked motion or reveal-on-scroll - animating layout, filters, masks, gradients, or CSS variables - reviewing components that use will-change, transforms, or measurement ## rendering steps glossary - composite: transform, opacity - paint: color, borders, gradients, masks, images, filters - layout: size, position, flow, grid, flex ## rule categories by priority | priority | category | impact | |----------|----------|--------| | 1 | never patterns | critical | | 2 | choose the mechanism | critical | | 3 | measurement | high | | 4 | scroll | high | | 5 | paint | medium-high | | 6 | layers | medium | | 7 | blur and filters | medium | | 8 | view transitions | low | | 9 | tool boundaries | critical | ## quick reference ### 1. never patterns (critical) - do not interleave layout reads and writes in the same frame - do not animate layout continuously on large or meaningful surfaces - do not drive animation from scrollTop, scrollY, or scroll events - no requestAnimationFrame loops without a stop condition - do not mix multiple animation systems that each measure or mutate layout ### 2. choose the mechanism (critical) - default to transform and opacity for motion - use JS-driven animation only when interaction requires it - paint or layout animation is acceptable only on small, isolated surfaces - one-shot effects are acceptable more often than continuous motion - prefer downgrading technique over removing motion entirely ### 3. measurement (high) - measure once, then animate via transform or opacity - batch all DOM reads before writes - do not read layout repeatedly during an animation - prefer FLIP-style transitions for layout-like effects - prefer approaches that batch measurement and writes ### 4. scroll (high) - prefer Scroll or View Timelines for scroll-linked motion when available - use IntersectionObserver for visibility and pausing - do not poll scroll position for animation - pause or stop animations when off-screen - scroll-linked motion must not trigger continuous layout or paint on large surfaces ### 5. paint (medium-high) - paint-triggering animation is allowed only on small, isolated elements - do not animate paint-heavy properties on large containers - do not animate CSS variables for transform, opacity, or position - do not animate inherited CSS variables - scope animated CSS variables locally and avoid inheritance ### 6. layers (medium) - compositor motion requires layer promotion, never assume it - use will-change temporarily and surgically - avoid many or large promoted layers - validate layer behavior with tooling when performance matters ### 7. blur and filters (medium) - keep blur animation small (<=8px) - use blur only for short, one-time effects - never animate blur continuously - never animate blur on large surfaces - prefer opacity and translate before blur ### 8. view transitions (low) - use view transitions only for navigation-level changes - avoid view transitions for interaction-heavy UI - avoid view transitions when interruption or cancellation is required - treat size changes as potentially layout-triggering ### 9. tool boundaries (critical) - do not migrate or rewrite animation libraries unless explicitly requested - apply these rules within the existing animation system - never partially migrate APIs or mix styles within the same component ## review guidance - enforce critical rules first (never patterns, tool boundaries) - choose the least expensive rendering work that matches the intent - for any non-default choice, state the constraint that justifies it (surface size, duration, or interaction requirement) - when reviewing, prefer actionable notes and concrete alternatives over theory
Related Skills
validating-performance-budgets
Validate application performance against defined budgets to identify regressions early. Use when checking page load times, bundle sizes, or API response times against thresholds. Trigger with phrases like "validate performance budget", "check performance metrics", or "detect performance regression".
analyzing-query-performance
This skill enables Claude to analyze and optimize database query performance. It activates when the user discusses query performance issues, provides an EXPLAIN plan, or asks for optimization recommendations. The skill leverages the query-performance-analyzer plugin to interpret EXPLAIN plans, identify performance bottlenecks (e.g., slow queries, missing indexes), and suggest specific optimization strategies. It is useful for improving database query execution speed and resource utilization.
providing-performance-optimization-advice
Provide comprehensive prioritized performance optimization recommendations for frontend, backend, and infrastructure. Use when analyzing bottlenecks or seeking improvement strategies. Trigger with phrases like "optimize performance", "improve speed", or "performance recommendations".
profiling-application-performance
Execute this skill enables AI assistant to profile application performance, analyzing cpu usage, memory consumption, and execution time. it is triggered when the user requests performance analysis, bottleneck identification, or optimization recommendations. the... Use when optimizing performance. Trigger with phrases like 'optimize', 'performance', or 'speed up'.
performance-testing
This skill enables Claude to design, execute, and analyze performance tests using the performance-test-suite plugin. It is activated when the user requests load testing, stress testing, spike testing, or endurance testing, and when discussing performance metrics such as response time, throughput, and error rates. It identifies performance bottlenecks related to CPU, memory, database, or network issues. The plugin provides comprehensive reporting, including percentiles, graphs, and recommendations.
detecting-performance-regressions
This skill enables Claude to automatically detect performance regressions in a CI/CD pipeline. It analyzes performance metrics, such as response time and throughput, and compares them against baselines or thresholds. Use this skill when the user requests to "detect performance regressions", "analyze performance metrics for regressions", or "find performance degradation" in a CI/CD environment. The skill is also triggered when the user mentions "baseline comparison", "statistical significance analysis", or "performance budget violations". It helps identify and report performance issues early in the development cycle.
performance-lighthouse-runner
Performance Lighthouse Runner - Auto-activating skill for Frontend Development. Triggers on: performance lighthouse runner, performance lighthouse runner Part of the Frontend Development skill category.
performance-baseline-creator
Performance Baseline Creator - Auto-activating skill for Performance Testing. Triggers on: performance baseline creator, performance baseline creator Part of the Performance Testing skill category.
optimizing-cache-performance
Execute this skill enables AI assistant to analyze and improve application caching strategies. it optimizes cache hit rates, ttl configurations, cache key design, and invalidation strategies. use this skill when the user requests to "optimize cache performance"... Use when optimizing performance. Trigger with phrases like 'optimize', 'performance', or 'speed up'.
aggregating-performance-metrics
This skill enables Claude to aggregate and centralize performance metrics from various sources. It is used when the user needs to consolidate metrics from applications, systems, databases, caches, queues, and external services into a central location for monitoring and analysis. The skill is triggered by requests to "aggregate metrics", "centralize performance metrics", or similar phrases related to metrics aggregation and monitoring. It facilitates designing a metrics taxonomy, choosing appropriate aggregation tools, and setting up dashboards and alerts.
exa-performance-tuning
Optimize Exa API performance with search type selection, caching, and parallelization. Use when experiencing slow responses, implementing caching strategies, or optimizing request throughput for Exa integrations. Trigger with phrases like "exa performance", "optimize exa", "exa latency", "exa caching", "exa slow", "exa fast".
evernote-performance-tuning
Optimize Evernote integration performance. Use when improving response times, reducing API calls, or scaling Evernote integrations. Trigger with phrases like "evernote performance", "optimize evernote", "evernote speed", "evernote caching".