المهارات frontend-patterns
📦

frontend-patterns

v1.0 مراجعة المحتوى r1 آمن ⚡ يحتوي على سكربتات⚙️ الأوامر الخارجية🌐 الوصول إلى الشبكة

بناء واجهات React أمامية أفضل

غالبا ما تكرر فرق الواجهات الأمامية قرارات المكونات والحالة والأداء من دون مرجع مشترك. توفر هذه المهارة أنماطا موجزة في React وNext.js توجه التنفيذ المتسق.

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

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

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

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

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

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

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

تفاصيل Markdown GET /skills/sickn33-frontend-patterns.md manifest موقَّع GET /api/skills/sickn33-frontend-patterns/manifest lockfile موقَّع GET /api/skills/sickn33-frontend-patterns/lockfile

اختبرها

جارٍ استخدام "frontend-patterns". أحتاج إلى واجهة تبويبات قابلة لإعادة الاستخدام للوحة معلومات.

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

يوصي بنمط المكونات المركبة، ويحدد المسؤوليات الرئيسية، ويشرح كيف يجب أن تتدفق الحالة المشتركة عبر السياق.

جارٍ استخدام "frontend-patterns". تحتوي قائمة السوق لدي على آلاف الصفوف والتمرير فيها بطيء.

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

يقترح الافتراضية وارتفاعات صفوف ثابتة وoverscan ومكونات عناصر محفوظة مؤقتا لتقليل عمل العرض.

جارٍ استخدام "frontend-patterns". أحتاج إلى نمط نافذة منبثقة يمكن الوصول إليها.

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

يجمع الرسوم المتحركة وإدارة التركيز والتعامل مع Escape وسمات dialog في قائمة تحقق تنفيذية موجزة.

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

آمن
v4 • ٦‏/٧‏/٢٠٢٦ فتح التقرير المرتبط بالإصدار

Reviewed all 44 static findings in SKILL.md. They are false positives from Markdown code fences, TypeScript template literals, React lazy imports, local fetch examples, key event handling, and callback names. No prompt injection, command execution, credential access, or data exfiltration intent was found.

1
الملفات التي تم فحصها
633
الأسطر التي تم تحليلها
0
عناصر المراجعة
0
تم تجاهل الإيجابيات الكاذبة

عوامل الخطر

⚡ يحتوي على سكربتات (2)
SKILL.md:315 SKILL.md:316
⚙️ الأوامر الخارجية (33)
SKILL.md:16-24 SKILL.md:24-40 SKILL.md:40-44 SKILL.md:44-90 SKILL.md:90-94 SKILL.md:94-124 SKILL.md:124-130 SKILL.md:130-143 SKILL.md:143-147 SKILL.md:147-198 SKILL.md:198-202 SKILL.md:202-226 SKILL.md:226-232 SKILL.md:232-281 SKILL.md:281-287 SKILL.md:287-307 SKILL.md:307-311 SKILL.md:311-331 SKILL.md:331-335 SKILL.md:335-352 SKILL.md:352-364 SKILL.md:364-365 SKILL.md:365-375 SKILL.md:375-381 SKILL.md:381-452 SKILL.md:452-456 SKILL.md:456-500 SKILL.md:500-506 SKILL.md:506-554 SKILL.md:554-560 SKILL.md:560-597 SKILL.md:597-601 SKILL.md:601-631
🌐 الوصول إلى الشبكة (2)
SKILL.md:106 SKILL.md:192
لم يكتشف أحدث تدقيق ثابت ودلالي مكتمل أي نتائج أمنية مؤكدة. ولا يثبت ذلك أن المهارة خالية من الآثار الجانبية.
دقّقه: codex عرض سجل التدقيق →
شارك واستشهد بهذا التقرير

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

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

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

https://skillstore.io/skills/sickn33-frontend-patterns/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

شارة Markdown

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

شارة HTML

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

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

<iframe src="https://skillstore.io/embed/skills/sickn33-frontend-patterns.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

affaan-m. (2026). frontend-patterns security audit report (audit version 4) [Author version 1.0]. Skillstore. https://skillstore.io/skills/sickn33-frontend-patterns/audits/4

اقتباس BibTeX

