Skill'in Kendi İfadeleriyle
Google'ın Material Design 3 (Material You) tasarımının uygulanmasına, birincil hedef olarak Jetpack Compose Material3 ile, ayrıca Flutter ve @material/web üzerinden sınırlı bir web yoluyla rehberlik eder. Renk, tip ölçeği, şekil, yükseklik ve hareket için md.sys token sistemini, varyantlarıyla birlikte 30'dan fazla bileşene hızlı bir referansı, uyarlanabilir düzen ve navigasyonu, temalandırma ve dinamik rengi, M3 Expressive platform matrisini ve erişilebilirliği kapsar.
Bir denetim modu, bir uygulamayı veya sayfayı on kategoride 0-10 arası puanlar ve bir uyumluluk raporu üretir. Somut MD3 varsayılan değerlerine ihtiyaç duyan tasarımcılar ve geliştiriciler içindir: beş pencere boyutu sınıfı, gölgeler yerine tonal yükseklik, 8dp'lik bir aralık sistemi ve büyük pencerelerde maksimum içerik genişlikleri.
Neler üretir
- Genel bir puan ve kategoriye göre puanlar, kritik sorunlar, uyarılar, geçen öğeler ve önceliklendirilmiş düzeltmeler içeren markdown formatında bir MD3 uyumluluk raporu.
- dynamicLightColorScheme, lightColorScheme veya üretilmiş tema koduyla sağlanan bir colorScheme ile MaterialTheme'den oluşturulmuş bir Compose teması.
- Medya sorgusu veya sınıfla uygulanan bir koyu tema varyantı da içeren, md-sys özel özelliklerinden oluşan bir CSS tema bloğu.
Nasıl Çalışır
- 01Yığın Başka Türlü Söylemedikçe Compose'dan Başlayın
Dosya, Jetpack Compose Material3'ü varsayılan yol olarak ele alır ve Karar Ağacı, herhangi bir kod yazılmadan önce uygulama kabuklarını, tekil bileşenleri, temaları, formları, navigasyonu ve veri gösterimini belirli bölümlere ve referans dosyalarına yönlendirir.
- 02Token Katmanını Uygulayın
Tüm MD3 token'ları md.sys ad alanında yaşar; Compose bu semantik rolleri MaterialTheme.colorScheme, typography ve shapes üzerine eşlerken, web bunları md-sys önekli CSS custom properties üzerine eşler.
- 03Quick Reference'tan Bileşenleri Seçin
Bileşen tablosu her bileşenin web element adını, temel varyantlarını ve kategorisini listeler ve hangilerinin @material/web uygulaması olmadığını işaretler, böylece bunlar standart HTML ile CSS custom properties'ten oluşturulabilir.
- 04Common Patterns ile Bir Araya Getirin
App Shell, Card Grid ve Form Layout desenleri HTML ve CSS olarak verilir; bunlara, kompakt genişliklerde navigation rail'i bottom navigation'a çeviren bir breakpoint de dahildir.
- 05İstendiğinde Denetleyin
audit ile çağrıldığında, skill bir URL'yi, kaynak dosyaları veya çalışan bir uygulamayı inceler ve raporu yazmadan önce on kategoriyi 0'dan 10'a kadar puanlar.