يُستخدم عند إنشاء أو تعديل الواجهات التي تواجه المستخدم. يُستخدم عند إنشاء المكونات، أو تنفيذ التخطيطات، أو إدارة الحالة، أو عندما يحتاج المخرج إلى أن يبدو بجودة الإنتاج ويشعر بها بدلاً من إنشاء الذكاء الاصطناعي.
ثبّت مهارة الذكاء الاصطناعي frontend-ui-engineering بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: addyosmani/agent-skills.
Build production-quality user interfaces that are accessible, performant, and visually polished. The goal is UI that looks like it was built by a design-aware engineer at a top company — not like it was generated by an AI. This means real design system adherence, proper accessibility, thoughtful interaction patterns, and no generic "AI aesthetic."
Avoid prop drilling deeper than 3 levels. If you're passing props through components that don't use them, introduce context or restructure the component tree.
| Purple/indigo everything | Use the project's actual color palette | | Excessive gradients | Flat or subtle gradients matching the design system | | Rounded everything (rounded-2xl) | Consistent border-radius from the design system | | Generic hero sections | Content-first layouts | | Lorem ipsum-style copy | Realistic placeholder content |
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/addyosmani/agent-skills --skill frontend-ui-engineeringيُستخدم عند إنشاء أو تعديل الواجهات التي تواجه المستخدم. يُستخدم عند إنشاء المكونات، أو تنفيذ التخطيطات، أو إدارة الحالة، أو عندما يحتاج المخرج إلى أن يبدو بجودة الإنتاج ويشعر بها بدلاً من إنشاء الذكاء الاصطناعي. المصدر: addyosmani/agent-skills.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/addyosmani/agent-skills --skill frontend-ui-engineering بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/addyosmani/agent-skills