تطبيق أنماط التركيب في React
تصبح مكونات React التي تحتوي على العديد من الخصائص المنطقية صعبة الصيانة والمراجعة. تمنح هذه المهارة الوكلاء أنماطًا واضحة للمكونات المركبة، والمتغيرات الصريحة، والحالة القائمة على المزوّد.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "vercel-composition-patterns" from https://skillstore.io/skills/vercel-labs-vercel-composition-patterns.md and its manifest at https://skillstore.io/api/skills/vercel-labs-vercel-composition-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "vercel-composition-patterns". يحتوي مكون composer على الخصائص isThread وisEditing وisForwarding وshowFormatting.
النتيجة المتوقعة:
جارٍ استخدام "vercel-composition-patterns". يحتاج مربع حوار إلى معاينة وزر إرسال خارج مربع composer.
النتيجة المتوقعة:
جارٍ استخدام "vercel-composition-patterns". يقبل مكون استدعاءات renderHeader وrenderFooter وrenderActions.
النتيجة المتوقعة:
The static findings are false positives caused by documentation prose, Markdown code formatting, and React reference URLs. I found no executable code, command execution, data exfiltration, prompt injection, or runtime network behavior in the reviewed files.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/vercel-labs-vercel-composition-patterns/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/vercel-labs-vercel-composition-patterns?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/vercel-labs-vercel-composition-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vercel-labs-vercel-composition-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/vercel-labs-vercel-composition-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>vercel-labs. (2026). vercel-composition-patterns security audit report (audit version 4) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/vercel-labs-vercel-composition-patterns/audits/4@techreport{vercel-labs-vercel-labs-vercel-composition-patterns-2026,
author = {vercel-labs},
title = {vercel-composition-patterns security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/vercel-labs-vercel-composition-patterns/audits/4},
note = {Author version 1.0.0}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "vercel-composition-patterns security audit report (audit version 4)"
version: "1.0.0"
type: report
authors:
- name: "vercel-labs"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/vercel-labs-vercel-composition-patterns/audits/4"
identifiers:
- type: other
value: "skillstore:vercel-labs-vercel-composition-patterns:audit:4"
description: "Skillstore immutable audit report identifier"
حوّل المكونات التي تحتوي على عدة أوضاع منطقية إلى متغيرات صريحة تركّب الأجزاء الداخلية المشتركة.
أنشئ واجهات برمجة للمكونات المركبة تتيح للمستهلكين اختيار الأجزاء التي يحتاجون إليها.
تحقق مما إذا كانت ملكية الحالة وحدود السياق وخيارات التركيب واضحة وقابلة للصيانة.
Use the vercel-composition-patterns skill to review this React component. Identify boolean props that create hidden modes and suggest explicit variants.
Use the vercel-composition-patterns skill to design a compound component API for this UI. Include the provider, frame, input, footer, and action pieces.
Use the vercel-composition-patterns skill to move this component state into a provider. Define the state, actions, and meta interface.
Use the vercel-composition-patterns skill to refactor this React feature. Replace boolean modes, compose children, lift shared state, and explain tradeoffs.
المؤلف
vercel-labsالترخيص
MIT
إصدار المؤلف
v1.0.0
مراجعة Skillstore
r1
مرجع
36e07d5e13068e5be64447e8f20b427cf2cbd21a
حداثة الصيانة
٢٠/٧/٢٠٢٦
الاستخدام
24 تنزيلات · 207 مشاهدات
تنفيذ React View Transitions
من السهل وضع انتقالات عرض React في المكان غير المناسب، مما يؤدي إلى رسوم متحركة صامتة أو مزعجة. ترشد هذه المهارة اختيارات الرسوم المتحركة للمسارات وSuspense والقوائم والعناصر المشتركة.
إنشاء مهارات ذكاء اصطناعي قابلة لإعادة الاستخدام
تحتاج الفرق إلى طرق متسقة لحزم معرفة الوكلاء وسير العمل القابلين لإعادة الاستخدام. ترشد هذه المهارة Claude وCodex وClaude Code خلال تخطيط المهارات وتأليفها والتحقق منها وحزمها.
تحسين أداء React و Next.js
غالبا ما تفقد تطبيقات React و Next.js سرعتها بسبب waterfalls، والحزم الكبيرة، وعمليات إعادة التصيير التي يمكن تجنبها. تمنح هذه المهارة الوكلاء قواعد ملموسة لإجراء تغييرات أكثر أمانا تركز على الأداء.
تحسين تطبيقات React Native
قد تعاني تطبيقات React Native من قوائم بطيئة، وحركات متقطعة، وأخطاء خاصة بالمنصات. تمنح هذه المهارة Codex وClaude وClaude Code قواعد موجزة للعمل عالي الأداء في Expo وReact Native.
تطبيق أفضل ممارسات Next.js
غالبا ما تفشل مشاريع Next.js بسبب الحدود غير الواضحة، وبطء جلب البيانات، وأخطاء النشر. تمنح هذه المهارة Claude وCodex وClaude Code قواعد مركزة للعمل الحديث باستخدام App Router.
بناء Next.js Cache Components بشكل صحيح
قد يكون اعتماد Cache Components بأمان أثناء عمليات ترحيل Next.js صعبا. تمنحك هذه المهارة إرشادات مركزة حول PPR وتوجيهات cache والمدد الزمنية والعلامات والإبطال.
أنشئ تطبيقات Fullstack بإرشاد خبير
بواسطة alirezarezvani
غالبًا ما تحتاج مشاريع Fullstack إلى إعداد متسق، وخيارات معمارية، وفحوصات جودة. توفر هذه المهارة سكربتات ومراجع للعمل على React وNext.js وNode.js وGraphQL وPostgreSQL.
بناء مكونات React آمنة الأنواع
بواسطة softaworks
غالبا ما يتطلب العمل على React TypeScript أنواعا دقيقة للأحداث والـ hooks والمسارات. توفر هذه المهارة أنماطا مركزة للمكونات المكتوبة الأنواع، وواجهات React 19 API، والتوجيه.
إنشاء ميزات واجهة أمامية جاهزة للإنتاج
بواسطة davila7
تحتاج فرق الواجهة الأمامية إلى إرشادات متسقة حول React وNext.js عبر المشاريع. توفر هذه المهارة سير عمل مرجعيًا وممارسات للجودة وبرامج نصية مساعدة لتحليل الواجهة الأمامية.
تحسين أداء Next.js
بواسطة Atman36
قد تصبح تطبيقات Next.js بطيئة بسبب الحِزم الكبيرة، والتخزين المؤقت الضعيف، والوسائط غير المحسّنة. ترشد هذه المهارة Claude وCodex وClaude Code عبر تحسينات أداء مركّزة لتطبيقات الإنتاج.
بناء تطبيقات React و Next.js حديثة
بواسطة sickn33
غالبا ما تحتاج مشاريع React و Next.js إلى اختيارات إعداد متسقة عبر التوجيه، والمكونات، والتنسيق، والبيانات، والنماذج، والاختبارات، والنشر. تمنح هذه المهارة Claude و Codex و Claude Code سير عمل قائمًا على مراحل لتخطيط وبناء تطبيقات واجهة أمامية حديثة.
بناء واجهات دردشة ذكاء اصطناعي بالبث المباشر
بواسطة Asmayaseen
تبدو دردشة الذكاء الاصطناعي في الوقت الفعلي معطلة عندما لا يستطيع المستخدمون رؤية التقدم أو حالة الاستجابة أو تغييرات واجهة المستخدم. تمنح هذه المهارة Claude وCodex وClaude Code أنماطا لدورات حياة البث، وأحداث التقدم، وتأثيرات العميل، وأدوات العميل.