make-interfaces-feel-betteryazan Jakub Krehel

Make Interfaces Feel Better Skill.

Claude Code ve Codex için bir skill: hover, gölge, kenarlık, ikon, tipografi ve mikro etkileşim cilası için tasarım-mühendislik ilkeleri içeren UX araştırması.

UX & Araştırma

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

jakubkrehel/make-interfaces-feel-better · skills/make-interfaces-feel-better/SKILL.mdSKILL.md

--- name: make-interfaces-feel-better description: - Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border … --- ## Core Principles ## Common Mistakes ## Review Output Format

Yukarı akış dosyasından 2026-09-14 tarihinde okunan ön bilgi ve bölüm başlıkları · tam haliyle 11.798 karakter

01 Ne yapar

make-interfaces-feel-better Skill'in Claude Code ve Codex İçinde Yaptıkları

Ö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

UI bileşenleri oluşturan veya frontend kodunu inceleyen herkes için yazılmış, arayüzlerin cilalı hissetmesini sağlayan tasarım-mühendislik ilkeleri: hover durumları, gölgeler, kenarlıklar, tipografi, ikonlar, mikro etkileşimler ve giriş/çıkış animasyonları.

On dokuz numaralı temel ilke ile sıkı varsayılanlar taşır — eşmerkezli kenar yuvarlaklığı, optik hizalama, sahte yükseklik veren kenarlıklar yerine katmanlı box-shadow'lar, kesintiye uğrayabilen CSS geçişleri, yaklaşık 100ms'lik gecikme (stagger), antialiaslı metin, tablo rakamları, saf siyah veya beyaz görsel dış çizgileri, basışta scale(0.96), 44×44px dokunma alanları ve metinle eşleşen ikon çizgi kalınlığı. Hızlı ve tam olmak üzere iki inceleme modu, ilkeye göre gruplanmış, 5 veya 15 bulgu ile sınırlı, Blok, Değişiklik gerekli veya Onaylandı ile sonlanan bir Önem Derecesi/Konum/Önce/Sonra/Neden tablosu üretir.

Neler üretir

Neyin incelendiğini en başta belirten ve incelenmemiş bir yüzeyin kapsandığını asla ima etmeyen bir inceleme raporu.
Bir alt küme yerine yapılan veya önerilen her değişikliği listeleyen Önem Derecesi, Konum, Önce, Sonra, Neden tablosu içinde ilkeye göre gruplanmış bulgular.
Hızlı modda 1-3, tam modda 2-5 gerçek adayın her biri elenme nedeniyle yer aldığı Değerlendirilmiş ama Reddedilmiş tablosu.
Çalıştırılan tam komutları veya etkileşimleri ve gözlemlenen sonuçlarını listeleyen, ardından kararı sunan bir doğrulama bölümü.

Örnek istemi görün ↗

Nasıl Çalışır

01
Düzeltmeleri Projenin Kendi Stil Sistemiyle İfade Edin
Herhangi bir düzeltme önermeden veya yazmadan önce, projenin şeyleri zaten nasıl biçimlendirdiğini belirleyin ve değişikliği o sistemde ifade edin — bir Tailwind projesinde Tailwind, bir CSS projesinde düz CSS veya yerleşik CSS-in-JS yaklaşımı.
02
Arayüzü Yavaşlatın
İnceleme yaparken, hareketi tarayıcının Animations panelinde %10 hızda tekrar oynatın; çünkü %10 hızda yanlış görünen şey, tam hızda ince bir şekilde yanlış olan şeydir.
03
Varsayılan Olarak Tam Modu Kullanın
Herhangi bir inceleme modu belirtilmediğinde tam mod kullanılır; hızlı mod ise açıkça istenmelidir.
04
Bulguları Sabit Bir Tablo Biçiminde Yazın
Bulguları, Severity, Location, Before, After ve Why sütunları içeren bir markdown tablosunda ilkeye göre gruplandırın; location, path/to/file:line biçiminde alıntılanır.
05
Beş Kategorinin Tümünü Hesaba Katın
Kapsam tablosu, Quick Reference'ın beş kategorisinin tümünü içermelidir ve incelenmemiş bir yüzey asla incelenmiş gibi ima edilmemelidir.
06
Doğrulama ve Bir Kararla Kapatın
HIGH bir bulgu kaldığında karar Block'tur, sadece MEDIUM veya LOW bulgular kaldığında Needs changes'tır ve yalnızca yapılabilecek hiçbir şey kalmadığında Approve verilir.

02 Uyumunuzu bulun

make-interfaces-feel-better Skill Ne Zaman Kullanılır

İş bu tür bir UX araştırması olduğunda Claude Code veya Codex'te make-interfaces-feel-better skill'ini kullanın. Uygunluk ve sınırlar, skill'in kendi dosyasından alınmıştır.

İyi Uyum

