التنسيق غير المتسق واستخدام المكونات المبعثر يخلق تحديات في الصيانة. توفر هذه المهارة نظام تصميم موحد مع رموز وأنماط لواجهات متماسكة.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "core-components". إنشاء رأس شاشة الإعدادات مع العنوان والأيقونة
النتيجة المتوقعة:
مكون ScreenHeader مع نص العنوان باستخدام لون $textPrimary وأيقونة موضوعة في HStack مع فجوة $3، ملفوفة في Box مع مساحة جانبية $4 وخلفية $backgroundPrimary.
استخدام "core-components". تنسيق زر معطل
النتيجة المتوقعة:
مكون Button مع الضبط المتغير على solid والخاصية isDisabled مضبوطة على true، مما يطبق تلقائ��اً تنسيقاً باهتاً باستخدام $textTertiary للون التسمية.
التدقيق الأمني
آمنStatic analyzer flagged 57 patterns (49 external_commands, 8 blocker) that are all false positives. The backtick detections are Markdown code fence delimiters (```tsx) used for syntax highlighting in documentation, not shell execution. No cryptographic code exists in this file. This is a documentation-only skill teaching React Native component library usage with design tokens. No security risks detected.
درجة الجودة
ماذا يمكنك بناءه
مطور الواجهة الأمامية يبني ميزات جديدة
يحتاج المطور إلى إضافة شاشة إعدادات جديدة مع نماذج وقوائم. يستخدم هذه المهارة لتطبيق رموز المسافات المتسقة ورموز الألوان وأنماط المكونات التي تتطابق مع نظام التصميم الحالي.
الفريق يقوم بتوحيد مكونات واجهة المستخدم
يلحظ الفريق تنسيقاً غير متسق في جميع ��نحاء التطبيق. يستخدمون هذه المهمة لإنشاء أنماط مشتركة للتخطيطات والطباعة والعناصر التفاعلية باستخدام رموز التصميم.
مراجع الكود يفرض المعايير
أثناء مراجعة الكود، يحدد المطور قيماً ثابتة ومكونات أصلية خام. يشيرون إلى هذه المهمة لتوجيه المساهمين نحو الاستخدام الصحيح للرموز والمكونات الأساسية.
جرّب هذه الموجهات
أرني كيفية إنشاء مكون بطاقة مع عنوان ومحتوى باستخدام مكتبة المكونات الأساسية مع رموز التصميم المناسبة.
إنشاء نموذج تسجيل دخول مع حقول إدخال البريد الإلكتروني وكلمة المرور باستخدام VStack ومكونات Input ورموز المسافات المناسبة. تضمين زر إرسال.
بناء مكون عنصر قائمة يعرض صورة رمزية للمستخدم واسمه وعنواناً فرعياً مع أيقونة سهم. استخدام HStack ورموز الفجوة المناسبة ورموز الألوان الدلالية لتسلسل النص.
راجع كود المكون هذا وحدد أي قيم ثابتة يجب أن تستخدم رموز التصميم. أظهر النسخة المصححة مع الاستخدام الصحيح للرموز للمسافات والألوان والطباعة.
أفضل الممارسات
- استخدم دائماً رموز التصميم ($4 و $textPrimary) بدلاً من القيم الثابتة (16 و #333333)
- استورد من components/core بدلاً من بدائل react-native الخام
- استخدم HStack و VStack للتخطيطات بدلاً من تكوين flexbox اليدوي
تجنب
- استخدام View و Text من react-native بدلاً من Box و Text من المكونات الأساسية
- تثبيت قيم البكسل للمسافات أو الألوان أو الطباعة
- إنشاء كائنات تنسيق مضمنة بدلاً من استخدام الخصائص المستندة إلى الرموز