Skills Emilkowalski

skills/skills/animate

Membangun animasi dari awal, membuat keputusan dalam urutan yang menentukan apakah terasa benar — apakah sebaiknya dianimasikan sama sekali, untuk tujuan apa, alat apa, properti apa, kurva dan durasi apa, bagaimana cara menginterupsinya, bagaimana cara keluar. Menulis implementasinya. Gunakan saat diminta menganimasikan sesuatu, menambahkan gerakan, membuat komponen terasa hidup, atau membangun transisi. Untuk mengkritik gerakan yang ada, gunakan review-animations; untuk mengaudit seluruh codebase, gunakan improve-animations.

skills/skills/animation-vocabulary

Glosarium pencarian terbalik yang mengubah deskripsi samar dari animasi web atau efek gerak menjadi istilah yang tepat ("hal yang memantul saat popover terbuka" → Pop in; "gulungan karet iOS" → Rubber-banding). Gunakan saat pengguna bertanya "apa namanya ketika…", atau mendeskripsikan efek gerak tanpa mengetahui namanya dan ingin kata yang tepat untuk memicu AI atau desainer. Untuk memberi nama efek, bukan merancang atau membangunnya.

skills/skills/apple-design

Pendekatan Apple terhadap desain antarmuka dan gerakan fisik yang mengalir, diterjemahkan untuk web. Gunakan saat membangun atau meninjau UI berbasis gestur, animasi pegas, interaksi seret/geser/lembar, momentum dan transisi yang dapat diinterupsi, material tembus pandang dan kedalaman, tipografi (ukuran optik, pelacakan, leading), gerakan tereduksi, atau fondasi desain (umpan balik, konsistensi spasial, pengendalian diri) di balik antarmuka bergaya Apple.

skills/skills/ask-sonner

Panduan untuk Sonner, pustaka toast React — instal dan hubungkan Toaster, pilih panggilan toast() yang tepat, promise dan loading toast, memperbarui, menutup, dan mempertahankan toast, styling, theming, dan ikon, penempatan dan banyak toaster. Gunakan saat bekerja dengan Sonner atau memecahkan masalahnya — toast yang tidak muncul, muncul dua kali, kehilangan gayanya, mengabaikan kelas Tailwind, berada di belakang modal, atau tidak mengikuti mode gelap.

skills/skills/emil-design-eng

Keahlian ini mengodekan filosofi Emil Kowalski tentang polesan UI, desain komponen, keputusan animasi, dan detail tak terlihat yang membuat perangkat lunak terasa hebat.

skills/skills/find-animation-opportunities

Cari codebase atau UI untuk tempat yang tidak beranimasi tetapi seharusnya, dan tolak semua yang tidak seharusnya. Hanya-baca; ini mengusulkan gerakan dengan nilai yang tepat, tidak mengimplementasikannya. Gunakan saat pengguna bertanya "apa yang bisa dianimasikan di sini?" atau ingin "membuat ini terasa lebih hidup". Untuk memperbaiki animasi yang ada, gunakan improve-animations atau review-animations sebagai gantinya.

skills/skills/improve-animations

Lakukan survei terhadap kode animasi dan gerakan pada basis kode sebagai penasihat gerakan senior, lalu hasilkan audit yang diprioritaskan dan rencana implementasi mandiri untuk dieksekusi oleh agen lain (atau model yang lebih murah). Hanya baca kode sumber — ia merencanakan perbaikan, tidak menerapkannya. Gunakan saat pengguna meminta untuk "memperbaiki animasi", "mengaudit gerakan", "membuat aplikasi ini terasa lebih baik", atau menginginkan peta jalan perbaikan animasi, bukan sekadar tinjauan satu perubahan.

skills/skills/pick-ui-library

Pilih library yang tepat untuk tugas frontend tertentu dari daftar terkurasi dan terarah — angka, input OTP, bagan, menu perintah, virtualisasi, seret dan lepas, toast, state, styling, dan lainnya. Hanya berjalan saat dipanggil secara eksplisit; tidak aktif dengan sendirinya.

skills/skills/prototype

Buat beberapa versi yang benar-benar berbeda dari sebuah bagian UI yang Anda deskripsikan, ditampilkan di balik pemilih visual sehingga Anda dapat melihat-lihat secara langsung dan memilih versi yang dirasa paling tepat. Hanya berjalan saat dipanggil secara eksplisit; tidak aktif dengan sendirinya.

skills/skills/review-animations

Meninjau kode animasi dan gerakan terhadap standar kerajinan tinggi yang berasal dari filosofi rekayasa desain Emil Kowalski. Default ke penandaan; persetujuan harus diperoleh.