Tasarım & UX Skill
Accessibility Compliance
Ekran okuyucu desteği, klavye navigasyonu ve mobil erişilebilirlik içeren WCAG 2.2 AA uyumlu arayüzler oluşturmak için bir uygulama araç seti.
₺369
Web Component Design
React, Vue ve Svelte genelinde, prop patlaması yerine temiz birleştirme desenleriyle yeniden kullanılabilir ve bakımı kolay UI bileşenleri kurmanın ustalık dersi.
Davranış ile görünümü ayrık tutmak için compound bileşen, render prop, slot ve headless mimariyi öğretir. Kazanç, bir kez yazıp her yerde kullandığınız, yanlış kullanımı zorlaştıran tip-güvenli API'lere sahip bir bileşen kütüphanesidir.
₺369 tek seferlik
Bir kit içine ekle → Fiyatlara KDV (%20) dahildir. · Gerçek ajans işinden çıkarıldı · tek seferlik, kilit yok
- Tür Skill
- Kategori Tasarım & UX
- Teslimat E-posta · anında
- Lisans Tek seferlik
Çalışmanın içinden · kara kutu yok
Satın almadan önce işin kendisini gör.
Skill bir komponent kütüphanesi tasarlarken tam olarak bu döngüyü işletir. Kara kutu yok, yaptığı iş budur:
- Koddan önce kompozisyon kalıbını seçer: mantık paylaşımı için önce custom hook, ilişkili parçalar için bileşik komponent (Select.Trigger, Select.Options), render prop yalnızca kullanan tarafın gerçekten render kontrolüne ihtiyacı varsa. Yeni kodda HOC sarmalayıcı yasaktır
- API'yi savunmacı tasarlar: serbest string yerine variant union'ları, sıfır prop ile bile çalışan mantıklı defaultVariants ve isLoading'in disabled'ı otomatik tetiklemesi; çelişen durumlar derleme zamanında imkansızlaşır
- CVA variant haritaları, forwardRef ve className kaçış kapısıyla uygular; kullanan taraf wrapper div kalabalığı olmadan birleştirip ezebilir
- Kütüphaneyi atomik katmanlar: buton ve input atom, arama çubuğu molekül, header organizma. Her katman yalnızca bir altındakini tüketir; variant sayısının patlamasını engelleyen budur
- Sorumluluğu komponent başına böler: UserCard çizer, DataFetcher veri çeker. Test basittir: komponenti anlatmak için ve kelimesi gerekiyorsa bölünür
- Teslimden önce kalite tabanını doğrular: ARIA ve klavye desteği, yerine göre kontrollü ve kontrolsüz modlar, yalnızca ölçüm sonrası memoization ve gerçek içerik boyutunda skeleton'larla tam 4 durum kapsaması
Tek güç kaynağı. 6 hat dışarı.
web-component-design · çekirdek
çekirdek aktif · 6 hat
- ✓ yeniden kullanılabilir bir
Yeniden kullanılabilir bir bileşen kütüphanesi veya tasarım sistemi tasarlamak
- ✓ compound bileşen ve render
Compound bileşen ve render prop desenlerini uygulamak
- ✓ doğru css-in-js veya yar…
Doğru CSS-in-JS veya yardımcı sınıf stillendirme yaklaşımını seçmek
- ✓ 10'dan fazla prop alan m…
10'dan fazla prop alan monolitik bileşenleri birleştirmeye dönüştürmek
- ✓ erişilebilir, klavyeyle…
Erişilebilir, klavyeyle çalıştırılabilir özel bileşenler kurmak
- ✓ variant doğrulamalı tip-…
Variant doğrulamalı tip-güvenli bileşen API'leri tasarlamak
Aldıkların sende kalır.
Zamanı ileri sar. Ne kaldığını izle.
Sonsuza dek
Sahip olmak tam olarak bu.
Kiralık yığın
yapay zekâ yazım aracı: abonelik
süresi doldu · erişim gittianaliz paketi: abonelik
süresi doldu · erişim gittitasarım platformu: abonelik
süresi doldu · erişim gitti(geriye bir şey kalmadı)
Senin ocağın
-
Davranışı bir kez yazıp bağlama göre stillendirerek bileşen tekrar maliyetini düşürün
lisans: kalıcı -
Ayrık birleşim prop API'leriyle geçersiz durumları derleme anında engelleyin
lisans: kalıcı -
Yeniden render zincirlerinden ve çalışma anı CSS-in-JS performans cezasından kaçının
lisans: kalıcı -
ARIA, odak yönetimi ve 4 durumla varsayılan olarak erişilebilir bileşenler yayınlayın
lisans: kalıcı
abonelikler biter · tapular bitmez
Kutudaki her şey.
Bir parçayı eline al. Çalışırken izle.
React/Vue/Svelte için compound bileşen, render prop ve slot desenleri
6 parça · tek çalışan sistem · e-postayla anında teslim
Bu herkes için dövülmedi.
- Araç kiralamayı sahip olmaya tercih ediyorsan, sana göre değil.
- Yığınını senin yerine başkası yönetsin istiyorsan, sana göre değil.
- Tahmin etmekten memnunsan, sana göre değil.
Temiz, yeniden kullanılabilir ve tip-güvenli API'lerle çerçeveden bağımsız bileşen kütüphaneleri kuran ön yüz geliştiricileri ve tasarım sistemi sahipleri için.
o zaman bu senin için dövüldü.Hangi AI ile çalışır
Tasarımı gereği evrensel: her yapay zekada çalışır. Açık Agent Skills + MCP biçiminde gelir (Claude’da yerleşik); ChatGPT, Gemini, Cursor ve Copilot aynı dosyaları kendine uyarlar.
- Claude Yerleşik biçim
- ChatGPT Açık standartla uyarlanır
- Gemini Açık standartla uyarlanır
- Cursor Açık standartla uyarlanır
- Copilot Açık standartla uyarlanır
Aklındakini yakala.
hava temizlendi. seninle ocak arasında hiçbir şey kalmadı.
bir kıvılcım yakala: ocak cevaplar
-
Mevcut eski bileşenleri yeniden yazmadan bu desenlere geçebilir miyim?
Evet, kullanım alanlarından biri tam olarak bu: 10'dan fazla prop alan monolitik bileşenleri kademeli olarak birleştirme desenlerine dönüştürmek. Davranışı bir kez yazıp bağlama göre stillendirerek tekrar maliyetini düşürürsünüz, sıfırdan kütüphane şart değil.
-
Tip güvenli API vaadi pratikte nasıl çalışıyor?
Ayrık birleşim (discriminated union) prop API'leri geçersiz prop kombinasyonlarını derleme anında engeller; class-variance-authority ile variant doğrulaması, forwardRef ve asChild desenleriyle birleşir. Yanlış kullanım çalışma anında değil, daha kod yazılırken yakalanır.
-
Kurulup kullanılacak hazır bir bileşen kütüphanesi veriyor mu?
Hayır. Bu bir mimari ustalık dersi: compound bileşen, render prop, slot desenleri, CSS-in-JS karşılaştırma matrisi ve Atomic Design katmanlaması sunar. Bileşenleri kendi tasarım sisteminiz için siz kurarsınız.
-
Nasıl teslim edilir?
Satın alımdan hemen sonra e-posta ile iletilir, kuruluma hazır, anında indirilir; bekleme yok.
-
Tek seferlik mi, abonelik mi?
Tek seferlik alımdır; abonelik veya gizli ücret yoktur. Fiyata KDV (%20) dahildir.
-
İade alabilir miyim?
Dijital ürün olduğu için indirildikten sonra iade yapılmaz. Bu yüzden ne içerdiğini ve kime uygun olduğunu burada açıkça paylaşıyoruz.