@techreport{affaan-m-sickn33-frontend-patterns-2026, author = {affaan-m}, title = {frontend-patterns security audit report (audit version 4)}, institution = {Skillstore}, year = {2026}, number = {4}, url = {https://skillstore.io/skills/sickn33-frontend-patterns/audits/4}, note = {Author version 1.0} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "frontend-patterns security audit report (audit version 4)" version: "1.0" type: report authors: - name: "affaan-m" date-released: "2026-07-06" url: "https://skillstore.io/skills/sickn33-frontend-patterns/audits/4" identifiers: - type: other value: "skillstore:sickn33-frontend-patterns:audit:4" description: "Skillstore immutable audit report identifier"

تقييم Skillstore

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

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

توحيد مكونات React

استخدم أمثلة التركيب والمكونات المركبة لإنشاء واجهات API متوقعة للمكونات عبر المنتج.

تحسين أداء الواجهة

طبق أنماط الحفظ المؤقت والتحميل الكسول والافتراضية لتقليل البطء في العرض داخل الشاشات المعقدة.

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

استخدم أمثلة التنقل بلوحة المفاتيح وإدارة التركيز عند تصميم النوافذ المنبثقة والقوائم المنسدلة وعناصر التحكم التفاعلية.

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

العثور على نمط 
اعرض لي نمطا للواجهة الأمامية من هذه المهارة من أجل [problem]. اشرح متى يجب استخدامه وما المفاضلات التي يجب التحقق منها.
تكييف مكون 
استخدم أنماط التركيب والمكونات المركبة لتصميم [component]. اجعل واجهة API بسيطة واذكر الخصائص المطلوبة.
تحسين الأداء 
راجع عرض React هذا لاكتشاف فرص الحفظ المؤقت والتحميل الكسول والافتراضية. اقترح تغييرات محددة باستخدام أنماط المهارة.
تصميم معمارية واجهة أمامية 
أنشئ خطة واجهة أمامية لـ [feature] باستخدام تركيب المكونات والخطافات المخصصة ومخفضات السياق والنماذج ومعالجة الأخطاء والرسوم المتحركة وأنماط إمكانية الوصول.

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

  • اختر الأنماط التي تطابق تعقيد الميزة واحتياجات صيانة الفريق.
  • اجعل واجهات API للمكونات القابلة لإعادة الاستخدام صغيرة ومكتوبة الأنواع ومتسقة عبر المكونات المتشابهة.
  • اربط تغييرات الأداء بالقياس قبل التنفيذ وبعده.

تجنب

  • لا تضف سياقا أو مخفضات لحالة محلية يملكها مكون واحد فقط.
  • لا تحفظ كل قيمة مؤقتا من دون تكلفة عرض واضحة أو حاجة إلى الاستقرار.
  • لا تنسخ الأمثلة من دون تكييف سلوك إمكانية الوصول مع واجهة المستخدم النهائية.

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

هل تشغل هذه المهارة كود الواجهة الأمامية؟
لا. توفر أمثلة مكتوبة في React وTypeScript ليقوم المساعد بتكييفها.
هل يمكنها المساعدة في مشاريع Next.js؟
نعم. الأنماط مفيدة لواجهات React وNext.js، لكن تفاصيل التوجيه غير مغطاة.
هل تتضمن إرشادات لإدارة الحالة؟
نعم. تتضمن أمثلة على الخطافات المخصصة والسياق والمخفضات لحالة واجهة المستخدم المشتركة.
هل يمكنها تحسين الأداء؟
توفر أنماطا للحفظ المؤقت والتحميل الكسول والافتراضية. يجب أن تقيس سلوك التطبيق الحقيقي مع ذلك.
هل تغطي إمكانية الوصول؟
نعم. تتضمن أمثلة على التنقل بلوحة المفاتيح وإدارة التركيز للمكونات التفاعلية.
هل هي نظام تصميم كامل؟
لا. إنها مرجع أنماط، وليست مكتبة مكونات كاملة أو نظام تصميم بصري.

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

المؤلف

affaan-m

الترخيص

MIT

إصدار المؤلف

v1.0

مراجعة Skillstore

r1

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

الإصدار الذي أعلنه المؤلف ليس SemVer صالحًا.

المستودع

https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/cc-skill-frontend-patterns

مرجع

01171b582d636c013315c5e0d969c64f8d9cdff2

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

١٨‏/٧‏/٢٠٢٦

الاستخدام

11 تنزيلات · 112 مشاهدات

بنية الملفات

📄 SKILL.md

المزيد من affaan-m

مهارات ذات صلة

عرض الكل