/ الدليل / الملعب / jetpack-compose-skills
← كل الخوادم ↗ GitHub
● مجتمع 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.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

jetpack-compose-skill.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "jetpack-compose-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/anhvt52/jetpack-compose-skills",
        "~/.claude/skills/jetpack-compose-skills"
      ],
      "_inferred": true
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "jetpack-compose-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/anhvt52/jetpack-compose-skills",
        "~/.claude/skills/jetpack-compose-skills"
      ],
      "_inferred": true
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "jetpack-compose-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/anhvt52/jetpack-compose-skills",
        "~/.claude/skills/jetpack-compose-skills"
      ],
      "_inferred": true
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "jetpack-compose-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/anhvt52/jetpack-compose-skills",
        "~/.claude/skills/jetpack-compose-skills"
      ],
      "_inferred": true
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "jetpack-compose-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/anhvt52/jetpack-compose-skills",
        "~/.claude/skills/jetpack-compose-skills"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json
{
  "context_servers": {
    "jetpack-compose-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/anhvt52/jetpack-compose-skills",
          "~/.claude/skills/jetpack-compose-skills"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add jetpack-compose-skill -- git clone https://github.com/anhvt52/jetpack-compose-skills ~/.claude/skills/jetpack-compose-skills

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: jetpack-compose-skills

كيفية بناء شاشة Compose جديدة برفع الحالة

👤 مطورو Android الذين يكتبون واجهات مستخدم Compose ⏱ ~30 min intermediate

متى تستخدمه: شاشة جديدة في تطبيق Compose — احصل عليها بشكل صحيح من المرة الأولى بدلاً من إعادة البناء لاحقاً.

المتطلبات الأساسية
  • Android Studio مع Compose BOM حديث — استخدم أحدث Compose BOM مستقرة في البناء الخاص بك
  • تم استنساخ المهارة — git clone https://github.com/anhvt52/jetpack-compose-skills ~/.claude/skills/jetpack-compose-skills
الخطوات
  1. وصف الشاشة
    بناء شاشة ملف التعريف: الصورة الرمزية، الاسم، السيرة الذاتية، زر المتابعة. تأتي الحالة من ProfileViewModel.✓ تم النسخ
    → Composable بدون حالة + Composable غلاف ذو حالة + معاينة
  2. ربط ViewModel
    أوصل ViewModel باستخدام collectAsStateWithLifecycle.✓ تم النسخ
    → جمع حالة مدرك لدورة الحياة
  3. أضف معاينة
    أضف نسخ @Preview للحالات الفارغة والمحملة وحالات الخطأ.✓ تم النسخ
    → ثلاث معاينات يتم عرضها بدون ViewModel حي

النتيجة: شاشة Compose نظيفة مع معاينات وهيكل قابل للاختبار.

المزالق
  • Composables ذات الحالة التي لا يمكنك معاينتها — اجعل Composable بدون حالة؛ ارفع الحالة إلى غلاف
  • ترتيب Modifier غير صحيح — المهارة تعطيك قاعدة الترتيب — padding قبل background للحصول على خلفية مع حشوة، إلخ.
اجمعها مع: filesystem

هجرة شاشة قائمة على Views إلى Compose

👤 الفريق الذي يحول شاشات Android الموروثة ⏱ ~90 min advanced

متى تستخدمه: تريد تحويل شاشة واحدة في المرة دون إعادة كتابة التطبيق كله.

الخطوات
  1. تعيين XML
    هنا fragment_profile.xml. عيّن كل عنصر لمكافئ Compose مع ملاحظات حول السلوكيات التي يجب الحفاظ عليها.✓ تم النسخ
    → تعيين XML → Compose مع ملاحظات السلوك
  2. إعادة الكتابة
    أنتج شاشة Compose. احتفظ بالحالة + الإجراءات متطابقة مع Fragment.✓ تم النسخ
    → ملف Composable + ViewModel بدون تغيير
  3. احتفظ بالملاحة الهجينة إن لزم الأمر
    استبدل هذه الشاشة فقط، اترك الباقي على Fragments باستخدام ComposeView.✓ تم النسخ
    → الملاحة الهجينة تستمر في العمل

النتيجة: شاشة واحدة مُنقولة بنظافة دون زعزعة الباقي.

المزالق
  • تسريب Observer عند الخلط مع دورة حياة Fragment — استخدم viewLifecycleOwner مع ComposeView؛ حرر عند الحذف
اجمعها مع: android

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

jetpack-compose-skill + android

تشغيل الشاشة الناتجة في محاكي والتكرار

بناء التطبيق، وتشغيله في المحاكي، وإظهار لي شاشة ملف التعريف.✓ تم النسخ
jetpack-compose-skill + filesystem

العمل عبر الوحدات في مشروع Compose

اقرأ feature/profile/ وأضف شاشة ملف التعريف في ui/.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداةالمدخلاتمتى تستدعيهاالتكلفة
compose-authoring screen intent + state أي واجهة مستخدم Compose جديدة 0
state-hoisting-review existing composable عندما يكون من الصعب معاينة Composable 0
view-to-compose-migration XML + behaviors هجرات الشاشة تلو الشاشة 0

التكلفة والحدود

تكلفة التشغيل

حصة 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

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills