بناء واجهات أمامية مميزة
غالبًا ما تبدو مخرجات الواجهة الأمامية العامة متكررة وتفتقر إلى سياق المنتج. توجّه هذه المهارة Claude وCodex وClaude Code نحو واجهات مصقولة ذات اتجاه بصري أقوى.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/agentworkforce-frontend-design.md and its manifest at https://skillstore.io/api/skills/agentworkforce-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "frontend-design". ابنِ صفحة رئيسية لموقع حجز فنادق بوتيكية.
النتيجة المتوقعة:
صفحة رئيسية متجاوبة بأسلوب بصري تحريري، وطباعة مميزة، وصور قوية، وعناصر تحكم للحجز، وحالات تمرير مصقولة.
جارٍ استخدام "frontend-design". أنشئ لوحة معلومات لأداة مراقبة للمطورين.
النتيجة المتوقعة:
لوحة معلومات مركّزة بمقاييس مدمجة، وحالات تنبيه، وحركة منضبطة، وتنقّل واضح، ونبرة بصرية مناسبة للاستخدام التقني اليومي.
جارٍ استخدام "frontend-design". أنشئ صفحة أعمال لفنان خزف.
النتيجة المتوقعة:
تجربة معرض أعمال متقنة بملمس حسي، وأقسام معرض، وخيارات ألوان مخصصة، وتفاصيل تخطيط مرتبطة بسياق الفنان.
All three static findings are false positives caused by ordinary frontend design guidance. The skill contains no system reconnaissance, prompt injection, or other malicious intent.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/agentworkforce-frontend-design/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/agentworkforce-frontend-design?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/agentworkforce-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/agentworkforce-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/agentworkforce-frontend-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>AgentWorkforce. (2026). frontend-design security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/agentworkforce-frontend-design/audits/9@techreport{agentworkforce-agentworkforce-frontend-design-2026,
author = {AgentWorkforce},
title = {frontend-design security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/agentworkforce-frontend-design/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-design security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
- name: "AgentWorkforce"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/agentworkforce-frontend-design/audits/9"
identifiers:
- type: other
value: "skillstore:agentworkforce-frontend-design:audit:9"
description: "Skillstore immutable audit report identifier"
تبقى مهارة كل مؤلف عنصراً مستقلاً قابلاً للتثبيت. يُرتب المتغير الموصى به وفق أدلة Skillstore.
سبب تصدر هذا المتغير
atman36-frontend-design
2026-09-09
frontend-design
2026-09-09
zhanlincui-frontend-design
2026-09-09
yyh211-frontend-design
2026-09-09
1bertogit-frontend-design
2026-09-09
92bilal26-frontend-design
2026-09-09
adamaugustinsky-frontend-design
2026-09-09
am-will-frontend-design
2026-09-09
azeem-2-frontend-design
2026-09-09
cesaraugustusgrob-frontend-design
2026-09-09
davila7-frontend-design
2026-09-09
anthropics-frontend-design
2026-09-09
pbakaus-frontend-design
2026-09-09
7spade-frontend-design
2026-09-09
sickn33-frontend-design
2026-09-09
agentworkforce-frontend-design
2026-09-09
ajv009-frontend-design
2026-09-09
dennisliuck-frontend-design
2026-09-09
إنشاء صفحة أو شاشة تطبيق ذات طابع بصري مميز انطلاقًا من موجز قصير للمنتج.
إبعاد عمل الواجهة الأمامية المولّد عن التخطيطات والخطوط وأنماط الألوان الشائعة.
اختبار عدة مقاربات جمالية قبل اختيار اتجاه للتنفيذ.
استخدم مهارة frontend-design لبناء صفحة هبوط لتطبيق صغير للميزانية. اجعلها عملية ومتجاوبة ومميزة بصريًا.
استخدم مهارة frontend-design لإنشاء لوحة تحليلات SaaS. أعطِ الأولوية لكثافة المعلومات، والتسلسل الهرمي الواضح، والطباعة المصقولة، والحالات الواقعية.
استخدم مهارة frontend-design لاقتراح ثلاثة اتجاهات بصرية لسوق فني عبر الإنترنت، ثم نفّذ أقوى اتجاه كصفحة رئيسية متجاوبة.
استخدم مهارة frontend-design لبناء واجهة محرر متجاوبة لأداة سير عمل no-code. ضمّن أشرطة أدوات ولوحات وحالات فارغة وتفاعلات مصقولة.
المؤلف
AgentWorkforceالترخيص
Complete terms in LICENSE.txt
مراجعة Skillstore
r2
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
31bc7611b504c197d3e993aef7943461c871616f
حداثة الصيانة
٢٦/٧/٢٠٢٦
الاستخدام
14 تنزيلات · 238 مشاهدات
بنية الملفات
📄 SKILL.md
بناء لوحات أوامر React
غالبًا ما تفشل لوحات الأوامر بسبب أخطاء التركيز، والمستمعين المتقادمين، ومراجع الأوامر غير المستقرة. تمنح هذه المهارة أنماط React عملية للوحات موثوقة تعتمد على لوحة المفاتيح.
إنشاء قواعد Claude بشكل صحيح
من السهل إساءة تهيئة ملفات قواعد Claude عند الانتقال من Cursor أو عند كتابة إرشادات محددة النطاق. توفر هذه المهارة المسارات الصحيحة وfrontmatter وأمثلة glob وإرشادات تنظيم الملفات.
إنشاء مهارات Claude Code فعّالة
غالبًا ما يكتب مؤلفو المهارات إرشادات يصعب على وكلاء الذكاء الاصطناعي العثور عليها أو تطبيقها. توفر هذه المهارة بنية عملية لإنشاء مهارات Claude Code موجزة وقابلة للاكتشاف والاختبار.
إنشاء ملفات PRPM Manifest نظيفة
يحتاج ناشرو PRPM إلى ملفات manifest مكتملة ومتسقة وجاهزة للمراجعة. ترشد هذه المهارة Claude وCodex وClaude Code عبر حقول الحزم والمجموعات والوسوم والملفات وفحوصات النشر.
تنفيذ GitHub OAuth باستخدام Nango
غالبا ما يتطلب تسجيل الدخول عبر GitHub والوصول إلى المستودعات تدفقات OAuth منفصلة. تعرض هذه المهارة نمط اتصالين في Nango مع webhooks، وربط قاعدة البيانات، ومعالجة المزامنة.
بناء وكلاء Claude Code
يتطلب إنشاء وكلاء Claude Code موثوقين frontmatter صحيحًا، وحدودًا للأدوات، وشخصيات واضحة. ترشد هذه المهارة Claude وCodex وClaude Code عبر بنية الوكيل والتحقق منه ومراجعته.
Build Accessible Tailwind Interfaces
بواسطة nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
إنشاء فن توليدي تفاعلي
بواسطة Cam10001110101
يحتاج الفنانون والفرق إلى فن توليدي قابل لإعادة الإنتاج ويمكن استكشافه دون إعداد. تحوّل هذه المهارة المفهوم إلى عنصر HTML مبني على p5.js ببذرة محددة، مع عناصر تحكم وتصدير PNG.
تصميم نماذج أولية مميزة لواجهات المستخدم
بواسطة tencentcloudbase
غالبا ما تفتقر واجهات الذكاء الاصطناعي العامة إلى اتجاه بصري وتفاصيل واعية بالمنصة. ترشد هذه المهارة Claude وCodex وClaude Code إلى تحديد نية التصميم قبل بناء النماذج الأولية.
تحسين تخطيط واجهة المستخدم والإيقاع البصري
بواسطة pbakaus
تجعل الواجهات المزدحمة والشبكات المتكررة المنتجات أصعب في التصفح السريع والثقة. ترشد هذه المهارة Claude وCodex وClaude Code نحو تباعد أقوى، وتسلسل هرمي أوضح، وتركيب متجاوب أفضل.
استخراج أنماط نظام تصميم قابلة لإعادة الاستخدام
بواسطة pbakaus
غالبًا ما تكرر الفرق مكونات UI والرموز وأنماط التخطيط عبر التطبيق. تساعد هذه المهارة Claude أو Codex أو Claude Code على العثور على أنماط قابلة لإعادة الاستخدام ودمجها في نظام تصميم مُدار.
تنفيذ React View Transitions
بواسطة vercel-labs
من السهل وضع انتقالات عرض React في المكان غير المناسب، مما يؤدي إلى رسوم متحركة صامتة أو مزعجة. ترشد هذه المهارة اختيارات الرسوم المتحركة للمسارات وSuspense والقوائم والعناصر المشتركة.