Claude MarketplacesSubmit
ibelick avatar

Fixing Motion Performance

ibelick/ui-skills

The skill audits and fixes animation performance issues including layout thrashing, compositor property misuse, scroll-linked motion problems, and inefficient filter effects across CSS and JavaScript animations. It serves developers and designers who need to diagnose and resolve stuttering animations, janky transitions, or performance bottlenecks in UI motion work. The skill identifies violations against nine rule categories—from critical never-patterns like interleaving layout reads and writes to medium-priority issues like unnecessary blur effects—and provides concrete code-level fixes without requiring animation library migrations.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
8
skills.sh installs
28.6K
GitHub stars
10.9K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add ibelick/ui-skills --skill fixing-motion-performance --agent claude-code

Installs into .claude/skills of the current project.

Files

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

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/ibelick/ui-skills
Categories
Frontend Development, Debugging, Design & UI/UX

More from ibelick/ui-skills

All 5

Recommended

More Frontend Development
1flutter avatarflutter-fix-layout-issuesflutter/skillsflutter fix layout issues22.3Kskills.sh installs
2lewislulu avatarhtml-pptlewislulu/html-ppt-skillHTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a p21.4Kskills.sh installs
3dontbesilent2025 avatardbs-wechat-htmldontbesilent2025/dbskill把 Markdown 转成可粘贴到微信公众号后台的 HTML，并提供 15 种内置风格。用户要求生成公众号 HTML、制作微信版本或排版公众号文章时使用。19.6Kskills.sh installs
4wshobson avatarreact-native-designwshobson/agentsMaster React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navi16.1Kskills.sh installs
5langgenius avatarfrontend-code-reviewlanggenius/difyUse only when the user explicitly requests a review or audit of frontend code under `web/` or `packages/dify-ui/`. Supports pending-change, file-focused, and pa10.1Kskills.sh installs
6dotneet avatartypescript-react-reviewerdotneet/claude-code-marketplaceExpert code reviewer for TypeScript + React 19 applications. Use when reviewing React code, identifying anti-patterns, evaluating state management, or assessing9Kskills.sh installs