fixing-motion-performanceyazan Julien Thibeaut

Fixing Motion Performance Skill.

Claude Code ve Codex için hareket ve video skill'i: hantal CSS/JS animasyonlarını ve kaydırma bağlantılı hareketleri bulup düzeltir.

Motion & Video
İnceleme raporu

OpenDesign İndir Kullanım kılavuzunu görüntüle

ibelick/ui-skills · skills/fixing-motion-performance/SKILL.mdSKILL.md

--- name: fixing-motion-performance description: Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance. --- ## how to use ## when to apply ## rendering steps glossary ## rule categories by priority ## common fixes ## review guidance

Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okunmuştur · toplamda 5.561 karakter

01 Ne yapar

fixing-motion-performance Skill'in Claude Code ve Codex'te Yaptığı

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

CSS ve JS animasyon performansı için bir denetim ve düzeltme kılavuzu; takılan geçişleri, kaydırmaya bağlı hareketi ve bulanıklık efektlerini inceleyen veya yeniden düzenleyen tasarımcı ve geliştiricilere yöneliktir. Bir slash komutu olarak sunulur: boş çağrıldığında, kurallarını konuşmadaki mevcut animasyon işine uygular; bir dosya verildiğinde, tam satırı alıntılayarak, neden önemli olduğunu ve kod düzeyinde bir düzeltmeyi belirterek ihlalleri raporlar.

Kurallar öncelik sırasına göre düzenlenmiştir: kritik düzeydeki asla-yapılmayacak desenlerden, mekanizma seçiminden ve araç sınırlarından başlayıp, ölçüm, kaydırma, boyama, katmanlar ve bulanıklığa, en sonunda görünüm geçişlerine kadar iner. İstenmedikçe animasyon kütüphanelerini taşımayı reddeder; kuralları mevcut yığın içinde uygular.

Neler üretir

Her ihlal için neden önemli olduğunu açıklayan tek bir kısa cümle.
Her ihlal için kod düzeyinde somut bir düzeltme.
Varsayılan olmayan herhangi bir render işi seçimi için belirtilmiş bir gerekçe.

Örnek istemi görün ↗

Nasıl Çalışır

01
Bir Slash Komutu Olarak Çağırın
Kısıtlamaları oturumda zaten tartışılmakta olan herhangi bir animasyon işine bağlamak için /fixing-motion-performance komutunu çalıştırın.
02
Veya Bir Dosyaya Yönlendirin
Bir yol vermek, canlı işi kısıtlamak yerine o dosyayı her kurala göre kontrol ederek inceleme moduna geçirir.
03
Üç Bölüm Halinde Rapor Verin
Her bulgu, ihlal edilen satırı alıntılar, neden önemli olduğuna dair kısa bir cümle verir ve kod düzeyinde bir düzeltme önerir.
04
Özellikleri Render Adımına Göre Sıralayın
Sözlük, işi composite, paint ve layout olarak ayırır; böylece inceleyen kişi hangi animasyonların ucuz, hangilerinin maliyetli olduğunu bilir.
05
Öncelik Sırasına Göre Uygulayın
Kritik kategoriler, daha az etkili olanlardan önce kontrol edilir; böylece asla-yapılmayacak desenler ve araç sınırları önce ele alınır.
06
Mevcut Yığın İçinde Kalın
Kütüphane değişimi bu işin kapsamında değildir; kurallar, kod tabanının zaten kullandığı animasyon sistemine uygulanır.

02 Uyumunuzu bulun

fixing-motion-performance Skill Ne Zaman Kullanılır

Claude Code veya Codex içinde fixing-motion-performance skill'i, iş bu türde motion and video olduğunda kullanın. Aşağıdaki uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

CSS, WAAPI, Motion, rAF veya GSAP ile yazılmış UI animasyonları ekleme veya değiştirme.
Zaten takılıp sıçrayan etkileşimleri veya geçişleri yeniden düzenleme.
Şu anda scroll olaylarıyla çalışan, kaydırmaya bağlı hareketi veya kaydırdıkça görünme efektlerini uygulama.
Maliyet profilinin asıl mesele olduğu düzen, filtre, maske, gradyan veya CSS değişkenlerini animasyonlu hale getirme.
will-change, transform'lar veya ölçüme dayanan bileşenleri inceleme.

Sınırları Bilin

Etkileşim yoğun UI veya kesintiye uğratılabilir olması gereken akışlar gibi, gezinme düzeyi değişikliklerin ötesindeki görünüm geçişleri.
Optimize edilmek yerine tamamen hariç tutulan sürekli veya büyük yüzeyli bulanıklaştırma efektleri.

Ne Sağlamalısınız

Tek başına slash komutuCanlı iş için çıplak olarak çağırmak yeterlidir; bu, konuşma sırasında yapılan tüm animasyon değişikliklerini şekillendirir.
İnceleme modu için bir dosya yoluBir dosya iletmek, skill'in o dosyayı tüm kurallara göre incelemesini ve ihlal raporunu üretmesini sağlar.
Mevcut animasyon sistemiHedef bir kütüphane belirtmezsiniz; kod olduğu haliyle referans çerçevesidir ve kurallar bunun içinde uygulanır.

03 Skill'in içinde

fixing-motion-performance Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

