83.3K+İndir
Kullanım kılavuzuna geç
emil-design-engyazan Emil Kowalski

Emil Design Eng Skill.

UX araştırması için bir Claude Code ve Codex skill'i: Emil Kowalski'nin UI cilası, bileşen tasarımı ve animasyon kararları üzerine felsefesi.

  • UX & Araştırma
OpenDesign İndirKullanım kılavuzunu görüntüle
emilkowalski/skills · skills/emil-design-eng/SKILL.mdSKILL.md
--- name: emil-design-eng description: This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. --- ## Initial Response ## Core Philosophy ## Review Format (Required) ## The Animation Decision Framework ## Spring Animations ## Component Building Principles
Ön bilgi ve bölüm başlıkları 2026-09-14 tarihinde kaynak dosyadan okundu · tam hali 27.130 karakter

01 Ne yapar

emil-design-eng Skill'i Claude Code ve Codex'te Ne Yapar

Ö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

Bu skill, kodlama ajanlarına arayüz çalışması için Emil Kowalski'nin tasarım mühendisliği değerlendirmesini verir: bir şeyin animasyonlu olması gerekip gerekmediğine, hangi easing ve sürenin kullanılacağına ve duyarlı hissettiren bileşenlerin nasıl inşa edileceğine nasıl karar verileceği. Katı varsayılanlar belirler — UI animasyonları 300ms'nin altında, yerleşik CSS easing'ler yerine özel cubic-bezier eğrileri, asla ease-in kullanmama, asla scale(0) girişleri kullanmama, tetikleyicilerinden ölçeklenen popover'lar.

Ayrıca yaylar (springs), clip-path teknikleri, sürükleme ve hareket işleme, GPU performans kuralları, azaltılmış hareket ve kod incelemeleri için gerekli bir Before/After markdown tablosunu kapsar. Genel animasyon tavsiyeleri değil, zevke dayalı arayüz kararları isteyen tasarımcılar ve geliştiriciler için tasarlanmıştır.

Neler üretir

  • Before, After ve Why sütunlarına sahip, bulunan her sorun için bir satır içeren bir markdown inceleme tablosu
  • Önerilen özel easing eğrilerini içeren, yapıştırmaya hazır CSS değişkenleri
  • Ya Apple stilinde ya da geleneksel fizik parametreleriyle yay yapılandırma nesneleri
  • Review Checklist kategorilerinden çıkarılmış, önceliklendirilmiş bir düzeltme listesi
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Animasyonu Sıklığa Göre Sınırlandırın

    Herhangi bir animasyon kodu yazmadan önce, kullanıcıların bu etkileşimle ne sıklıkta karşılaşacağına karar verin.

  2. 02
    Amacı Adlandırın

    Her animasyon, geçerli listeden neden animasyonlu olduğunu yanıtlamalıdır: mekansal tutarlılık, durum göstergesi, açıklama, geri bildirim veya ani değişiklikleri önleme.

  3. 03
    Özel Bir Eğri Seçin

    Öğenin giriş yapıp yapmadığına, çıkış yapıp yapmadığına, hareket edip etmediğine veya sadece renk değiştirip değiştirmediğine göre easing seçin, ardından yerleşik eğrileri daha güçlü özel cubic-bezier'lerle değiştirin.

  4. 04
    Süreyi Belirleyin

    Süreyi tablodaki eleman türüyle eşleştirin — düğme basımı 100-160ms, açılır menüler 150-250ms, modaller 200-500ms — ve UI'yi 300ms üst sınırının altında tutun.

  5. 05
    Bileşen Varsayılanlarını Uygulayın

    Düğmeler :active durumunda 0,97'ye ölçeklenir, girişler scale(0) yerine opaklıkla birlikte 0,95'ten başlar ve popover'lar tetikleyicilerinden ölçeklenirken modaller ortalanmış kalır.

  6. 06
    Spring'leri Hak Ettikleri Yerde Kullanın

    Spring'ler momentumlu sürükleme, kesilebilir hareketler ve kasıtlı olarak dekoratif etkileşimler için uygundur.

02 Uyumunuzu bulun

emil-design-eng Skill Ne Zaman Kullanılır

