fixing-motion-performance
The fixing-motion-performance skill audits and suggests improvements for UI animation performance. It identifies layout thrashing, inefficient compositor usage, and problematic scroll-linked motion within CSS and JavaScript animation stacks.
Is fixing-motion-performance safe to install?
Safe to install: our audit of fixing-motion-performance's source files found 0 shell commands, 0 external URLs, file reads and writes (low risk). Every command and URL listed appears verbatim in the skill's source. The skill reads local files to perform audits and provides code suggestions. It does not execute shell commands or make network requests.
How we audit skills: our security review methodology.
Who is this skill for?
Frontend developers and UI engineers who need to optimize animation performance and resolve jank in web applications.
What can you do with it?
- Auditing CSS or JavaScript animations for performance bottlenecks.
- Refactoring code that causes layout thrashing.
- Implementing scroll-linked motion using performant APIs.
- Reviewing components for correct use of will-change and transform properties.
How good is this skill?
Quality score: 5/10. The skill provides clear, actionable rules and specific code examples for common performance issues. It maintains a strict scope by preventing unauthorized library migrations.
What does the skill file contain?
# 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 (...
Frequently asked questions
Does this skill automatically rewrite my animation code?
No. The skill provides code-level suggestions and identifies violations, but it does not modify files directly.
Can I use this to migrate from GSAP to CSS animations?
No. The skill explicitly prohibits migrating or rewriting animation libraries unless the user requests it.
What rendering steps does the skill prioritize for optimization?
The skill focuses on minimizing layout and paint operations, favoring compositor-only changes like transform and opacity.
Related skills
frontend-design
618.4KAI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs
The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.
hyperframes
157.0KDevelopers and content creators who need to automate video production, motion graphics, or code-based video editing using HTML and CLI-based workflows
HyperFrames is an intent-routing skill that manages video, animation, and motion graphic creation by directing requests to specialized workflows. It renders video from HTML compositions where timing is defined by data attributes. The skill acts as a central entry point for authoring, editing, and rendering video projects.
extract-design-system
124.5KDevelopers and designers who want to initialize design systems based on existing public websites
This skill extracts design primitives from public websites and generates starter token files for projects.