Okuma ve Yazmaları Asla İç İçe Geçirmeyin
Düzen okumaları ve yazmaları aynı frame içinde karıştırılmamalı, düzeni ölçen veya değiştiren birden fazla animasyon sistemi birlikte çalıştırılmamalıdır.
Asla Kaydırma Konumundan Animasyon Yapmayın
Animasyonu scrollTop, scrollY veya scroll olaylarından yönetmek yasaktır; bunun yerine Scroll veya View Timelines ile IntersectionObserver kullanın.
Her rAF Döngüsünün Bir Çıkışı Olmalı
Durdurma koşulu olmayan bir requestAnimationFrame döngüsü kabul edilebilir bir ödünleşim değil, asla yapılmaması gereken bir örüntüdür.
Varsayılan Olarak Transform ve Opacity Kullanın
Bunlar compositor özellikleridir ve hareketin başlangıç noktasıdır; JS destekli animasyon, bunu gerektiren etkileşimler için ayrılmıştır.
Bulanıklığı 8px ile Sınırlayın
Bulanıklık animasyonu küçük kalmalı, 8px veya daha az olmalı ve kısa, tek seferlik efektlerle sınırlı tutulmalıdır; sürekli bulanıklık ve büyük yüzeylerde bulanıklık hariç tutulmuştur.
will-change'i Hassasiyetle Kullanın
Layer promotion otomatik değildir, bu nedenle will-change geçici ve dar kapsamlı olarak uygulanır; çok sayıda veya büyük promote edilmiş layer üzerinde bırakılmaz.
Hareket için CSS değişkenlerini animasyonlaştırmayın
transform, opacity veya position'ı yürüten özel özellikler animasyonlaştırılmamalı ve devralınan animasyonlu değişkenler tümüyle yasaktır.
Yarım geçiş yok
Tek bir bileşen içinde API'ler kısmen geçirilmemeli ve animasyon stilleri karıştırılmamalıdır.

04 İşe koyun

fixing-motion-performance'ı Claude Code veya Codex'e Yükle

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

fixing-motion-performance'ı Claude Code, Codex veya Ajanınıza Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill fixing-motion-performance

skills/fixing-motion-performance/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Skill'e İlk Hareket ve Video Görevi Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt

Use /fixing-motion-performance on [path/to/Component.tsx]. The [side panel] transitions width on hover, the reveal-on-scroll is wired to a window scroll listener, and there is a blurred overlay on a full-width section. Report each violation with the exact line, why it matters, and a concrete fix, working within our existing [Motion] setup rather than migrating libraries.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

Önerilen düzeltmenin, amaçlanan efekti hâlâ karşılarken en az maliyetli render işini yaptığını doğrulayın.
Ekran dışına taşınan her şeyin çalışır durumda bırakılmak yerine gerçekten duraklatıldığını veya durdurulduğunu kontrol edin.
Katman yükseltmesinin önem taşıdığı yerlerde, gerçekleştiğini varsaymak yerine araçlarla doğrulayın.

OpenDesign'da fixing-motion-performance'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: Julien Thibeaut
Repository: github.com/ibelick/ui-skills Branch main
Skill dosyası: skills/fixing-motion-performance/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit 79081ab
License: MIT LICENSE dosyasından.
Repository yıldızları: 8.402 GitHub görüntüsü 2026-09-14 tarihinde ibelick/ui-skills deposunun tamamı için alındı; depoda bu katalogda yer alan 5 beceri bulunuyor. fixing-motion-performance için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

nasıl kullanılırArgümansız çağırma oturumu sınırlar; bir dosya argümanı tam bir ihlal raporu tetikler.
ne zaman uygulanırAnimasyon çalışması sırasında bu yönergeleri tetiklemesi gereken beş durumu listeler.
render adımları sözlüğücomposite, paint ve layout'u ve her birinin kapsadığı özellikleri tanımlar.
önceliğe göre kural kategorileriBir etki etiketiyle sıralanmış dokuz kategori; kritikten düşüğe.
hızlı başvuruHiç kullanılmaması gereken kalıplardan araç sınırlarına uzanan, numaralanmış dokuz kısa madde kısıtı kategorisi.
yaygın düzeltmelerLayout thrashing, kaydırmaya bağlı hareket ve FLIP ölçümü için CSS ve JS öncesi/sonrası kod parçacıkları.
inceleme rehberiİnceleme nasıl yürütülür: önce kritik olanlar, en düşük maliyetli iş, gerekçelendirilmiş varsayılan dışı seçimler, uygulanabilir notlar.

Skill'in Kendi Açıklaması

Animasyon performans sorunlarını denetleyin ve düzeltin: layout thrashing, compositor özellikleri, scroll-linked motion ve blur efektleri dahil. Animasyonlar takıldığında, geçişler aksadığında veya CSS/JS animasyon performansını gözden geçirirken kullanın.

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 5.561 karakter. Dosyanın tamamını GitHub'da okuyun.

06 Kurmadan önce

fixing-motion-performance Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Hangi animasyon kütüphanelerini kapsıyor?

Kapsamında CSS, WAAPI, Motion, rAF ve GSAP'ı sayar; yani tek bir çerçeveye bağlı olmak yerine geniştir. Kuralları mevcut sistem içinde uyguladığı için, hâlihazırda kullanmakta olduğunuz hangisi olursa olsun uyum sağlar.

Fixing Motion Performance

fixing-motion-performance becerisini gerçek bir Motion and Video görevinde çalıştırın.

OpenDesign'ı indirin, fixing-motion-performance'ı SKILL.md bağlantısından içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill fixing-motion-performance

fixing-motion-performance Skill'in Claude Code ve Codex'te Yaptığı

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

fixing-motion-performance Skill Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

fixing-motion-performance Skill'in Claude Code ve Codex'e Verdiği Kurallar

Okuma ve Yazmaları Asla İç İçe Geçirmeyin

Asla Kaydırma Konumundan Animasyon Yapmayın

Her rAF Döngüsünün Bir Çıkışı Olmalı

Varsayılan Olarak Transform ve Opacity Kullanın

Bulanıklığı 8px ile Sınırlayın

will-change'i Hassasiyetle Kullanın

Hareket için CSS değişkenlerini animasyonlaştırmayın

Yarım geçiş yok