بناء مكونات واجهة أمامية قابلة لإعادة الاستخدام
تحتاج فرق الواجهة الأمامية إلى بنية مكونات متسقة عبر أطر العمل. ترشد هذه المهارة Claude وCodex وClaude Code إلى تصميم مكونات واجهة مستخدم مركزة وقابلة لإعادة الاستخدام.
هذه المهارة جزء من حزمة
ثبّت الحزمة كاملة للحصول على كل المهارات التي تحتاجها المهمة بأمر واحد.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "frontend-components" from https://skillstore.io/skills/eis-its-frontend-components.md and its manifest at https://skillstore.io/api/skills/eis-its-frontend-components/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "frontend-components". صمم مكون modal قابلا لإعادة الاستخدام لتطبيق React.
النتيجة المتوقعة:
خطة مكون تتضمن props لحالة الفتح والعنوان والمحتوى والإجراءات وسلوك الإغلاق والتعامل مع التركيز وفتحات التركيب.
جارٍ استخدام "frontend-components". أعد هيكلة مكون card كبير في Vue يمزج بين العرض وتحميل البيانات والإجراءات.
النتيجة المتوقعة:
اقتراح إعادة هيكلة يفصل العرض وملكية البيانات وعناصر التحكم في الإجراءات إلى مكونات مركزة ذات واجهات واضحة.
جارٍ استخدام "frontend-components". راجع مكون form في Svelte قبل إضافته إلى نظام تصميم.
النتيجة المتوقعة:
مراجعة تغطي أسماء props وعقود الأحداث وملكية التحقق وتوقعات إمكانية الوصول وفجوات التوثيق.
The single static finding is a Markdown link to repository documentation outside the skill directory. I found no evidence of executable filesystem access, prompt injection, data exfiltration, or malicious instructions in SKILL.md.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/eis-its-frontend-components/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/eis-its-frontend-components?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/eis-its-frontend-components?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/eis-its-frontend-components/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/eis-its-frontend-components.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>EIS-ITS. (2026). frontend-components security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/eis-its-frontend-components/audits/9@techreport{eis-its-eis-its-frontend-components-2026,
author = {EIS-ITS},
title = {frontend-components security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/eis-its-frontend-components/audits/9},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-components security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
- name: "EIS-ITS"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/eis-its-frontend-components/audits/9"
identifiers:
- type: other
value: "skillstore:eis-its-frontend-components:audit:9"
description: "Skillstore immutable audit report identifier"
تبقى مهارة كل مؤلف عنصراً مستقلاً قابلاً للتثبيت. يُرتب المتغير الموصى به وفق أدلة Skillstore.
سبب تصدر هذا المتغير
eis-its-frontend-components
2026-09-09
devanb-frontend-components
2026-09-09
إرشاد مهندس عبر props وحدود الحالة والتركيب والتوثيق لعنصر واجهة مستخدم قابل لإعادة الاستخدام.
المساعدة في تقسيم مكون معقد إلى وحدات أصغر ذات واجهات أوضح وحالة محلية أقل.
التحقق مما إذا كانت واجهات API الجديدة للمكونات تتبع معايير المشروع لإعادة الاستخدام والتسمية والتغليف.
أنشئ مكونا قابلا لإعادة الاستخدام لهذا المتطلب الخاص بواجهة المستخدم. عرّف props واضحة، وأبق الحالة في حدها الأدنى، واشرح حدود المكون.
أعد هيكلة هذا المكون إلى مكونات أصغر ومركزة. حافظ على السلوك، ووضح ملكية props، وحدد أي حالة ينبغي نقلها.
صمم واجهة API العامة لهذا المكون. ضمّن props والأحداث أو callbacks ونقاط التركيب وتوقعات إمكانية الوصول وملاحظات الاستخدام.
راجع هذه المكونات من حيث إعادة الاستخدام والتغليف وإدارة الحالة ومخاطر الأداء وفجوات التوثيق. أعط الأولوية للإصلاحات الملموسة.
المؤلف
EIS-ITSالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
72d5025b022c77f7a51bdf5c1637c689c80e89d1
حداثة الصيانة
١٨/٧/٢٠٢٦
الاستخدام
37 تنزيلات · 207 مشاهدات
بنية الملفات
📄 SKILL.md
تحسين إمكانية الوصول في الواجهات الأمامية
غالبا ما تفوّت فرق الواجهات الأمامية متطلبات لوحة المفاتيح والدلالات وقارئات الشاشة أثناء العمل الروتيني على واجهات المستخدم. ترشد هذه المهارة Claude وCodex وClaude Code إلى تطبيق فحوصات إمكانية الوصول أثناء إنشاء الواجهات أو تعديلها.
تطبيق أسلوب ترميز متسق
تؤدي الشيفرة غير المتسقة إلى إبطاء المراجعات وتجعل الصيانة أصعب. تمنح هذه المهارة Claude وCodex وClaude Code قواعد واضحة لكتابة شيفرة قابلة للقراءة ومتسقة.
اكتب اختبارات سلوك مركزة
غالبا ما تضيف الفرق اختبارات هشة تعكس تفاصيل التنفيذ بدلا من سلوك المستخدم. ترشد هذه المهارة Claude وCodex وClaude Code إلى كتابة اختبارات مركزة لسير العمل الحرج.
بناء CSS متسق للواجهات الأمامية
غالبا ما تنحرف تنسيقات الواجهة الأمامية عبر الملفات والمكونات وأطر العمل. توجه هذه المهارة Claude وCodex وClaude Code نحو أساليب CSS ورموز تصميم متسقة.
التحقق من المدخلات عبر نقاط الدخول
غالبا ما يصبح التحقق من المدخلات غير متسق عبر النماذج وواجهات API وقواعد الأعمال. توجه هذه المهارة Claude وCodex وClaude Code نحو أنماط تحقق آمنة.
تحسين معالجة أخطاء التطبيق
يمكن أن تخفي معالجة الأخطاء غير المتسقة الإخفاقات وتربك المستخدمين. توجه هذه المهارة Claude وCodex وClaude Code نحو استثناءات واضحة، والتحقق من الصحة، والتنظيف، ومسارات الاسترداد.
تنفيذ React View Transitions
بواسطة vercel-labs
من السهل وضع انتقالات عرض React في المكان غير المناسب، مما يؤدي إلى رسوم متحركة صامتة أو مزعجة. ترشد هذه المهارة اختيارات الرسوم المتحركة للمسارات وSuspense والقوائم والعناصر المشتركة.
تحسين مكونات Vue Options API
بواسطة vuejs-ai
يمكن لمشاريع Vue Options API أن تفقد أمان الأنواع والربط الصحيح لـ this. توفر هذه المهارة أنماطًا مباشرة لمكونات Vue أكثر أمانًا.
إنشاء ميزات واجهة أمامية جاهزة للإنتاج
بواسطة davila7
تحتاج فرق الواجهة الأمامية إلى إرشادات متسقة حول React وNext.js عبر المشاريع. توفر هذه المهارة سير عمل مرجعيًا وممارسات للجودة وبرامج نصية مساعدة لتحليل الواجهة الأمامية.
تحسين أداء React و Next.js
بواسطة vercel-labs
غالبا ما تفقد تطبيقات React و Next.js سرعتها بسبب waterfalls، والحزم الكبيرة، وعمليات إعادة التصيير التي يمكن تجنبها. تمنح هذه المهارة الوكلاء قواعد ملموسة لإجراء تغييرات أكثر أمانا تركز على الأداء.
تحسين حراس التنقل في Vue Router
بواسطة vuejs-ai
يمكن أن تؤدي مشكلات Vue Router إلى بيانات قديمة، وإعادات توجيه معطلة، وفحوصات مسارات ضعيفة. توفر هذه المهارة أنماطًا مركزة للحراس، والمعاملات، والتنظيف، والتوجيه في بيئات الإنتاج.
تحسين جودة كود Vue 3
بواسطة vuejs-ai
غالبا ما تتراكم في مشاريع Vue أخطاء تتعلق بالتفاعلية والمكونات والأداء مع مرور الوقت. توفر هذه المهارة إرشادات موجهة لـ Vue 3 لاستخدام أنماط أكثر أمانا وكود أوضح.