Görsel detay çalışmasının önemli olduğu UI bileşenlerini oluşturma veya inceleme: animasyonlar, hover durumları, gölgeler, kenarlıklar, tipografi, ikonlar, mikro etkileşimler ve giriş/çıkış geçişleri.
Birincil kullanıcı yolu ve en yüksek trafikli durumlar üzerinden hızlı bir geçiş; yalnızca HIGH ve MEDIUM sorunları bildirir.
Tipografi, yüzeyler, animasyonlar, ikonlar ve performans genelinde istenen tüm kapsamın kapsamlı bir denetimi.
Zaten bir stil kuralı olan projeler, böylece cila düzeltmeleri uygun şekilde Tailwind, düz CSS veya CSS-in-JS içinde yer alır.

Sınırları Bilin

Sadece bir cila düzeltmesi sunmak için projeye ikinci bir stil sistemi eklemez.
Yüksek frekanslı etkileşimlerde özel animasyonu reddeder, çünkü dikkat maliyeti her tetiklemede tekrarlanır.
Rutin etkileşimleri kademelendirmez, yalnızca seyrek gerçekleşen aşamalı girişleri kademelendirir.
Sadece yükseklik hissi taklit etmek için tutulan kenarlıklar, katmanlı şeffaf box-shadow değerleriyle değiştirilmelidir; yapısal ve durum kenarlıkları kalır.

Ne Sağlamalısınız

package.jsonİkon animasyon yolunu belirlemek için gereklidir: motion veya framer-motion yüklü mü diye kontrol edin ve yerleşik import yoluyla eşleştirin.
Kaynak dosyalar veya kesin ekranlarBulgular path/to/file:line biçiminde alıntılanır; artifact'ın kaynak dosyaları yoksa, bunun yerine kesin ekran ve bileşen alıntılanır.
Mod, kapsam ve framework bağlamıRaporun gerçekte neyin incelendiğini gösterebilmesi için modu, kesin kapsamı, framework'ü, stil kurallarını ve varsa inceleme sınırını belirtin.

03 Skill'in içinde

make-interfaces-feel-better 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ı.

Eş Merkezli Yarıçapları Hesaplayın
İç içe köşeler eş merkezli olmalıdır: dış yarıçap, iç yarıçap artı dolgudur.
Basınç Her Zaman 0.96'da
Tıklama ölçeği scale(0.96) olarak sabittir ve 0.95'in altına asla düşmez; daha küçük bir değer aşırı gösterişli görünür. Hareketin dikkat dağıtacağı durumlarda statik bir prop bunu devre dışı bırakır.
Görsel Dış Hatları Nötr ve Saf Kalır
1px düşük opaklıktaki görsel dış hattı açık modda tam siyah, karanlık modda tam beyaz olmalıdır — asla surface rengini alıp kirli görünen slate veya zinc gibi tonlu bir nötr renk kullanılmamalıdır.
Asla Her Şeyi Transition Yapmayın
Kesin özellikleri belirtin, örneğin transition-property: scale, opacity. Tailwind'in transition-transform'u transform, translate, scale ve rotate'i kapsar.
İkon Kalınlığını Metin Ağırlığıyla Eşleştirin
1.5px kalınlık normal 400 metnin yanında, 2px ise yarı kalın 600 metnin yanında yer alır. Bir ikon setinde tek bir kalınlık kullanın ve tek bir yüzeyde asla farklı ikon kütüphanelerini karıştırmayın.
Tam İkon Animasyon Değerlerini Kullanın
Bağlama duyarlı ikon değişimleri visibility üzerinde değil, scale, opacity ve blur üzerinde animasyonlanır — bu değerler serbestçe belirlenmez, sabittir.
Yalnızca Seyrek Girişleri Kademelendirin
Aşamalı bir girişi anlamsal parçalara bölün ve bir konteyneri animasyonlamak yerine bunları yaklaşık 100ms arayla kademelendirin. Sık tekrarlanan, rutin etkileşimler kademelendirilmemelidir.
Dokunma Alanlarını Bilinçli Şekilde Boyutlandırın
Dokunmatik veya mobil için 44×44px'lik bir dokunma alanı, yoğun masaüstü arayüzlerinde ise en az 40×40px tercih edin; daha küçük görünür öğeleri bir pseudo-element ile genişletin.

04 İşe koyun

Claude Code veya Codex'e make-interfaces-feel-better Yükleyin

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

Claude Code, Codex veya Ajanınıza make-interfaces-feel-better Ekleyin

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

Terminal

npx skills add https://github.com/jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better

skills/make-interfaces-feel-better/SKILL.md için genel skills CLI formu; depo kendi yolunu farklı 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 [src/components/] in full mode. The card and its inner button both use rounded-xl, the counter shifts when the value changes, and the outline-to-fill icon swap exits with a jarring fade. Express every fix in [our existing styling system] and give me a Severity/Location/Before/After/Why table.

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:

