mobile-android-designyazan Seth Hobson

Mobile Android Design Skill.

Claude Code ve Codex için mobil uygulama tasarımı skill'i: Material Design 3 ve Jetpack Compose ile yerel Android UI.

Mobil Uygulamalar
UI kodu

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

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

--- name: mobile-android-design description: Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines. --- ## When to Use This Skill ## Detailed section: Core Concepts ## Quick Start Component ## Best Practices

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

01 Ne yapar

mobile-android-design Skill'i Claude Code ve Codex'te Ne Yapar

Ö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, ajanlara Material Design 3 (Material You) ve Jetpack Compose kullanarak native Android uygulamaları oluşturmayı öğretir. Compose UI düzenlerinin uygulanmasını, Navigation Compose ile Android navigasyon desenlerini, telefonlar, tabletler ve katlanabilir cihazlar için adaptif düzenleri, dinamik renklerle Material 3 temalandırmayı, erişilebilir Android arayüzlerini ve Android'e özgü hareketleri ve etkileşimleri kapsar.

Skill, Google'ın Material Design yönergelerini takip ederek ve farklı ekran yapılandırmalarını yöneterek Android ekosistemiyle sorunsuz bir şekilde bütünleşen modern, adaptif Android uygulamaları oluşturmaya odaklanır.

UI kodu

Örnek istemi görün ↗

Nasıl Çalışır

01
Material 3 Temalandırmayı Uygulayın
Karanlık modu otomatik olarak desteklemek ve kişiselleştirme için Android 12+ üzerinde dinamik rengi etkinleştirmek amacıyla renklere MaterialTheme.colorScheme üzerinden erişin.
02
Compose UI Bileşenleri Oluşturun
Bileşenleri yeniden kullanılabilir ve test edilebilir kılmak için uygun state hoisting ile Jetpack Compose desenlerini kullanarak composable'lar oluşturun.
03
Adaptif Düzenler Uygulayın
Telefonlar, tabletler ve katlanabilir cihazlar arasında uyum sağlayan responsive tasarımlar oluşturmak için WindowSizeClass kullanın.
04
Erişilebilirlik Desteği Ekleyin
Tüm etkileşimli öğeler için contentDescription sağlayın ve erişilebilirlik uyumluluğu için minimum 48dp dokunma alanları olduğundan emin olun.
05
Durumu (State) Doğru Şekilde Yönetin
Yapılandırma değişiklikleri sırasında durum kaybını önlemek için remember ve rememberSaveable'ı uygun şekilde kullanın.

02 Uyumunuzu bulun

mobile-android-design Skill Ne Zaman Kullanılır

İş bu tür bir mobil uygulama tasarımı olduğunda Claude Code veya Codex'te mobile-android-design skill'ini kullanın. Uygunluk ve sınırlar aşağıda skill'in kendi dosyasından alınmıştır.

İyi Uyum

Material Design 3 yönergelerini takip eden Android uygulama arayüzleri tasarlama
Native Android uygulamaları için Jetpack Compose UI ve düzenleri oluşturma
Telefonlar, tabletler ve katlanabilir cihazlarda çalışan adaptif düzenler oluşturma
Navigation Compose kullanarak Android navigasyon desenlerini uygulama
Uygun dokunma alanları ve içerik açıklamalarıyla erişilebilir Android arayüzleri oluşturma

03 Skill'in içinde

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

1 ajan için SKILL.md'nin belirlediği somut talimatlar, varsayılanlar ve sınırlar — sonucu değiştiren kısım budur.

Uzun Listeler için LazyColumn
Performans sorunlarını önlemek için uzun kaydırılabilir listeleri gösterirken Column yerine LazyColumn kullanın.

04 İşe koyun

Claude Code veya Codex'e mobile-android-design Kurulumu

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 mobile-android-design Ekleyin

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

Terminal

npx skills add https://github.com/wshobson/agents --skill mobile-android-design

plugins/ui-design/skills/mobile-android-design/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Skill'e İlk Mobil Uygulama Tasarım Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt

Build a product listing screen for [app name] using Jetpack Compose with Material Design 3. The screen should display a list of [items] with thumbnails, titles, and prices. Use adaptive layout with WindowSizeClass to show a single column on phones and a two-column grid on tablets. Each item card should navigate to a detail screen when tapped. Include proper state hoisting and accessibility support with content descriptions.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

Çıktıyı kabul etmeden önce, transkript ve dosyalarda bunları arayın:

Sonuç, bu skill için katalog listelerinin gösterdiği gibi, UI kodu olarak teslim edilir.
Ajan sonucu üretmeden önce planında veya transkriptinde mobile-android-design skill'ini adlandırır.
Kendi içeriğiniz, isimleriniz ve numaralarınız çıktıda değişmeden görünür.

OpenDesign'da mobile-android-design'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta 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/mobile-android-design/SKILL.md İçerik sağlaması doğrulama sırasında kaydedildi; commit 4236bb9
License: MIT LICENSE dosyasından.
Repository yıldızları: 39.635 GitHub anlık görüntüsü 2026-09-14 tarihinde çekildi; tüm wshobson/agents deposu için, bu katalogda 18 skill içerir. mobile-android-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ırMaterial Design 3, Compose UI, gezinme, uyarlanabilir düzenler, tema oluşturma ve erişilebilirlik için senaryoları listeler
Temel KavramlarBoyut kısıtlamaları nedeniyle ayrıntılı teknik içerik references/details.md'ye taşındı
Hızlı Başlangıç BileşeniMaterial Design 3 stiliyle ItemListCard için eksiksiz bir Compose kod örneği sunar
En İyi UygulamalarTema oluşturma, dinamik renk, düzenler, erişilebilirlik, durum ve önizlemeleri kapsayan sekiz somut kural
Yaygın SorunlarAltı sık görülen sorun: yeniden oluşturma, durum kaybı, performans, tema sızıntıları, gezinme ve bellek sızıntıları

Skill'in Kendi Açıklaması

"Yerel Android uygulamaları geliştirmek için Material Design 3 ve Jetpack Compose desenlerinde uzmanlaşın. Android arayüzleri tasarlarken, Compose UI uygularken veya Google'ın Material Design yönergelerini takip ederken kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 3.797 karakter uzunluğundadır. Tam dosyayı GitHub'da okuyun.

Mobile Android Design

mobile-android-design skill'ini gerçek bir mobil uygulama tasarım görevinde çalıştırın.

OpenDesign'ı indirin, mobile-android-design'ı SKILL.md bağlantısından içe aktarın, yukarıdaki prompt'u yapıştırın ve sonuçtan önce planı okuyun.

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