agent-ui
78بناء واجهات وكلاء React
تحتاج الفرق إلى واجهات دردشة للوكلاء دون إعادة بناء البث، والموافقات، وعروض الأدوات. ترشد هذه المهارة إلى إعداد مكوّن inference.sh Agent في React وNext.js.
إضافة واجهة مستخدم لدورة حياة الأدوات إلى تطبيقات الوكلاء
تحتاج تطبيقات الوكلاء إلى عروض واضحة لحالة الأدوات والموافقة والنتائج. توفر هذه المهارة إرشادات لمكوّنات React وNext.js لهذه workflows.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "tools-ui" from https://skillstore.io/skills/inference-sh-9-tools-ui.md and its manifest at https://skillstore.io/api/skills/inference-sh-9-tools-ui/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "tools-ui". يطلب مستخدم إظهار أداة بحث ويب أثناء تشغيلها.
النتيجة المتوقعة:
تظهر بطاقة أداة مدمجة تحتوي على أيقونة بحث، واسم الأداة، والمعاملات المرئية، ومؤشر حالة التشغيل.
جارٍ استخدام "tools-ui". يطلب مستخدم إضافة موافقة قبل إرسال استدعاء أداة بريد إلكتروني.
النتيجة المتوقعة:
تعرض الواجهة اسم أداة البريد الإلكتروني، وتفاصيل المستلم والموضوع، بالإضافة إلى إجراءات الموافقة والرفض.
جارٍ استخدام "tools-ui". يطلب مستخدم عرض نتائج الأدوات الناجحة في سجل محادثة الوكيل.
النتيجة المتوقعة:
تعرض منطقة النتائج اسم الأداة المكتملة، وحالة النجاح، وملخصا قابلا للقراءة للبيانات المعادة.
Most static findings are markdown fences, inline code formatting, or documentation links, not executable code. The real issues are unpinned npx install instructions, a remote shadcn registry URL, and a remotely hosted image asset.
هذه قدرات محلية حقيقية قد يُتوقع وجودها لهذه المهارة، لذا فهي تتطلب مراجعة ولكن لا تُحتسب كسلوك خبيث مؤكد.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/inference-sh-9-tools-ui/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/inference-sh-9-tools-ui?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/inference-sh-9-tools-ui?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/inference-sh-9-tools-ui/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/inference-sh-9-tools-ui.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>inference-sh-9. (2026). tools-ui security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/inference-sh-9-tools-ui/audits/6@techreport{inference-sh-9-inference-sh-9-tools-ui-2026,
author = {inference-sh-9},
title = {tools-ui security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/inference-sh-9-tools-ui/audits/6},
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: "tools-ui security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "inference-sh-9"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/inference-sh-9-tools-ui/audits/6"
identifiers:
- type: other
value: "skillstore:inference-sh-9-tools-ui:audit:6"
description: "Skillstore immutable audit report identifier"
تبقى مهارة كل مؤلف عنصراً مستقلاً قابلاً للتثبيت. يُرتب المتغير الموصى به وفق أدلة Skillstore.
سبب تصدر هذا المتغير
inference-sh-9-tools-ui
2026-09-09
inferen-sh-tools-ui
2026-09-09
اعرض حالات الانتظار والتشغيل والنجاح والخطأ لاستدعاءات أدوات الوكيل في واجهة React.
أضف عناصر تحكم للموافقة والرفض قبل تنفيذ الأدوات الحساسة في تطبيق وكيل.
اعرض مخرجات الأدوات المهيكلة في واجهة متسقة للمشغلين والمستخدمين النهائيين.
أضف مكوّنات واجهة مستخدم الأدوات إلى مشروعي في React أو Next.js. اشرح أي خطوات تثبيت قبل تغيير الملفات.
استخدم مكوّنات واجهة مستخدم الأدوات لإظهار حالات الانتظار والتشغيل والنجاح والخطأ لاستدعاءات أدوات الوكيل لدي.
أنشئ عرض موافقة للأداة يعرض معاملات الأداة ويستدعي معالجات approve أو deny الخاصة بي.
اربط مكوّن Agent بقائمة الأدوات لدي وأظهر بوابات الموافقة فقط للأدوات المعلّمة كحساسة.
المؤلف
inference-sh-9الترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
0519034dad657fb1f7706e0550e962beeda73fdf
حداثة الصيانة
١٨/٧/٢٠٢٦
الاستخدام
3 تنزيلات · 146 مشاهدات
بنية الملفات
📄 SKILL.md
بناء واجهات وكلاء React
تحتاج الفرق إلى واجهات دردشة للوكلاء دون إعادة بناء البث، والموافقات، وعروض الأدوات. ترشد هذه المهارة إلى إعداد مكوّن inference.sh Agent في React وNext.js.
عرض عناصر واجهة JSON في React
غالبا ما تحتاج مخرجات الوكيل إلى واجهة مستخدم تفاعلية بدلا من نص عادي. توضح هذه المهارة كيفية عرض تعريفات عناصر الواجهة المنظمة كمكونات React وNext.js.
بناء واجهات دردشة باستخدام React
تحتاج الفرق إلى واجهات دردشة تتوافق مع تطبيقات React الحديثة. توفر هذه المهارة مكونات وأنماطًا بأسلوب shadcn للرسائل، وحقول الإدخال، والصور الرمزية، وحالات البث.
تحسين مطالبات الذكاء الاصطناعي للنصوص والصور والفيديو
غالبا ما تفشل نتائج الذكاء الاصطناعي عندما تكون المطالبات غامضة أو سيئة التنظيم. توفر هذه المهارة أنماطا قابلة لإعادة الاستخدام لمطالبات LLM والصور والفيديو.
حلّل المنافسين باستخدام تفكيكات منظمة
غالبًا ما يصبح البحث التنافسي مبعثرًا بين الملاحظات ولقطات الشاشة وصفحات التسعير ومواقع المراجعات. توفر هذه المهارة أطر تفكيك قابلة للتكرار، وقوالب مقارنة، وسير عمل بحثية لاتخاذ قرارات استراتيجية واضحة.
تشغيل كود Python في بيئة Sandbox مُدارة
غالبًا ما تحتاج مهام Python إلى مكتبات وتنفيذ معزول. تشغّل هذه المهارة Python عبر inference.sh مع أدوات للبيانات والوسائط والكشط والأتمتة.
أنشئ تطبيقات Fullstack بإرشاد خبير
بواسطة alirezarezvani
غالبًا ما تحتاج مشاريع Fullstack إلى إعداد متسق، وخيارات معمارية، وفحوصات جودة. توفر هذه المهارة سكربتات ومراجع للعمل على React وNext.js وNode.js وGraphQL وPostgreSQL.
تنفيذ React View Transitions
بواسطة vercel-labs
من السهل وضع انتقالات عرض React في المكان غير المناسب، مما يؤدي إلى رسوم متحركة صامتة أو مزعجة. ترشد هذه المهارة اختيارات الرسوم المتحركة للمسارات وSuspense والقوائم والعناصر المشتركة.
إنشاء ميزات واجهة أمامية جاهزة للإنتاج
بواسطة davila7
تحتاج فرق الواجهة الأمامية إلى إرشادات متسقة حول React وNext.js عبر المشاريع. توفر هذه المهارة سير عمل مرجعيًا وممارسات للجودة وبرامج نصية مساعدة لتحليل الواجهة الأمامية.
تحسين أداء Next.js
بواسطة Atman36
قد تصبح تطبيقات Next.js بطيئة بسبب الحِزم الكبيرة، والتخزين المؤقت الضعيف، والوسائط غير المحسّنة. ترشد هذه المهارة Claude وCodex وClaude Code عبر تحسينات أداء مركّزة لتطبيقات الإنتاج.
تحسين أداء React و Next.js
بواسطة vercel-labs
غالبا ما تفقد تطبيقات React و Next.js سرعتها بسبب waterfalls، والحزم الكبيرة، وعمليات إعادة التصيير التي يمكن تجنبها. تمنح هذه المهارة الوكلاء قواعد ملموسة لإجراء تغييرات أكثر أمانا تركز على الأداء.
أتمتة توطين تطبيقات الويب
بواسطة DNYoussef
غالبا ما تؤدي إضافة دعم متعدد اللغات إلى تشتيت النصوص، والتوجيه، والبيانات الوصفية، وملفات اللغات عبر قاعدة الشيفرة. تخطط هذه المهارة لإعداد i18n وتنفذه مع الترجمات، والتحقق، والتوثيق.