Claude Code veya Codex'te işiniz bu türden bir UX araştırması olduğunda emil-design-eng skill'ini kullanın. Uygunluk ve sınırlamalar aşağıda skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Mevcut UI kodunu incelemek ve muğlak geri bildirim yerine somut bir düzeltme tablosu almak
  • Küçük detayların birikerek doğru hissettiren bir arayüz oluşturduğu bileşenler inşa etmek
  • Kapatmanın sadece sürüklenen mesafeye değil, çekme hızına tepki vermesi gereken sürükle ve kaydır çalışmaları
  • JS animasyonunun ana iş parçacığı meşgulken kare düşürdüğü performansa hassas arayüzler

Sınırları Bilin

  • Her yerde zıplayan spring'ler: sıçrama çoğu UI bağlamında kaçınılır ve sürükleyerek kapatma ile eğlenceli etkileşimler için ayrılır
  • Fonksiyonel veri görsellerinde, hiç animasyon olmamasının daha iyi olacağı yerlerde dekoratif hareket
  • Opaklık ile yükseklik kombinasyonu için bir formül isteyen herkes; dosya bunun deneme-yanılma olduğunu söylüyor
  • Azaltılmış hareketi sıfır animasyon olarak ele almak, dosyanın açıkça reddettiği bir şey

Ne Sağlamalısınız

  • Yazmak üzere olduğunuz animasyonFramework, herhangi bir animasyon kodu yazılmadan önce şu dört sorunun sırayla cevaplanmasını bekler: animasyon olmalı mı, neden, hangi easing, ne kadar hızlı.
  • Kullanıcıların bunu ne sıklıkta göreceğiSıklık ilk sorudur ve hiç animasyon olmamasından keyif katma iznine kadar tüm kararı yönlendirir.
  • Tarayıcı destek hedefinizGiriş animasyonları destek elverdiğinde @starting-style kullanır, aksi halde data-mounted attribute desenine geri döner.

03 Skill'in içinde

emil-design-eng Skill'inin Claude Code ve Codex'e Verdiği Kurallar

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

  1. Asla ease-in Kullanmayın

    ease-in, kullanıcının en dikkatli izlediği o başlangıç hareketini geciktirir, bu nedenle 300ms'lik bir ease-in açılır menü, aynı sürede ease-out'a göre daha yavaş hissettirir.

  2. Asla Scale(0)'dan Girmeyin

    Gerçek dünyada hiçbir şey tamamen kaybolup yeniden belirmez. Girişler opaklıkla birlikte scale(0,9) veya üzerinde başlar ve basma ölçeği 0,95-0,98 aralığında hafif kalır.

  3. Modaller Merkez Kaynağını Korur

    Popover'lar, Base UI'ın var(--transform-origin) özelliğini kullanarak transform-origin'i tetikleyicilerine ayarlamalıdır, ancak modaller bir tetikleyiciye bağlı olmadıkları için bu kuralın açık istisnasıdır.

  4. İncelemeler Gerçek Bir Tablo Kullanır

    Bir UI incelemesi, Before, After ve Why sütunları içeren gerçek bir markdown tablosu çıkarmalıdır; her sorun için bir satır. Before: ve After: satırlarının ayrı satırlarda olduğu bir liste yanlış formattır.

  5. Hover Davranışını Bir Medya Sorgusunun Arkasına Yerleştirin

    Hover animasyonları @media (hover: hover) and (pointer: fine) içine yerleştirilir, çünkü dokunmatik cihazlar dokunuşta hover tetikler ve yanlış pozitiflere neden olur.

  6. Kademelenmeyi Kısa ve Engellemeyen Tutun

    Kademelenme gecikmeleri öğeler arasında 30-80ms sürer; daha uzun gecikmeler arayüzü yavaş hissettirir, ve kademelenme dekoratif olduğu için oynatılırken etkileşimi asla engellememelidir.

04 İşe koyun

emil-design-eng'i Claude Code veya Codex'e Yükleyin

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

emil-design-eng'i 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/emilkowalski/skills --skill emil-design-eng

skills/emil-design-eng/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

Skill'e İlk UX Araştırma Görevini Verin

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

