Emil Kowalski Skills: Kodlama Ajanlarına Mikro-Etkileşim ve Animasyon Disiplini Kazandırmak

Frontend projelerimde arayüzün 'idare eder' seviyesinden 'mükemmel' seviyesine çıkmasını sağlayan şeyin renkler değil; bir butona tıklandığındaki mikro-tepki, menü açılırken gözü yormayan yay (spring) fiziği ve gereksiz yerlere animasyon basmama olgunluğu olduğunu uzun zaman önce fark ettim.

Sonner kütüphanesini ve animations.dev eğitim serisini hayranlıkla takip ettiğim Emil Kowalski, emilkowalski/skills reposuyla tam olarak bu ustalığı Claude Code ve Cursor ajanlarının anlayabileceği kurallara döktü. 39 bin yıldızlı bu repoyu projelerimde test ettiğimde, ajanın animasyon anlayışının nasıl kökten değiştiğine şahit oldum.

Yapay Zekâya Kod Yazdırırken En Sık Yaşadığım 3 Hata

Ajanlara 'interaktif ve akışkan bir kart yap' dediğimde eskiden şu üç büyük falsodan muzdariptim:

• Doğrusal Easing Klişesi: CSS transition: all 0.3s ease-in-out yazıp geçmek. Bu yaklaşım arayüzü robotik ve hantal hissettirir. Gerçek hayatta hiçbir fiziksel cisim aniden sabit hızla durup kalkmaz.
• Layout Shift (Düzen Titremesi): Genişlik (width) veya kenar boşluklarını (margin) anime ederek tarayıcıda reflow tetiklemek ve kare hızını (FPS) düşürmek. Bunun yerine her zaman transform ve opacity kullanılmalıdır.
• Aşırı Uzun Süreler: 500ms süren menü geçişleri ilk başta havalı dursa da kullanıcı için işkencedir. Emil'in kuralları etkileşimleri 150-200ms bandında tutar.

Nasıl Kurulur ve Nasıl Çalışır?

# Emil Kowalski skill setini ajana tanıtmak
npx skills-cli add emilkowalski/skills

# Veya Claude Code doğrudan ekleme
claude skill add emilkowalski/skills

Bu kuralları ekledikten sonra ajanım Framer Motion veya Tailwind ile kod yazarken doğrudan spring (yay) parametrelerini hesaplamaya başladı. Bir modal açılırken kütle (mass), sertlik (stiffness) ve sönümleme (damping) değerlerini doğru uyguladığı için arayüz anında Apple ekosistemindeki o akışkan ve pahalı hissiyata kavuştu.