المهارات frontend-mobile-development-component-scaffold
📦

frontend-mobile-development-component-scaffold

مراجعة المحتوى r2 آمن ⚙️ الأوامر الخارجية

بناء هياكل مبدئية لمكونات React

تحتاج الفرق إلى بنية مكونات متسقة عبر مشاريع الويب والهواتف المحمولة. توجه هذه المهارة Claude وCodex وClaude Code لإنشاء هياكل مبدئية لمكونات مكتوبة الأنواع مع اختبارات وأنماط وقصص وفحوصات إمكانية الوصول.

يدعم: Claude Codex Code(CC)
🥉 78 برونزي

التثبيت باستخدام Agent لدي

انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.

طلب الوكيل
Review the Skillstore skill "frontend-mobile-development-component-scaffold" from https://skillstore.io/skills/sickn33-frontend-mobile-development-component-scaffold.md and its manifest at https://skillstore.io/api/skills/sickn33-frontend-mobile-development-component-scaffold/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.

موارد مهيّأة لـ Agents

استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.

اختبرها

جارٍ استخدام "frontend-mobile-development-component-scaffold". Scaffold a ProductCard component with image, title, price, and add-to-cart action.

النتيجة المتوقعة:

هيكل مبدئي منظم يتضمن خصائص المكون وإرشادات CSS module واختبارات التصيير واختبارات التفاعل ومتغيرات القصة وتصدير index.

جارٍ استخدام "frontend-mobile-development-component-scaffold". Create a React Native settings row with label, value, and press handling.

النتيجة المتوقعة:

خطة مكون للهاتف المحمول مع خصائص مكتوبة الأنواع وأقسام StyleSheet وتسميات إمكانية الوصول وسلوك الضغط وملاحظات تغطية الاختبار.

جارٍ استخدام "frontend-mobile-development-component-scaffold". Create a reusable table empty state component for a design system.

النتيجة المتوقعة:

هيكل مبدئي لنظام تصميم يتضمن تعريفات الخصائص ورسائل حالة قابلة للوصول وخيارات تنسيق وسيناريوهات Storybook وقائمة تحقق للتحقق.

التدقيق الأمني

آمن

All 46 external-command matches are TypeScript template literals or Markdown code fences, with no command runner or shell invocation. The array join is ordinary source generation, and no prompt injection or malicious intent was found.

1
الملفات التي تم فحصها
412
الأسطر التي تم تحليلها
0
عناصر المراجعة
0
تم تجاهل الإيجابيات الكاذبة
لم يكتشف أحدث تدقيق ثابت ودلالي مكتمل أي نتائج أمنية مؤكدة. ولا يثبت ذلك أن المهارة خالية من الآثار الجانبية.
شارك واستشهد بهذا التقرير

شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.

فتح التقرير المرتبط بالإصدار
تقييم الأمان

نسخ رابط التقرير

https://skillstore.io/skills/sickn33-frontend-mobile-development-component-scaffold/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

