📦
prompt-repetition
82تحسين دقة النماذج خفيفة الوزن
قد تفوّت النماذج خفيفة الوزن السياق عندما تأتي الأسئلة بعد معلومات مهمة. تكرر هذه المهارة المطالبات المناسبة مع ضوابط حماية لتحسين الدقة في مهام مختارة.
الإنتاجية عرض
المهارات ui-component-patterns
📦
ui-component-patterns
مراجعة المحتوى r1 آمن ⚙️ الأوامر الخارجية🌐 الوصول إلى الشبكة📁 الوصول إلى نظام الملفات
بناء مكونات واجهة مستخدم قابلة لإعادة الاستخدام
تحتاج الفرق إلى مكونات واجهة مستخدم متسقة تظل سهلة إعادة الاستخدام والصيانة. تمنح هذه المهارة Claude وCodex وClaude Code أنماط React عملية لتصميم مكونات قابلة للتوسع.
يدعم: Claude Codex Code(CC)
التثبيت باستخدام Agent لدي
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
طلب الوكيل
Review the Skillstore skill "ui-component-patterns" from https://skillstore.io/skills/supercent-io-ui-component-patterns.md and its manifest at https://skillstore.io/api/skills/supercent-io-ui-component-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
موارد مهيّأة لـ Agents
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
اختبرها
جارٍ استخدام "ui-component-patterns". أنشئ مكون Button قابل لإعادة الاستخدام لثلاثة variants وحالة loading.
النتيجة المتوقعة:
API لـ props يتضمن variant وsize وdisabled وloading ومعالج الأحداث ونوع الزر الافتراضي وإرشادات إمكانية الوصول.
جارٍ استخدام "ui-component-patterns". أعد هيكلة بطاقة منتج تحتوي على header وimage وcontent وactions.
النتيجة المتوقعة:
بنية Card مركبة تحتوي على أجزاء منفصلة لـ header وbody وfooter مع إرشادات استخدام لشاشات المنتجات.
جارٍ استخدام "ui-component-patterns". حسّن dropdown يعرض تخطيطات عناصر مختلفة.
النتيجة المتوقعة:
تصميم render prop يقبل عناصر typed وعرضا مخصصا واستدعاءات اختيار وسلوكا قابلا للتوقع لحالة الفتح.
التدقيق الأمني
آمنv4 • ٧/٧/٢٠٢٦ فتح التقرير المرتبط بالإصدار
All 37 static findings were adjudicated as false positives. External command hits are Markdown fences or TypeScript template literals, and URL or relative path hits are documentation links. No executable network, shell, file access, prompt injection, or data exfiltration intent was found.
2
الملفات التي تم فحصها
545
الأسطر التي تم تحليلها
0
عناصر المراجعة
0
تم تجاهل الإيجابيات الكاذبة
عوامل الخطر
⚙️ الأوامر الخارجية (30)
SKILL.md:33-64 SKILL.md:64-65 SKILL.md:65-66 SKILL.md:66-85 SKILL.md:85-92 SKILL.md:92-100 SKILL.md:100-144 SKILL.md:144-151 SKILL.md:151-212 SKILL.md:212-219 SKILL.md:219-268 SKILL.md:268-275 SKILL.md:275-287 SKILL.md:287-290 SKILL.md:290-324 SKILL.md:324-330 SKILL.md:330-348 SKILL.md:348-352 SKILL.md:352-365 SKILL.md:365-367 SKILL.md:367-372 SKILL.md:372-382 SKILL.md:382-406 SKILL.md:406-414 SKILL.md:414-420 SKILL.md:420-476 SKILL.md:476-480 SKILL.md:480-500 SKILL.md:500-529 SKILL.md:529
🌐 الوصول إلى الشبكة (5)
📁 الوصول إلى نظام الملفات (2)
لم يكتشف أحدث تدقيق ثابت ودلالي مكتمل أي نتائج أمنية مؤكدة. ولا يثبت ذلك أن المهارة خالية من الآثار الجانبية.
دقّقه: codex عرض سجل التدقيق →
شارك واستشهد بهذا التقرير
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
نسخ رابط التقرير
https://skillstore.io/skills/supercent-io-ui-component-patterns/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportشارة Markdown
[](https://skillstore.io/skills/supercent-io-ui-component-patterns?utm_source=security_passport_badge)شارة HTML
<a href="https://skillstore.io/skills/supercent-io-ui-component-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/supercent-io-ui-component-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>بطاقة قابلة للتضمين
<iframe src="https://skillstore.io/embed/skills/supercent-io-ui-component-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
supercent-io. (2026). ui-component-patterns security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/supercent-io-ui-component-patterns/audits/4اقتباس BibTeX
@techreport{supercent-io-supercent-io-ui-component-patterns-2026,
author = {supercent-io},
title = {ui-component-patterns security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/supercent-io-ui-component-patterns/audits/4},
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: "ui-component-patterns security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "supercent-io"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/supercent-io-ui-component-patterns/audits/4"
identifiers:
- type: other
value: "skillstore:supercent-io-ui-component-patterns:audit:4"
description: "Skillstore immutable audit report identifier"
تقييم Skillstore
سبب هذا التقييم موثوقية الأدلة: مرتفع 55
الهندسة المعمارية
85
قابلية الصيانة
87
المحتوى
69
المجتمع
78
الامتثال للمواصفات
ما الذي يمكنك بناؤه
إنشاء مكتبة مكونات مشتركة
تعريف أنماط Button وCard وModal وDropdown قابلة لإعادة الاستخدام مع props متسقة وتنظيم ملفات واضح.
توحيد تنفيذ نظام التصميم
تحويل design tokens وقواعد التفاعل إلى مكونات React قابلة للتوقع مع أنماط composition موثقة.
إعادة هيكلة كود واجهة المستخدم المتكرر
استخراج الشاشات المكررة إلى مكونات وhooks وأنماط compound قابلة لإعادة الاستخدام دون إخفاء السلوك المهم.
جرّب هذه الموجّهات
تصميم API لمكون أساسي
صمم API لمكون React Button قابل لإعادة الاستخدام لتطبيقي. ضمّن TypeScript props والقيم الافتراضية والvariants وملاحظات إمكانية الوصول.
إعادة هيكلة واجهة مستخدم حالية إلى مكونات
راجع نمط واجهة المستخدم المتكرر هذا واقترح مكونات React قابلة لإعادة الاستخدام. اشرح props وحدود composition وهيكل الملفات.
تخطيط عائلة مكونات
خطط لعائلة مكونات React للبطاقات والعناوين والمتون والتذييلات. استخدم compound components وعقود TypeScript واضحة.
تدقيق بنية المكونات
دقق بنية المكونات هذه من حيث تعقيد props وcomposition وإمكانية الوصول والأداء وقابلية الصيانة. أوصِ بتغييرات مرتبة حسب الأولوية.
أفضل الممارسات
- ابدأ بأصغر API مستقر لـ props قبل إضافة variants أو escape hatches.
- استخدم composition لمرونة التخطيط وcustom hooks للسلوك المشترك.
- وثق الاستخدام المتوقع من خلال tests وstories وحالات إمكانية الوصول.
تجنب
- لا تضف الكثير من props غير المرتبطة لجعل مكون واحد يحل كل الحالات.
- لا تضع API calls أو قواعد عمل معقدة داخل مكونات عرضية.
- لا تحسن الأداء باستخدام memoization قبل قياس مشكلات التصيير الحقيقية.
الأسئلة المتكررة
ما أطر العمل التي تركز عليها هذه المهارة؟
تركز على أنماط تصميم مكونات React وTypeScript.
هل يمكنها المساعدة في بناء نظام تصميم؟
نعم. تدعم APIs المكونات وcomposition وهيكل الملفات وأنماط التنفيذ القابلة لإعادة الاستخدام.
هل تنشئ مكونات جاهزة للإنتاج؟
تقدم أنماطا وأمثلة قوية. ما زلت تحتاج إلى تنسيقات خاصة بالمشروع واختبارات وفحوصات إمكانية الوصول.
هل يمكنها مراجعة المكونات الحالية؟
نعم. قدم كود المكون واطلب مراجعة للبنية أو props أو إمكانية الوصول أو الأداء.
هل تغطي إمكانية الوصول؟
تتضمن تذكيرات بإمكانية الوصول للأدوار وaria attributes وسلوك لوحة المفاتيح وحالة المكون.
هل هذا مفيد لـ Claude Code وCodex؟
نعم. تعمل المطالبات والإرشادات مع سير عمل Claude وClaude Code وCodex.
تفاصيل المطور
المؤلف
supercent-ioالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
المستودع
https://github.com/supercent-io/skills-template/tree/main/.agent-skills/ui-component-patterns/مرجع
36e07d5e13068e5be64447e8f20b427cf2cbd21a
حداثة الصيانة
١٨/٧/٢٠٢٦
الاستخدام
16 تنزيلات · 157 مشاهدات
بنية الملفات
📄 SKILL.md
المزيد من supercent-io
عرض الكل📦
api-design
80تصميم REST وGraphQL APIs بشكل أفضل
تحتاج فرق API إلى عقود متسقة قبل بدء التنفيذ. ترشد هذه المهارة تصميم الموارد، وتنسيقات الطلبات، والأخطاء، وإدارة الإصدارات، والتوثيق.
البرمجة والتطوير عرض
📦
code-refactoring
79إعادة هيكلة الكود بأمان
الكود المعقد يبطئ إجراء التغييرات ويزيد خطر الانحدارات. ترشد هذه المهارة إلى عمليات إعادة هيكلة تحافظ على السلوك باستخدام الاختبارات وأنماط الاستخراج وخطوات التحقق.
البرمجة والتطوير عرض
📦
user-guide-writing
79اكتب أدلة مستخدم واضحة
تحتاج الفرق إلى وثائق مستخدم تشرح المهام دون إرباك القراء. تنظّم هذه المهارة الأدلة، والبرامج التعليمية، ووثائق التهيئة، والأسئلة الشائعة بلغة بسيطة.
التوثيق عرض
📦
debugging
79تصحيح مشكلات التعليمات البرمجية بشكل منهجي
تهدر الأخطاء وقت المهندسين عندما تخفي الأعراض السبب الحقيقي. ترشد هذه المهارة إلى إعادة إنتاج المشكلة بشكل منظم، وعزلها، وتحليل السبب الجذري، وإصلاحها، ومنع تكرارها.
البرمجة والتطوير عرض
📦
task-planning
79تخطيط مهام Agile وقوائم Sprint Backlog
غالبا ما تحول الفرق أفكار الميزات العامة إلى عناصر عمل غير واضحة. تنظم هذه المهارة الميزات في قصص مستخدمين، ومعايير قبول، ومهام، وأولويات، وخطط sprint.
الإنتاجية عرض
مهارات ذات صلة
عرض الكل📦
senior-frontend
81إنشاء ميزات واجهة أمامية جاهزة للإنتاج
بواسطة davila7
تحتاج فرق الواجهة الأمامية إلى إرشادات متسقة حول React وNext.js عبر المشاريع. توفر هذه المهارة سير عمل مرجعيًا وممارسات للجودة وبرامج نصية مساعدة لتحليل الواجهة الأمامية.
البرمجة والتطوير عرض
📦
vercel-react-view-transitions
82تنفيذ React View Transitions
بواسطة vercel-labs
من السهل وضع انتقالات عرض React في المكان غير المناسب، مما يؤدي إلى رسوم متحركة صامتة أو مزعجة. ترشد هذه المهارة اختيارات الرسوم المتحركة للمسارات وSuspense والقوائم والعناصر المشتركة.
البرمجة والتطوير عرض
📦
react-dev
82بناء مكونات React آمنة الأنواع
بواسطة softaworks
غالبا ما يتطلب العمل على React TypeScript أنواعا دقيقة للأحداث والـ hooks والمسارات. توفر هذه المهارة أنماطا مركزة للمكونات المكتوبة الأنواع، وواجهات React 19 API، والتوجيه.
البرمجة والتطوير عرض
📦
vue-options-api-best-practices
81تحسين مكونات Vue Options API
بواسطة vuejs-ai
يمكن لمشاريع Vue Options API أن تفقد أمان الأنواع والربط الصحيح لـ this. توفر هذه المهارة أنماطًا مباشرة لمكونات Vue أكثر أمانًا.
البرمجة والتطوير عرض
📦
vercel-react-best-practices
80تحسين أداء React و Next.js
بواسطة vercel-labs
غالبا ما تفقد تطبيقات React و Next.js سرعتها بسبب waterfalls، والحزم الكبيرة، وعمليات إعادة التصيير التي يمكن تجنبها. تمنح هذه المهارة الوكلاء قواعد ملموسة لإجراء تغييرات أكثر أمانا تركز على الأداء.
البرمجة والتطوير عرض
📦
react-nextjs-development
80بناء تطبيقات React و Next.js حديثة
بواسطة sickn33
غالبا ما تحتاج مشاريع React و Next.js إلى اختيارات إعداد متسقة عبر التوجيه، والمكونات، والتنسيق، والبيانات، والنماذج، والاختبارات، والنشر. تمنح هذه المهارة Claude و Codex و Claude Code سير عمل قائمًا على مراحل لتخطيط وبناء تطبيقات واجهة أمامية حديثة.
البرمجة والتطوير عرض