frontend-design
تصميم واجهات أمامية مميزة
تبدو واجهات الويب العامة قابلة للتبادل وقد لا تعكس سياق علامة المستخدم التجارية أو منتجه. ترشد هذه المهارة Claude وCodex وClaude Code إلى تصميم واجهات أمامية مصقولة وعملية ذات توجه بصري واضح.
التثبيت باستخدام Agent لدي
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/azeem-2-frontend-design.md and its manifest at https://skillstore.io/api/skills/azeem-2-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
موارد مهيّأة لـ Agents
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
اختبرها
جارٍ استخدام "frontend-design". ابن صفحة إطلاق منتج لأداة كتابة بالذكاء الاصطناعي.
النتيجة المتوقعة:
تصور صفحة متجاوبة بخط مميز، وأقسام واضحة، ودعوات تفاعلية إلى الإجراء، وملاحظات تنفيذية.
جارٍ استخدام "frontend-design". أعد تنسيق صفحة إعدادات بسيطة لتطبيق B2B.
النتيجة المتوقعة:
- واجهة إعدادات محسنة بعناصر تحكم مجمعة ومسارات تصفح واضحة.
- نظام بصري منضبط يدعم الاستخدام اليومي المتكرر.
- حالات تفاعل للمفاتيح، والإجراءات التدميرية، والتغييرات المحفوظة.
جارٍ استخدام "frontend-design". أنشئ لوحة تحليلات SaaS لبيانات الاحتفاظ.
النتيجة المتوقعة:
لوحة تحكم كثيفة وسهلة القراءة تحتوي على مخططات وفلاتر وحالات فارغة وسلوك متجاوب ولغة تصميم متسقة.
التدقيق الأمني
آمنThe three static findings are false positives caused by design-language phrases in SKILL.md. The skill contains only frontend design guidance and no evidence of system reconnaissance, data exfiltration, code execution, or prompt injection. No remediation is required.
شارك واستشهد بهذا التقرير
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
نسخ رابط التقرير
https://skillstore.io/skills/azeem-2-frontend-design/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportشارة Markdown
[](https://skillstore.io/skills/azeem-2-frontend-design?utm_source=security_passport_badge)شارة HTML
<a href="https://skillstore.io/skills/azeem-2-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/azeem-2-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>بطاقة قابلة للتضمين
<iframe src="https://skillstore.io/embed/skills/azeem-2-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>الاستشهادات الأكاديمية (APA · BibTeX · CFF)
اقتباس APA
Azeem-2. (2026). frontend-design security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/azeem-2-frontend-design/audits/8اقتباس BibTeX
@techreport{azeem-2-azeem-2-frontend-design-2026,
author = {Azeem-2},
title = {frontend-design security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/azeem-2-frontend-design/audits/8},
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: "frontend-design security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "Azeem-2"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/azeem-2-frontend-design/audits/8"
identifiers:
- type: other
value: "skillstore:azeem-2-frontend-design:audit:8"
description: "Skillstore immutable audit report identifier"
مقارنة المتغيرات
18 متغيرات قابلة للتثبيتتبقى مهارة كل مؤلف عنصراً مستقلاً قابلاً للتثبيت. يُرتب المتغير الموصى به وفق أدلة 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
تقييم Skillstore
سبب هذا التقييم موثوقية الأدلة: مرتفعما الذي يمكنك بناؤه
تصميم صفحة هبوط
إنشاء صفحة إطلاق لا تنسى بهرمية واضحة، وهوية بصرية قوية، وبنية واجهة أمامية عاملة.
تحسين لوحة تحكم منتج
تحويل شاشة تشغيلية بسيطة إلى واجهة مصقولة بكثافة أفضل وإيقاع أوضح وأولويات بصرية محسنة.
بناء نموذج أولي تفاعلي
توليد نموذج أولي للواجهة الأمامية بتنسيق محسن وحركة وخيارات تخطيط متجاوبة.
جرّب هذه الموجّهات
أنشئ صفحة هبوط مصقولة لـ [product]. استخدم [framework]. اختر توجها بصريا مميزا واشرح خيارات التصميم الرئيسية.
أعد تصميم هذا [component] من أجل [audience]. أبق السلوك دون تغيير. حسّن الخطوط والألوان والمسافات والحركة.
أنشئ لوحة تحكم جاهزة للإنتاج من أجل [workflow]. ضمّن تخطيطا متجاوبا، وهرمية واضحة، وحالات مفيدة، وسمة متماسكة.
طوّر واجهة متعددة الشاشات لتطبيق [app type]. حدّد التوجه الجمالي، وأنماط المكونات، وحالات التفاعل، وخطة التنفيذ قبل كتابة الكود.
أفضل الممارسات
- قدّم أهداف المنتج، والجمهور، والتقنية المفضلة، وقيود التصميم الحالية.
- اطلب حالات متجاوبة، واعتبارات إمكانية الوصول، وسلوك تفاعل حقيقي.
- راجع التصاميم المولدة وفق احتياجات العلامة التجارية قبل استخدامها في الإنتاج.
تجنب
- طلب تصميم حديث عام دون سياق أو جمهور.
- قبول مؤثرات زخرفية تقلل قابلية القراءة أو الأداء.
- استخدام المهارة بديلا عن اختبار إمكانية الوصول أو بحث المستخدمين.