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

cc-skill-frontend-patterns

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

تطبيق أنماط الواجهة الأمامية

تحتاج فرق الواجهة الأمامية إلى أنماط قابلة للتكرار لواجهات React تبقى قابلة للصيانة. توفر هذه المهارة أمثلة عملية للمكونات وHooks والحالة والأداء والنماذج والحركة وإمكانية الوصول.

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

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

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

طلب الوكيل
Review the Skillstore skill "cc-skill-frontend-patterns" from https://skillstore.io/skills/sickn33-cc-skill-frontend-patterns.md and its manifest at https://skillstore.io/api/skills/sickn33-cc-skill-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-cc-skill-frontend-patterns.md manifest موقَّع GET /api/skills/sickn33-cc-skill-frontend-patterns/manifest lockfile موقَّع GET /api/skills/sickn33-cc-skill-frontend-patterns/lockfile

اختبرها

جارٍ استخدام "cc-skill-frontend-patterns". راجع لوحة معلومات تعرض قائمة سوق كبيرة وعدة لوحات مخططات ثقيلة.

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

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

جارٍ استخدام "cc-skill-frontend-patterns". خطط لنموذج داخل نافذة منبثقة يجب أن يتحقق من الحقول ويدعم مستخدمي لوحة المفاتيح.

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

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

جارٍ استخدام "cc-skill-frontend-patterns". اشرح كيفية تنظيم التبويبات ومحتوى التبويبات المتداخل في React.

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

استخدم نمط المكونات المركبة مع context مشتركة للتبويب النشط ومكونات فرعية لأدوار القائمة والمشغل واللوحة.

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

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

All static findings were false positives caused by Markdown code fences, TypeScript template literals, local lazy imports, or ordinary React event patterns. No prompt injection, credential handling, hidden command execution, or data exfiltration intent was found in SKILL.md.

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

عوامل الخطر

⚡ يحتوي على سكربتات (2)
SKILL.md:317 SKILL.md:318
⚙️ الأوامر الخارجية (33)
SKILL.md:18-26 SKILL.md:26-42 SKILL.md:42-46 SKILL.md:46-92 SKILL.md:92-96 SKILL.md:96-126 SKILL.md:126-132 SKILL.md:132-145 SKILL.md:145-149 SKILL.md:149-200 SKILL.md:200-204 SKILL.md:204-228 SKILL.md:228-234 SKILL.md:234-283 SKILL.md:283-289 SKILL.md:289-309 SKILL.md:309-313 SKILL.md:313-333 SKILL.md:333-337 SKILL.md:337-354 SKILL.md:354-366 SKILL.md:366-367 SKILL.md:367-377 SKILL.md:377-383 SKILL.md:383-454 SKILL.md:454-458 SKILL.md:458-502 SKILL.md:502-508 SKILL.md:508-556 SKILL.md:556-562 SKILL.md:562-599 SKILL.md:599-603 SKILL.md:603-633
🌐 الوصول إلى الشبكة (2)
SKILL.md:108 SKILL.md:194
لم يكتشف أحدث تدقيق ثابت ودلالي مكتمل أي نتائج أمنية مؤكدة. ولا يثبت ذلك أن المهارة خالية من الآثار الجانبية.
دقّقه: codex عرض سجل التدقيق →
شارك واستشهد بهذا التقرير

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

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

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

https://skillstore.io/skills/sickn33-cc-skill-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-cc-skill-frontend-patterns/security.svg)](https://skillstore.io/skills/sickn33-cc-skill-frontend-patterns?utm_source=security_passport_badge)

شارة HTML

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

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

<iframe src="https://skillstore.io/embed/skills/sickn33-cc-skill-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). cc-skill-frontend-patterns security audit report (audit version 4) [Author version 1.0]. Skillstore. https://skillstore.io/skills/sickn33-cc-skill-frontend-patterns/audits/4

اقتباس BibTeX

