interaction-designyazan Seth Hobson

Interaction Design Skill.

Claude Code ve Codex için kullanıcı deneyimi araştırma ajanı: mikro etkileşimler, hareket, geçişler ve kullanıcı geri bildirimi kalıpları.

UX & Araştırma

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

wshobson/agents · plugins/ui-design/skills/interaction-design/SKILL.mdSKILL.md

--- name: interaction-design description: Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences. --- ## When to Use This Skill ## Core Principles ## Quick Start: Button Microinteraction ## Interaction Patterns ## CSS Animation Patterns ## Accessibility Considerations

Üst bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okundu · tam hali 7.572 karakter

01 Ne yapar

interaction-design Skill'inin Claude Code ve Codex'te 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

Bu skill, kullanılabilirliği artırmak ve kullanıcıları memnun etmek için mikro etkileşimler, hareket tasarımı, geçişler ve kullanıcı geri bildirim kalıpları tasarlar ve uygular. Belirli zamanlama yönergeleri sunar: hover ve tıklama gibi mikro geri bildirimler için 100-150ms, toggle ve dropdown gibi küçük geçişler için 200-300ms, modal ve sayfa değişiklikleri gibi orta ölçekli geçişler için 300-500ms ve karmaşık koreografik animasyonlar için 500ms ve üzeri.

Skill; iskelet ekranlar ve ilerleme göstergeleriyle yükleme durumlarını, swipe-to-dismiss gibi jest tabanlı etkileşimleri, sayfa geçişlerini ve ripple efektleri gibi geri bildirim kalıplarını kapsar. Dekoratif olmaktan çok iletişim kuran amaçlı hareketi vurgular ve dört ilkeyi kullanır: eylemleri onaylamak için geri bildirim, öğe hareketini göstermek için yönlendirme, dikkati yönlendirmek için odak ve geçişler boyunca bağlamı korumak için sürekliliktir.

Neler üretir

Hover, tap ve yay (spring) animasyonlarıyla buton mikro etkileşimleri
Yükleme durumları için nabız gibi atan animasyonlu iskelet ekranlar
Akıcı yay tabanlı durum geçişlerine sahip toggle bileşenleri
AnimatePresence kullanılarak opaklık ve dikey hareketle sayfa geçişleri

Örnek istemi görün ↗

Nasıl Çalışır

01
Etkileşim Ölçeğine Göre Zamanlama Yönergelerini Takip Edin
Hover ve tıklama gibi mikro geri bildirimler için 100-150ms, toggle gibi küçük geçişler için 200-300ms, modal gibi orta ölçekli geçişler için 300-500ms ve karmaşık animasyonlar için 500ms ve üzeri kullanın.
02
Uygun Easing Fonksiyonlarını Seçin
Giren öğeler için ease-out (yavaşlayan), çıkan öğeler için ease-in (hızlanan), durumlar arasında hareket için ease-in-out ve oyuncu taşma efektleri için spring kullanın.
03
Erişilebilirlik Tercihlerine Uyun
prefers-reduced-motion medya sorgusunu kontrol edin ve kullanıcılar azaltılmış hareket talep ettiğinde animasyonların rahatsızlık vermemesi için animasyon sürelerini 0.01ms'ye düşürün.

02 Uyumunuzu bulun

interaction-design Skill'i Ne Zaman Kullanılır

Bu tür UX araştırması işleri için Claude Code veya Codex'te interaction-design skill'ini kullanın. Uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Düğmeler, geçiş anahtarları ve etkileşimli öğelerde kullanıcı geri bildirimini artırmak için mikro etkileşimler ekleme
Görünümler veya durumlar arasında akıcı sayfa ve bileşen geçişleri uygulama
Veri getirme sırasında düzeni koruyan yükleme durumları ve iskelet ekranları tasarlama
Kaydırarak kapatma veya sürükle-bırak gibi jest tabanlı etkileşimler oluşturma
Giriş ve çıkış animasyonlarına sahip bildirim ve toast sistemleri oluşturma

Sınırları Bilin

Kesintili performansa neden olan width, height, top veya left özelliklerini animasyonlandırma
Optimizasyon için will-change'i aşırı kullanma, bu performansı düşürebilir

03 Skill'in içinde

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

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