İnceleme kapsamında arayüzün her durumunu — hover, focus, active, yükleme ve boş durum — gezin.
Çalıştırılmayan her kontrolü, ne kaldığını belirterek Doğrulanmadı olarak sonuç yargısının yanına listeleyin.
initial={false} uygulandığında, bunun kasıtlı giriş animasyonlarını bozmadığını doğrulayın.
Bulgu üst sınırına ulaşmak için raporu şişirmeyin ve bulgusu olmayan ilkeleri atlayın.

OpenDesign içinde make-interfaces-feel-better'ı 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: Jakub Krehel
Repository: github.com/jakubkrehel/make-interfaces-feel-better Branch main
Skill dosyası: skills/make-interfaces-feel-better/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 35545ea
License: MIT LICENSE'tan.
Repository yıldızları: 3.433 Tüm jakubkrehel/make-interfaces-feel-better deposu için 2026-09-14 tarihinde alınan GitHub görüntüsü. make-interfaces-feel-better için bir derecelendirme 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

Hızlı ReferansBeş kategori — tipografi, yüzeyler, animasyonlar, ikonlar, performans — her biri ne zaman kullanılacağıyla eşleştirilmiştir.
Temel İlkelerEş merkezli kenar yuvarlaklığından hareket kısıtlamasına kadar, kesin varsayılan değerlerle numaralandırılmış on dokuz kural.
Sık Yapılan HatalarHer sık yapılan hatayı çözümüyle eşleştiren tablo, örneğin transition: all ve küçük dokunma alanları.
İnceleme Çıkış BiçimiModlar, kapsam, bulgu üst sınırları, önem derecesi tanımları ve gerekli rapor yapısı.
Kapsam ve Kapsam AlanıModu, kapsamı, çerçeveyi ve konvansiyonları belirtin; incelenen kanıt ve sonuçla birlikte beş kategorinin tümünü listeleyin.
BulgularHer değişikliği kapsayan bir Önem Derecesi, Konum, Önce, Sonra, Neden tablosunda ilkeye göre gruplandırın.
ÖrnekEşmerkezli kenar yuvarlaklığı, tablosal sayılar ve basma sırasında ölçek için işlenmiş tablolar.
Değerlendirilip ReddedilenReddedilen gerçek sınırda adayların, belirtilen nedenle birlikte tablosu.
Doğrulama ve KararÇalıştırılan komutları veya etkileşimleri listeleyin, doğrulanamayan kontrolleri işaretleyin, sonra Engelle, Değişiklik Gerekli veya Onayla kararını verin.

Skill'in Kendi Açıklaması

"- Arayüzlerin cilalı hissetmesi için tasarım mühendisliği ilkeleri. UI bileşenleri oluştururken, frontend kodu incelerken, animasyonlar, hover durumları, gölgeler, kenarlıklar, tipografi, simgeler, mikro-etkileşimler, giriş/çıkış animasyonları veya herhangi bir görsel detay çalışması uygularken kullanın. Hızlı ve tam inceleme modlarını destekler. UI cila, tasarım detayları, "daha iyi hissettir", "tuhaf hissettiriyor", kademeli animasyonlar, kenarlık yarıçapı, optik hizalama, font yumuşatma, tablo sayıları, resim ana hatları, kutu gölgeleri, simgeler, simge kontur ağırlığı, simge durumları, hareket kısıtlaması tetikler."

SKILL.md'den ön-madde açıklaması. Tam dosya yaklaşık 11.798 karakter uzunluğundadır. Tam dosyayı GitHub'da okuyun.

06 Kurmadan önce

make-interfaces-feel-better 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.

Bağlamsal simge animasyonları için bir hareket kitaplığına gerek var mı?

Hayır. Hareket kitaplığı yüklü değilse, dosya her iki simgeyi de DOM'da tutar, birini absolute konumlandırır ve bunları CSS geçişleriyle çapraz solduruyor; bu da hiçbir bağımlılık gerektirmeden hem giriş hem çıkış animasyonu sağlar.

Sayfa yüklenirken bir giriş animasyonu oynatılıyor — bu nasıl ele alınır?

Dosya bunu AnimatePresence üzerindeki initial={false} ile önler; bu, ilk render'da giriş animasyonlarını durdurur ve ardından bunun kasıtlı giriş animasyonlarını bozup bozmadığını doğrulamanızı ister.

Bir inceleme performansı da kapsıyor mu, görselleri de?

Evet, performans, Hızlı Referans'taki beş kategoriden biridir; geçiş özgüllüğüne ve will-change kullanımına odaklanır. will-change yalnızca transform, opacity ve filter ile sınırlıdır — GPU'nun birleştirebileceği özellikler — ve will-change: all asla kullanılmaz.

Arayüzleri Daha İyi Hissettirin

Gerçek Bir UX Araştırma Görevinde make-interfaces-feel-better Çalıştırın.

OpenDesign'ı indirin, make-interfaces-feel-better'ı SKILL.md bağlantısından içe aktarın, yukarıdaki komutu yapıştırın ve sonuç öncesi planı okuyun.

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