إرشادات أفضل ممارسات تصميم واجهة المستخدم/تجربة المستخدم والواجهة الأمامية (تصميم الواجهة الأمامية سابقًا). يجب استخدام هذه المهارة عند كتابة أو مراجعة أو تصميم كود الواجهة الأمامية لضمان إمكانية الوصول والأداء وسهولة الاستخدام. تشغيل المهام التي تتضمن بنية HTML أو تصميم CSS أو التخطيطات سريعة الاستجابة أو تصميم النموذج أو الرسوم المتحركة أو تحسينات إمكانية الوصول.
ثبّت مهارة الذكاء الاصطناعي ui-design بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: thongdn-it/react-agent-skills.
Comprehensive UI/UX and frontend design best practices guide. Contains 42 rules across 8 categories, prioritized by impact to guide accessible, performant, and user-friendly interface development.
| 1 | Accessibility & WCAG Compliance | CRITICAL | access- | | 2 | Core Web Vitals Optimization | CRITICAL | cwv- | | 3 | Visual Hierarchy & Layout | HIGH | layout- | | 4 | Responsive & Mobile-First Design | HIGH | resp- | | 5 | Typography & Font Loading | MEDIUM-HIGH | typo- | | 6 | Color & Contrast | MEDIUM | color- |
| 7 | Forms & Validation UX | MEDIUM | form- | | 8 | Animation & Performance | LOW-MEDIUM | anim- |
إرشادات أفضل ممارسات تصميم واجهة المستخدم/تجربة المستخدم والواجهة الأمامية (تصميم الواجهة الأمامية سابقًا). يجب استخدام هذه المهارة عند كتابة أو مراجعة أو تصميم كود الواجهة الأمامية لضمان إمكانية الوصول والأداء وسهولة الاستخدام. تشغيل المهام التي تتضمن بنية HTML أو تصميم CSS أو التخطيطات سريعة الاستجابة أو تصميم النموذج أو الرسوم المتحركة أو تحسينات إمكانية الوصول. المصدر: thongdn-it/react-agent-skills.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/thongdn-it/react-agent-skills --skill ui-designإرشادات أفضل ممارسات تصميم واجهة المستخدم/تجربة المستخدم والواجهة الأمامية (تصميم الواجهة الأمامية سابقًا). يجب استخدام هذه المهارة عند كتابة أو مراجعة أو تصميم كود الواجهة الأمامية لضمان إمكانية الوصول والأداء وسهولة الاستخدام. تشغيل المهام التي تتضمن بنية HTML أو تصميم CSS أو التخطيطات سريعة الاستجابة أو تصميم النموذج أو الرسوم المتحركة أو تحسينات إمكانية الوصول. المصدر: thongdn-it/react-agent-skills.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/thongdn-it/react-agent-skills --skill ui-design بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/thongdn-it/react-agent-skills