● مجتمع
anhvt52
⚡ فوري
jetpack-compose-skills
بواسطة anhvt52 · anhvt52/jetpack-compose-skills
اجعل Claude مطور Android Compose — @Composable اصطلاحية، رفع الحالة، Material 3، معاينات صحيحة.
jetpack-compose-skills تشفر أنماط تطوير Android الحديثة لـ Jetpack Compose: رفع الحالة، نطاق @Composable، قواعد ترتيب Modifier، مزايا Material 3، ربط ViewModel + StateFlow، navigation-compose، واختبارات متوافقة مع Compose. مناسبة لمشاريع Compose الجديدة تماماً ولهجرة الشاشات القائمة على Views.
لماذا تستخدمه
الميزات الأساسية
- بنية @Composable وانضباط رفع الحالة
- إعدادات مزايا Material 3 الافتراضية
- أنماط ViewModel + StateFlow + collectAsStateWithLifecycle
- اتفاقيات ملاحة Compose (navigation-compose)
- كتابة المعاينات والاختبارات التي تعمل فعلاً
عرض مباشر
كيف يبدو في الممارسة
jetpack-compose-skill.replay
▶ جاهز
حالات الاستخدام
استخدامات عملية: jetpack-compose-skills
متى تستخدمه: شاشة جديدة في تطبيق Compose — احصل عليها بشكل صحيح من المرة الأولى بدلاً من إعادة البناء لاحقاً.
الخطوات
-
وصف الشاشة
بناء شاشة ملف التعريف: الصورة الرمزية، الاسم، السيرة الذاتية، زر المتابعة. تأتي الحالة من ProfileViewModel.✓ تم النسخ
→ Composable بدون حالة + Composable غلاف ذو حالة + معاينة
-
ربط ViewModel
أوصل ViewModel باستخدام collectAsStateWithLifecycle.✓ تم النسخ
→ جمع حالة مدرك لدورة الحياة
-
أضف معاينة
أضف نسخ @Preview للحالات الفارغة والمحملة وحالات الخطأ.✓ تم النسخ
→ ثلاث معاينات يتم عرضها بدون ViewModel حي
النتيجة: شاشة Compose نظيفة مع معاينات وهيكل قابل للاختبار.
المزالق
- Composables ذات الحالة التي لا يمكنك معاينتها — اجعل Composable بدون حالة؛ ارفع الحالة إلى غلاف
- ترتيب Modifier غير صحيح — المهارة تعطيك قاعدة الترتيب — padding قبل background للحصول على خلفية مع حشوة، إلخ.
متى تستخدمه: تريد تحويل شاشة واحدة في المرة دون إعادة كتابة التطبيق كله.
الخطوات
-
تعيين XML
هنا fragment_profile.xml. عيّن كل عنصر لمكافئ Compose مع ملاحظات حول السلوكيات التي يجب الحفاظ عليها.✓ تم النسخ
→ تعيين XML → Compose مع ملاحظات السلوك
-
إعادة الكتابة
أنتج شاشة Compose. احتفظ بالحالة + الإجراءات متطابقة مع Fragment.✓ تم النسخ
→ ملف Composable + ViewModel بدون تغيير
-
احتفظ بالملاحة الهجينة إن لزم الأمر
استبدل هذه الشاشة فقط، اترك الباقي على Fragments باستخدام ComposeView.✓ تم النسخ
→ الملاحة الهجينة تستمر في العمل
النتيجة: شاشة واحدة مُنقولة بنظافة دون زعزعة الباقي.
المزالق
- تسريب Observer عند الخلط مع دورة حياة Fragment — استخدم viewLifecycleOwner مع ComposeView؛ حرر عند الحذف
التركيبات
اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10
تشغيل الشاشة الناتجة في محاكي والتكرار
بناء التطبيق، وتشغيله في المحاكي، وإظهار لي شاشة ملف التعريف.✓ تم النسخ
العمل عبر الوحدات في مشروع Compose
اقرأ feature/profile/ وأضف شاشة ملف التعريف في ui/.✓ تم النسخ
التكلفة والحدود
تكلفة التشغيل
- حصة API
- لا توجد
- الرموز لكل استدعاء
- 3–15k لكل شاشة
- التكلفة المالية
- مجاني
- نصيحة
- حدد نطاق واحد على شاشة واحدة + ViewModel الخاص بها في المرة الواحدة
الأمان
الصلاحيات والأسرار ونطاق الأثر
تخزين بيانات الاعتماد: لا توجد على مستوى المهارة
نقل البيانات الخارجي: لا توجد
استكشاف الأخطاء
الأخطاء الشائعة وحلولها
Preview fails to render
اجعل Composables بدون حالة؛ احذف ViewModel من مسار المعاينة.
StateFlow not collecting on background
استخدم collectAsStateWithLifecycle، وليس collectAsState، على الشاشات التي قد تكون في الخلفية.
البدائل
jetpack-compose-skills مقابل البدائل
| البديل | متى تستخدمها | المقايضة |
|---|
| apple-hig-designer-skill | أنت على iOS SwiftUI بدلاً من Android Compose | منصة مختلفة |
| claude-android-skill | تحتاج إلى مساعدة Android أوسع من واجهة المستخدم | أقل تخصصاً في Compose |