frontend-dev-guidelines
بناء واجهات React أمامية حديثة
تحتاج فرق الواجهات الأمامية إلى أنماط متسقة لـ React وTypeScript والتوجيه وجلب البيانات وحالات التحميل. توفر هذه المهارة إرشادات عملية وأمثلة لبناء ميزات واجهة أمامية قابلة للصيانة.
التثبيت باستخدام Agent لدي
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "frontend-dev-guidelines" from https://skillstore.io/skills/dimon94-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/dimon94-frontend-dev-guidelines/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
موارد مهيّأة لـ Agents
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
اختبرها
جارٍ استخدام "frontend-dev-guidelines". أنشئ صفحة تفاصيل مستخدم مع تحميل البيانات وملاحظات التحرير.
النتيجة المتوقعة:
خطة ميزة تتضمن موضع المسار وطرق خدمة API مكتوبة ومكونا مغلفا بـ Suspense وتدفق الطفرة وملاحظات snackbar وخطوات إبطال التخزين المؤقت.
جارٍ استخدام "frontend-dev-guidelines". راجع مكون لوحة معلومات يجلب عدة مجموعات بيانات.
النتيجة المتوقعة:
مراجعة موجزة تغطي موضع الاستعلام وتحميل البيانات المتوازي واحتياجات memoization واستقرار التخطيط وصيغة MUI Grid وتوصيات التنظيف.
جارٍ استخدام "frontend-dev-guidelines". نظم ميزة منشورات جديدة في تطبيق React موجود.
النتيجة المتوقعة:
مخطط مجلدات يتضمن API والمكونات وhooks والمساعدات والأنواع وexports العامة وملفات المسارات وإرشادات الأسماء المستعارة للاستيراد.
التدقيق الأمني
آمنThe static findings were reviewed against the skill files and are false positives from Markdown documentation and fixed frontend examples. The dynamic imports are React code-splitting examples, path traversal detections are import paths or documentation links, and network references are local application API client guidance. No prompt injection, malicious intent, data exfiltration, or executable installer behavior was found.
عوامل الخطر
⚡ يحتوي على سكربتات (22)
⚙️ الأوامر الخارجية (68)
📁 الوصول إلى نظام الملفات (30)
شارك واستشهد بهذا التقرير
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
نسخ رابط التقرير
https://skillstore.io/skills/dimon94-frontend-dev-guidelines/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportشارة Markdown
[](https://skillstore.io/skills/dimon94-frontend-dev-guidelines?utm_source=security_passport_badge)شارة HTML
<a href="https://skillstore.io/skills/dimon94-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/dimon94-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>بطاقة قابلة للتضمين
<iframe src="https://skillstore.io/embed/skills/dimon94-frontend-dev-guidelines.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
Dimon94. (2026). frontend-dev-guidelines security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/dimon94-frontend-dev-guidelines/audits/8اقتباس BibTeX
@techreport{dimon94-dimon94-frontend-dev-guidelines-2026,
author = {Dimon94},
title = {frontend-dev-guidelines security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/dimon94-frontend-dev-guidelines/audits/8},
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-dev-guidelines security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "Dimon94"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/dimon94-frontend-dev-guidelines/audits/8"
identifiers:
- type: other
value: "skillstore:dimon94-frontend-dev-guidelines:audit:8"
description: "Skillstore immutable audit report identifier"
مقارنة المتغيرات
7 متغيرات قابلة للتثبيتتبقى مهارة كل مؤلف عنصراً مستقلاً قابلاً للتثبيت. يُرتب المتغير الموصى به وفق أدلة Skillstore.
سبب تصدر هذا المتغير
briandai22-frontend-dev-guidelines
2026-09-09
0chan-smc-frontend-dev-guidelines
2026-09-09
bom-98-frontend-dev-guidelines
2026-09-09
sickn33-frontend-dev-guidelines
2026-09-09
dojocodinglabs-frontend-dev-guidelines
2026-09-09
dimon94-frontend-dev-guidelines
2026-09-09
diet103-frontend-dev-guidelines
2026-09-09
تقييم Skillstore
سبب هذا التقييم موثوقية الأدلة: مرتفعما الذي يمكنك بناؤه
إنشاء وحدة ميزة
خطط لمجلد ميزة جديد يتضمن خدمات API والمكونات وhooks والمساعدات والأنواع وملفات المسارات.
توحيد أنماط الفريق
راجع اختيارات المكونات والتوجيه والتنسيق وجلب البيانات مقارنة باتفاقية واجهة أمامية مشتركة.
تحديث الشاشات القديمة
أعد هيكلة أنماط التحميل والاستعلام والتخطيط الأقدم نحو Suspense وخدمات مكتوبة وتخطيطات مستقرة.
جرّب هذه الموجّهات
أنشئ مكون React TypeScript لـ [purpose]. اتبع إرشادات الواجهة الأمامية الخاصة بـ props وhooks وexports وتنسيق MUI وحدود Suspense عند الحاجة.
أضف جلب بيانات TanStack Query لـ [entity]. استخدم useSuspenseQuery وخدمة API خاصة بالميزة وقيم إرجاع مكتوبة ومفاتيح تخزين مؤقت ونمط التحميل الخاص بالمشروع.
صمم ميزة كاملة لـ [workflow]. ضمّن بنية المجلدات وملف المسار والتحميل الكسول وخدمة API والأنواع والمكونات وإشعارات المستخدم.
راجع كود الواجهة الأمامية هذا للتأكد من الامتثال للإرشادات. ركز على تنظيم الملفات واستخدام Suspense واستراتيجية التخزين المؤقت وصيغة MUI v7 والأداء ومعايير TypeScript.
أفضل الممارسات
- استخدم حدود Suspense وuseSuspenseQuery للمكونات الجديدة المعتمدة على البيانات.
- احتفظ بكود المجال داخل مجلدات الميزات وصدّر فقط واجهة API العامة للميزة.
- استخدم أنماط MUI sx المكتوبة وصيغة MUI v7 Grid وتخطيطات تحميل مستقرة.
تجنب
- العودة مبكرا باستخدام مؤشرات تحميل مستقلة تؤدي إلى إزاحة التخطيط.
- إنشاء imports نسبية عميقة عندما يمكن للأسماء المستعارة في المشروع التعبير عن المقصود بوضوح.
- خلط المكونات الخاصة بميزة معينة داخل مجلدات المكونات المشتركة دون حاجة لإعادة الاستخدام.
الأسئلة المتكررة
ما مجموعة الواجهة الأمامية التي تستهدفها هذه المهارة؟
هل يمكنها إنشاء هياكل ميزات كاملة؟
هل تشغل الكود أو تثبت الحزم؟
كيف تتعامل مع حالات التحميل؟
هل هي مفيدة للكود القديم؟
هل ستطابق الأمثلة كل مستودع؟
تفاصيل المطور
المؤلف
Dimon94الترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
72d5025b022c77f7a51bdf5c1637c689c80e89d1
حداثة الصيانة
٢٣/٧/٢٠٢٦
الاستخدام
6 تنزيلات · 684 مشاهدات