Starter prompt
Review the code for [the dropdown and the popover] in [component file]. The dropdown opens with ease-in over 300ms, the popover scales from center, and the entering panel animates from scale(0). Use the Before/After format and tell me what to change and why.

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:

  • Çalışmayı bir gece sonra taze gözlerle tekrar gözden geçirin, çünkü kusurlar üzerinden bir gece geçtikten sonra fark etmek daha kolaydır
  • Süreyi geçici olarak normalin 2-5 katına yavaşlatın veya zamanlama sorunlarını yakalamak için tarayıcının animasyon inceleyicisini kullanın
  • Tam hızda görünmeyen koordinasyon sorunlarını görmek için Chrome DevTools içinde animasyonu kare kare inceleyin
  • Çekmeceleri ve kaydırma hareketlerini gerçek cihazlarda test edin; telefonu USB ile yerel geliştirme sunucusuna bağlayarak
  • Ağır çekimde, animasyonlu özelliklerin senkronize kaldığını ve orijin ile easing'in doğru göründüğünü doğrulayın

OpenDesign içinde emil-design-eng birlikte gelir: Plugins → Skills, üst çubuktan seçin.

OpenDesign İndirHı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
Emil Kowalski
Repository
github.com/emilkowalski/skills Branch main
Skill dosyası
skills/emil-design-eng/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit d23d7f8
License
MIT LICENSE dosyasından.
Repository yıldızları
37.516 GitHub anlık görüntüsü 2026-09-14 tarihinde, bu katalogda 9 skill içeren tüm emilkowalski/skills deposu için alındı. emil-design-eng için bir puan 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 paketlenmiştir (2026-08-28 tarihinde kontrol edildi); bu sayfada canlı bir çalıştırma kaydı bulunmamaktadır.

SKILL.md içinde

  1. Temel FelsefeZevk eğitilir, görünmeyen ayrıntılar birikir ve güzellik gerçek bir ayırt edici unsurdur.
  2. İnceleme Formatı (Gerekli)Before/After/Why markdown tablosu gerektirir ve yasaklı liste formatını gösterir.
  3. Animasyon Karar ÇerçevesiDört sıralı soru: sıklık, amaç, easing, süre; ayrıca algılanan performans.
  4. Spring AnimasyonlarıSpringlerin uygun olduğu durumlar, useSpring ile fare takibi ve iki yapılandırma tarzı.
  5. Bileşen Oluşturma İlkeleriBasma geri bildirimi, scale(0)'dan kaçınma, popover orijini, tooltip gecikmeleri, keyframe'ler yerine transition'lar, blur.
  6. CSS Transform UstalığıYüzde translate'ler, alt öğeleri ölçekleme, 3D derinlik ve transform-origin çapaları.
  7. Animasyon için clip-pathOverlay'ler için inset reveal'ler, sekmeler, basılı tutarak silme, kaydırma reveal'leri, karşılaştırma kaydırıcıları.
  8. Gesture ve Sürükleme EtkileşimleriHız bazlı kapatma, sınır sönümlemesi, pointer capture, çok dokunuşlu koruma, sürtünme.
  9. Performans KurallarıSadece transform ve opacity'yi animasyonlayın, CSS değişken yeniden hesaplamasından kaçının, yük altında CSS'yi tercih edin.
  10. ErişilebilirlikAzaltılmış hareket opacity ve rengi korur, hareketi kaldırır; hover bir medya sorgusuyla kısıtlanır.
  11. Sonner İlkeleri (Sevilen Bileşenler Oluşturma)Sonner'dan DX, varsayılanlar, adlandırma, uç durumlar, geçişler, dokümantasyon üzerine altı ilke.
  12. İnceleme Kontrol ListesiYaygın sorunların ve önerilen düzeltmelerinin tablosu; transition-all'dan eksik stagger'a kadar.
Skill'in Kendi Açıklaması
"Bu skill, Emil Kowalski'nin UI cila, bileşen tasarımı, animasyon kararları ve yazılımı harika hissettiren görünmez detaylar üzerine felsefesini kodlar."

SKILL.md'den ön kısım açıklaması. Tam dosya yaklaşık 27.130 karakterdir. Tam dosyayı GitHub'da okuyun.

Emil Design Eng

emil-design-eng'i Gerçek Bir UX Araştırma Görevinde Çalıştırın.

emil-design-eng skill OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills bölümünden skill'i seçin, yukarıdaki prompt'u yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/emilkowalski/skills --skill emil-design-eng