@techreport{affaan-m-sickn33-cc-skill-frontend-patterns-2026, author = {affaan-m}, title = {cc-skill-frontend-patterns security audit report (audit version 4)}, institution = {Skillstore}, year = {2026}, number = {4}, url = {https://skillstore.io/skills/sickn33-cc-skill-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: "cc-skill-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-cc-skill-frontend-patterns/audits/4" identifiers: - type: other value: "skillstore:sickn33-cc-skill-frontend-patterns:audit:4" description: "Skillstore immutable audit report identifier"

تقييم Skillstore

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

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

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

استخدم الأنماط لمواءمة بنية المكونات وprops والتركيب وتدفق الحالة عبر قاعدة كود الواجهة الأمامية.

تخطيط إعادة هيكلة UI

قارن اختيارات التنفيذ الحالية بالأنماط الشائعة قبل إعادة هيكلة النماذج أو القوائم أو النوافذ المنبثقة أو لوحات المعلومات.

تعليم ممارسات الواجهة الأمامية

استخدم الأمثلة لشرح Hooks والأداء وإمكانية الوصول ومعالجة الأخطاء للمطورين الذين يتعلمون أنماط React.

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

اختيار نمط 
استخدم هذه المهارة للتوصية بنمط React لمكون بطاقة أو تبويب أو نافذة منبثقة قابل لإعادة الاستخدام. اشرح لماذا يناسب ذلك.
تحسين مكون 
استخدم هذه المهارة لمراجعة بنية مكون React لدي. اقترح تغييرات للتركيب وحدود الحالة وإمكانية الوصول.
تصميم تدفق بيانات 
استخدم هذه المهارة لتخطيط جلب بيانات الواجهة الأمامية وحالات التحميل وحدود الأخطاء والحالة القائمة على reducer للوحة معلومات.
تدقيق أنماط الأداء 
استخدم هذه المهارة لتحديد فرص memoization والتحميل الكسول وvirtualization في شاشة React أو Next.js كبيرة.

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

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

تجنب

  • لا تضف context أو reducers أو memoization عندما تكون الحالة المحلية البسيطة كافية.
  • لا تنسخ الأمثلة من دون معالجة التحميل والأخطاء وإمكانية الوصول والحالات الحدية.
  • لا تستخدم الحركة أو التحميل الكسول بطرق تخفي ملاحظات الواجهة المهمة.

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

هل تولد هذه المهارة تطبيقات كاملة؟
لا. توفر إرشادات وأمثلة لأنماط الواجهة الأمامية لتكييفها مع تطبيقك.
هل يمكنني استخدامها مع Next.js؟
نعم. الأنماط مفيدة لواجهات React وNext.js، مع تعديلات خاصة بالمشروع.
هل تتضمن أمثلة TypeScript؟
نعم. تستخدم المهارة أمثلة React بأسلوب TypeScript لـ props وHooks وreducers والنماذج.
هل تحل محل نظام التصميم؟
لا. تساعد في هيكلة المكونات، لكن القواعد المرئية يجب أن تأتي من نظام التصميم لديك.
هل ستحسن الأداء تلقائيًا؟
لا. تشرح أنماطًا مثل memoization والتحميل الكسول وvirtualization للتطبيق اليدوي.
هل هذه المهارة آمنة للاستخدام؟
الملف الذي تمت مراجعته هو Markdown إرشادي فقط. كانت تنبيهات الأمان الثابتة نتائج إيجابية كاذبة من كود الأمثلة.

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

المؤلف

affaan-m

الترخيص

MIT

إصدار المؤلف

v1.0

مراجعة Skillstore

r1

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

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

المستودع

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

مرجع

01171b582d636c013315c5e0d969c64f8d9cdff2

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

٢١‏/٧‏/٢٠٢٦

الاستخدام

6 تنزيلات · 85 مشاهدات

بنية الملفات

📄 SKILL.md

المزيد من affaan-m

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

عرض الكل