شارة Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/sickn33-frontend-mobile-development-component-scaffold/security.svg)](https://skillstore.io/skills/sickn33-frontend-mobile-development-component-scaffold?utm_source=security_passport_badge)

شارة HTML

<a href="https://skillstore.io/skills/sickn33-frontend-mobile-development-component-scaffold?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-frontend-mobile-development-component-scaffold/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

بطاقة قابلة للتضمين

<iframe src="https://skillstore.io/embed/skills/sickn33-frontend-mobile-development-component-scaffold.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
الاستشهادات الأكاديمية (APA · BibTeX · CFF)

اقتباس APA

sickn33. (2026). frontend-mobile-development-component-scaffold security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-frontend-mobile-development-component-scaffold/audits/5

اقتباس BibTeX

@techreport{sickn33-sickn33-frontend-mobile-development-component-scaffold-2026, author = {sickn33}, title = {frontend-mobile-development-component-scaffold security audit report (audit version 5)}, institution = {Skillstore}, year = {2026}, number = {5}, url = {https://skillstore.io/skills/sickn33-frontend-mobile-development-component-scaffold/audits/5}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "frontend-mobile-development-component-scaffold security audit report (audit version 5)" version: "unspecified" type: report authors: - name: "sickn33" date-released: "2026-07-23" url: "https://skillstore.io/skills/sickn33-frontend-mobile-development-component-scaffold/audits/5" identifiers: - type: other value: "skillstore:sickn33-frontend-mobile-development-component-scaffold:audit:5" description: "Skillstore immutable audit report identifier"

تقييم Skillstore

سبب هذا التقييم موثوقية الأدلة: مرتفع
55
الهندسة المعمارية
85
قابلية الصيانة
87
المحتوى
68
المجتمع
83
الامتثال للمواصفات

ما الذي يمكنك بناؤه

إنشاء مكونات الميزات

إنشاء هيكل مبدئي لمكون جديد مكتوب الأنواع مع خصائص وأنماط واختبارات وتصديرات لميزة منتج.

بدء واجهات الهواتف المحمولة

إنشاء بنية مكون React Native مع تنسيق StyleSheet وتسميات إمكانية الوصول.

توحيد أنظمة التصميم

تعريف أنماط مكونات قابلة للتكرار مع قصص وعناصر تحكم وتوقعات اختبار.

جرّب هذه الموجّهات

مكون ويب للمبتدئين
Create a TypeScript React button component named PrimaryButton. Include props for label, disabled, and onPress. Use CSS modules and accessibility support.
بطاقة React Native
Scaffold a React Native profile card with avatar, title, subtitle, and onPress. Include typed props, StyleSheet styling, and accessibility labels.
عرض بيانات ذي حالة
Build a universal data display component for web and native. Include loading, empty, and error states. Add tests and Storybook coverage.
لوحة نظام تصميم
Design a design-system component scaffold for a filter panel. Include controlled props, keyboard accessibility, interaction tests, and Storybook arg controls.

أفضل الممارسات

  • قدم أسماء مكونات وأسماء خصائص واحتياجات حالة ومنصة مستهدفة بوضوح.
  • اطلب إمكانية الوصول والاختبارات وقصص Storybook عندما يكون المكون موجهًا للمستخدم.
  • راجع العناصر النائبة المولدة قبل استخدامها في الإنتاج.

تجنب

  • لا تطلب مكونات مبهمة دون خصائص أو تفاعلات أو تفاصيل منصة.
  • لا تنشر الهياكل المبدئية المولدة قبل فحص imports والأنواع والاختبارات.
  • لا تخلط واجهات API الخاصة بالويب فقط ضمن طلبات مكونات React Native.

الأسئلة المتكررة

هل تنشئ هذه المهارة كود إنتاج كاملًا؟
تنشئ هياكل مبدئية وأمثلة مفصلة. يجب على المهندسين تكييف imports والأنماط والاختبارات لمشروعهم.
هل يمكن أن تعمل مع React Native؟
نعم. تتضمن التعليمات بنية مكونات React Native وتنسيق StyleSheet وتسميات إمكانية الوصول.
هل تتضمن إرشادات لإمكانية الوصول؟
نعم. تطلب الأدوار والتسميات والخصائص القابلة للوصول وتغطية اختبارات إمكانية الوصول.
هل تشغل الاختبارات تلقائيًا؟
لا. يمكنها توليد أمثلة اختبارات، لكن يجب على المستخدمين تشغيل الاختبارات في مشروعهم الخاص.
ما أساليب التنسيق المدعومة؟
تغطي المهارة CSS modules وstyled-components وإرشادات Tailwind وأنماط React Native StyleSheet.
هل يمكنني استخدامها مع Claude Code أو Codex؟
نعم. يسرد التقرير Claude وCodex وClaude Code كأدوات مدعومة.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

مراجعة Skillstore

r2

تنبيه الإصدار

لم يعلن المؤلف عن إصدار.

مرجع

88a8e9a07f4c54ab105c1c41b6267c287146b07b

حداثة الصيانة

٢٩‏/٧‏/٢٠٢٦

الاستخدام

8 تنزيلات · 80 مشاهدات

بنية الملفات

📄 SKILL.md