frontend-design
تصميم واجهات أمامية بمستوى الإنتاج
تحتاج الفرق غالبا إلى عمل واجهات أمامية يكون وظيفيا ومميزا بصريا في الوقت نفسه. ترشد هذه المهارة Claude وCodex وClaude Code إلى إنشاء واجهات مصقولة ذات اتجاه جمالي واضح.
التثبيت باستخدام Agent لدي
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/davila7-frontend-design.md and its manifest at https://skillstore.io/api/skills/davila7-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". لوحة تحكم موجودة تبدو عامة.
النتيجة المتوقعة:
خطة إعادة تصميم بتسلسل هرمي أقوى وتخطيط معلومات أكثر كثافة وتباعد محسّن وحالات مصقولة ونهج تنفيذ مطابق.
جارٍ استخدام "frontend-design". مكون React يحتاج إلى تنسيق بجودة منتج.
النتيجة المتوقعة:
اتجاه مكون مصقول يتضمن إرشادات تخطيط وتفاصيل تفاعل وسلوكا متجاوبا وبنية CSS للتنفيذ.
التدقيق الأمني
آمنAll three static findings are false positives. Their cited lines contain frontend design guidance and do not request system reconnaissance or unsafe actions.
شارك واستشهد بهذا التقرير
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
نسخ رابط التقرير
https://skillstore.io/skills/davila7-frontend-design/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportشارة Markdown
[](https://skillstore.io/skills/davila7-frontend-design?utm_source=security_passport_badge)شارة HTML
<a href="https://skillstore.io/skills/davila7-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/davila7-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>بطاقة قابلة للتضمين
<iframe src="https://skillstore.io/embed/skills/davila7-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
davila7. (2026). frontend-design security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/davila7-frontend-design/audits/9اقتباس BibTeX
@techreport{davila7-davila7-frontend-design-2026,
author = {davila7},
title = {frontend-design security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/davila7-frontend-design/audits/9},
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 9)"
version: "unspecified"
type: report
authors:
- name: "davila7"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/davila7-frontend-design/audits/9"
identifiers:
- type: other
value: "skillstore:davila7-frontend-design:audit:9"
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
سبب هذا التقييم موثوقية الأدلة: مرتفعما الذي يمكنك بناؤه
إطلاق صفحة منتج
إنشاء صفحة هبوط مميزة بتخطيط وطباعة وألوان وحركة مصقولة لمنتج جديد.
تحسين لوحة تحكم تطبيق
تحسين لوحة تحكم موجودة بتسلسل هرمي أقوى وتباعد أفضل وحالات تفاعل واتساق بصري.
بناء مكون واجهة أمامية
توليد مكون React أو HTML/CSS مصقول يطابق اتجاها جماليا واضحا.
جرّب هذه الموجّهات
صمّم موقع ويب من صفحة واحدة لـ [product]. استخدم HTML وCSS وJavaScript. اجعله متجاوبا ومصقولا وسهل التصفح البصري.
حسّن التصميم البصري لهذا [component]. حافظ على السلوك الحالي، لكن حسّن التخطيط والطباعة والألوان والتباعد والحالات.
أنشئ لوحة تحكم لـ [audience] تتتبع [metrics]. اختر اتجاها جماليا مميزا ونفّذ مكونات UI متجاوبة.
صمّم ونفّذ واجهة متعددة الأقسام لـ [app]. ضمّن التنقل والحالات والحركة وملاحظات إمكانية الوصول ونظاما بصريا متماسكا.
أفضل الممارسات
- قدّم الجمهور وهدف المنتج وقيود العلامة التجارية وإطار العمل المطلوب قبل طلب التنفيذ.
- اطلب الحالات المتجاوبة والحالات الفارغة وحالات التحميل واعتبارات إمكانية الوصول عندما تكون مهمة.
- راجع واجهة UI الناتجة في المتصفح وكرّر التحسين على التباعد والتباين والحركة.
تجنب
- لا تطلب تصميما عصريا عاما دون سياق أو تفاصيل عن الجمهور.
- لا تقبل تأثيرات زخرفية تضعف قابلية القراءة أو إمكانية الوصول أو الأداء.
- لا تتجاوز التحقق عبر منافذ عرض سطح المكتب والجوال.