Yalnızca Transform ve Opacity'yi Animasyonlandırın
Akıcı 60fps animasyonlar için yalnızca transform ve opacity özelliklerini kullanın. width, height, top veya left özelliklerini asla animasyonlandırmayın çünkü bunlar kesintili animasyonlara neden olur.
Hareket İletişim Kurmalı, Süslemek İçin Olmamalı
Her animasyon bir amaca hizmet etmelidir: eylemlerin gerçekleştiğini onaylamak, öğelerin nereye taşındığını göstermek, değişikliklere dikkat çekmek veya bağlamı korumak.
Tutarlı Zamanlama Ölçeği Kullanın
Bütünsel bir hissiyat oluşturmak için aynı zamanlama değerlerini ve yumuşatma fonksiyonlarını tüm uygulama boyunca tutarlı şekilde uygulayın.

04 İşe koyun

interaction-design'ı Claude Code veya Codex'e Kurun

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

interaction-design'ı 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/wshobson/agents --skill interaction-design

plugins/ui-design/skills/interaction-design/SKILL.md için genel skills CLI formu; depo kendi yolunu belgelemiş olabilir.

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

Add microinteractions to the [component name] in [file path]. Implement hover and tap feedback on the submit button, add a skeleton screen for the loading state, and create a smooth toggle animation for the [setting name] switch. Make sure all animations respect prefers-reduced-motion and run at 60fps.

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:

Kullanıcıların uzun animasyonları kesintiye uğratıp iptal edebildiğini test edin

OpenDesign'da interaction-design'ı 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: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill dosyası: plugins/ui-design/skills/interaction-design/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 4236bb9
License: MIT LICENSE dosyasından.
Repository yıldızları: 39.635 Katalogda 18 skill içeren wshobson/agents deposunun tamamı için 2026-09-14 tarihinde alınan GitHub anlık görüntüsü. interaction-design 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

Bu Skill Ne Zaman KullanılırMikro etkileşimler, geçişler, yükleme durumları, jestler, bildirimler, sürükle-bırak, kaydırma animasyonları ve hover durumları dahil sekiz senaryoyu listeler
Temel İlkelerDört ilkeyle amaçlı hareketi tanımlar ve farklı etkileşim türleri için zamanlama yönergeleri ile yumuşatma fonksiyonları sağlar
Hızlı Başlangıç: Düğme Mikro EtkileşimiHover, dokunma ve yay animasyonuyla eksiksiz bir Framer Motion düğme örneği gösterir
Etkileşim KalıplarıYükleme durumları, durum geçişleri, sayfa geçişleri, ripple gibi geri bildirim kalıpları ve kaydırarak kapatma gibi jest etkileşimleri için kod örnekleri sağlar
CSS Animasyon KalıplarıfadeIn, pulse ve spin için keyframe animasyonlarını, ayrıca hover efektleri için CSS geçişlerini gösterir
Erişilebilirlik DeğerlendirmeleriHem CSS hem de JavaScript'te prefers-reduced-motion'ın nasıl tespit edilip dikkate alınacağını gösterir
En İyi UygulamalarPerformans odaklı yaklaşım, azaltılmış hareket desteği, tutarlı zamanlama, yay animasyonları, kesilebilirlik, kademeli iyileştirme ve cihaz testi dahil yedi kural listeler
Yaygın SorunlarSarsıntılı animasyonlar, aşırı animasyon kullanımı, etkileşimleri bloklama, bellek sızıntıları ve uygunsuz will-change kullanımı dahil beş sorunu tanımlar

Skill'in Kendi Açıklaması

"Mikro etkileşimler, hareket tasarımı, geçişler ve kullanıcı geri bildirim kalıpları tasarlayın ve uygulayın. UI etkileşimlerine incelik eklerken, yükleme durumları uygularken veya keyifli kullanıcı deneyimleri oluştururken kullanın."

SKILL.md'den ön madde açıklaması. Dosyanın tamamı yaklaşık 7.572 karakterdir. Dosyanın tamamını GitHub'da okuyun.

06 Kurmadan önce

interaction-design 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.

Bu skill hangi animasyon kütüphanesini kullanıyor?

Skill temel olarak React bileşenleri için Framer Motion kullanır; sayfa geçişleri için AnimatePresence ve hareketler için motion bileşenleri gibi örneklerle gösterilir. Ayrıca keyframe'ler ve transition'lar kullanan saf CSS animasyonlarını da kapsar ve her iki yaklaşımın birlikte nasıl çalıştığını gösterir.

Etkileşim Tasarımı

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

OpenDesign'ı indirin, SKILL.md bağlantısından interaction-design'ı 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