frontend-dev-guidelines
بناء واجهات React أمامية متسقة
غالبا ما تنحرف فرق الواجهة الأمامية في أنماط جلب البيانات، والتوجيه، والتنسيق، وTypeScript. تمنح هذه المهارة Claude وCodex وClaude Code إرشادات React عملية لتنفيذ ومراجعة يمكن التنبؤ بهما.
التثبيت باستخدام Agent لدي
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "frontend-dev-guidelines" from https://skillstore.io/skills/sickn33-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/sickn33-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 query hooks، وحدود المكونات، وخيارات تخطيط MUI.
جارٍ استخدام "frontend-dev-guidelines". اطلب مراجعة طلب سحب للواجهة الأمامية.
النتيجة المتوقعة:
- تشير إلى عمليات إرجاع التحميل المبكر التي يجب نقلها خلف حدود Suspense.
- تلاحظ غياب أنواع إرجاع TypeScript الصريحة ومسارات الاستيراد غير الآمنة.
- تقترح التحميل الكسول للجداول والشاشات الحوارية الثقيلة.
جارٍ استخدام "frontend-dev-guidelines". اسأل عن كيفية تنظيم ميزة تحليلات جديدة.
النتيجة المتوقعة:
مخطط قائم على الميزات يتضمن API، والمكونات، وhooks، والمساعدات، والأنواع، وعمليات التصدير العامة، وإرشادات تكامل المسارات.
التدقيق الأمني
آمنAll 173 static findings are false positives caused by Markdown syntax and illustrative React or TypeScript code. The skill contains no executable scripts, shell commands, arbitrary file access, exfiltration endpoints, or prompt-injection instructions. No semantic security finding was identified.
عوامل الخطر
⚡ يحتوي على سكربتات (20)
⚙️ الأوامر الخارجية (50)
📁 الوصول إلى نظام الملفات (29)
شارك واستشهد بهذا التقرير
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
نسخ رابط التقرير
https://skillstore.io/skills/sickn33-frontend-dev-guidelines/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportشارة Markdown
[](https://skillstore.io/skills/sickn33-frontend-dev-guidelines?utm_source=security_passport_badge)شارة HTML
<a href="https://skillstore.io/skills/sickn33-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>بطاقة قابلة للتضمين
<iframe src="https://skillstore.io/embed/skills/sickn33-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
sickn33. (2026). frontend-dev-guidelines security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-frontend-dev-guidelines/audits/5اقتباس BibTeX
@techreport{sickn33-sickn33-frontend-dev-guidelines-2026,
author = {sickn33},
title = {frontend-dev-guidelines security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/sickn33-frontend-dev-guidelines/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-dev-guidelines 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-dev-guidelines/audits/5"
identifiers:
- type: other
value: "skillstore:sickn33-frontend-dev-guidelines:audit:5"
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
سبب هذا التقييم موثوقية الأدلة: مرتفعما الذي يمكنك بناؤه
توحيد ميزة React
استخدم الإرشادات لتنظيم مجلدات الميزات، وخدمات API، والاستعلامات، والمكونات، وملفات المسارات باتساق.
مراجعة طلبات السحب للواجهة الأمامية
قارن التغييرات بمعايير Suspense وTypeScript وMUI والأداء وجلب البيانات قبل الموافقة.
تخطيط ترحيل الواجهة الأمامية
أنشئ قواعد مشتركة لنقل قاعدة كود React نحو كتابة أكثر صرامة وحدود ميزات يمكن التنبؤ بها.
جرّب هذه الموجّهات
استخدم frontend-dev-guidelines لبناء مكون React مكتوب الأنواع لهذا المتطلب. اتبع البنية المطلوبة، وقواعد Suspense، وأنماط التنسيق في MUI v7.
استخدم frontend-dev-guidelines لتخطيط وتنفيذ ميزة جديدة. قم بتضمين بنية المجلدات، وحدود خدمة API، وquery hooks، وموضع المسار، ومسؤوليات المكونات.
استخدم frontend-dev-guidelines لمراجعة هذا التغيير في الواجهة الأمامية. حدد المشكلات المتعلقة بـ TypeScript، وعمليات الاستيراد، وحدود Suspense، وجلب البيانات، واستخدام MUI، وافتراضات الأداء.
استخدم frontend-dev-guidelines لإعادة هيكلة هذه المنطقة من React نحو بنية قائمة على الميزات. حافظ على السلوك مع تحسين الحدود، والتحميل الكسول، واستخدام الاستعلامات، وقابلية الصيانة.
أفضل الممارسات
- طبق الإرشادات قبل كتابة الكود، بحيث تكون قرارات البنية صريحة.
- حافظ على توثيق الاستثناءات الخاصة بالمشروع عندما لا يستطيع الكود الحالي اتباع المعيار.
- اقرن المهارة بالاختبارات، وأدوات lint، وفحوصات الوصول، والتحقق وقت التشغيل.
تجنب
- لا تفرض هذه القواعد على المشاريع التي تستخدم أطر واجهة أمامية مختلفة.
- لا تعامل الكود النموذجي كتنفيذ إنتاجي كامل.
- لا تتخط مراجعة المنتج، والوصول، والأمان لمجرد أن البنية تبدو صحيحة.
الأسئلة المتكررة
ما الأطر التي تستهدفها هذه المهارة؟
هل يمكنها المساعدة مع قواعد الكود الحالية؟
هل تولد كود واجهة أمامية قابلا للتشغيل؟
هل Suspense مطلوب لكل عملية جلب بيانات؟
هل تغطي قرارات التنسيق؟
هل يمكن لـ Claude Code أو Codex استخدامها في المراجعات؟
تفاصيل المطور
المؤلف
sickn33الترخيص
MIT
مراجعة Skillstore
r2
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
المستودع
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-dev-guidelinesمرجع
88a8e9a07f4c54ab105c1c41b6267c287146b07b
حداثة الصيانة
٢٦/٧/٢٠٢٦
الاستخدام
7 تنزيلات · 172 مشاهدات