استكشف المهارات. أطلق كل مشروع بشكل أسرع.

إنشاء واجهات أمامية مميزة بجودة تصميم عالية وجاهزة للإنتاج. استخدم هذه المهارة عند طلب بناء مكوّنات ويب أو صفحات أو تطبيقات. تُنتج شيفرة إبداعية ومصقولة تتجنّب الجماليات النمطية للذكاء الاصطناعي.

قائمة استبعاد للكليشيهات البصرية وأنماط التخطيط وعناصر الواجهة التي تجعل الواجهات الأمامية تبدو من إنتاج الذكاء الاصطناعي. شغّل هذه المهارة دائمًا إلى جانب frontend-design عند بناء أي واجهة أمامية — مواقع، صفحات هبوط، لوحات معلومات، مكوّنات React، صفحات HTML، أو أي واجهة مرئية. شغّلها أيضًا عند قول «اجعله يبدو أقل شبهًا بالذكاء الاصطناعي» أو «هذا يبدو نمطيًا»، أو عند مراجعة أي مخرجات واجهة أمامية. هذه قائمة مكمّلة لما يجب تجنّبه دائمًا، بينما تتولّى مهارة frontend-design ما يجب فعله.

مراجعة ميزة وتحسينها برسوم متحرّكة هادفة وتفاعلات دقيقة وتأثيرات حركة تُحسّن سهولة الاستخدام وتضيف متعة. استخدمها عند ذكر إضافة الحركة أو الانتقالات أو التفاعلات الدقيقة أو تأثيرات التمرير، أو عند الرغبة في جعل الواجهة أكثر حيوية.

بناء مشاهد ثلاثية الأبعاد تفاعلية للويب باستخدام Three.js r128. استخدم هذه المهارة فقط عند طلب المحتوى ثلاثي الأبعاد صراحةً — عارضات المنتجات، وخلفيات الأقسام الرئيسية ثلاثية الأبعاد، والأشكال الهندسية التفاعلية، ومشاهد الجسيمات، أو حركة الكاميرا المرتبطة بالتمرير. لا تُشغّلها للمواقع ثنائية الأبعاد العادية أو رسوم CSS المتحرّكة أو رسوميات SVG.

قواعد قابلة للقياس لتجربة المستخدم، وكتالوج لأنماط الواجهة، وإرشادات حسب القطاع، وقائمة تحقّق قبل التسليم لأي مشروع واجهة أمامية. شغّل هذه المهارة دائمًا إلى جانب frontend-design عند بناء المواقع وصفحات الهبوط ولوحات المعلومات والتطبيقات ومكوّنات React أو أي واجهة تفاعلية. شغّلها أيضًا عند ذكر «تجربة المستخدم» أو «سهولة الاستخدام» أو «إمكانية الوصول» أو «WCAG» أو «الاستجابة»، أو عند طلب تدقيق قابلية الاستخدام وتحسينها. توفّر هذه المهارة الأرقام الدقيقة — الأحجام الدنيا ونسب التباين وقيم التوقيت وقواعد التباعد.

اجعل المواقع والتطبيقات ولوحات المعلومات تعمل بشكل ممتاز على جميع أحجام الشاشات. استخدمها عند ذكر الاستجابة أو الجوال أو الجهاز اللوحي أو نقاط التوقّف أو التخطيط التكيّفي أو مناطق اللمس أو تعدّد الأجهزة، أو عند بناء أي واجهة يجب أن تعمل خارج سطح المكتب. مستقلّة تمامًا ولا تتطلّب مهارات أخرى.

تُجري مراجعة جودة نهائية تصحّح المحاذاة والتباعد والاتساق وتفاصيل الدقة قبل الإطلاق. ترتقي بالعمل الجيد إلى عمل ممتاز.

أفضل ممارسات تحسين محرّكات البحث لتطبيقات React + Vite + Tailwind CSS المبنية على sticklight.com. استخدمها عند بناء صفحات الويب أو مراجعتها، وكتابة المحتوى، وتوليد وسوم الميتا، وتحسين ترتيب البحث، وإعداد خريطة الموقع أو robots.txt، وإضافة البيانات المنظّمة (JSON-LD)، أو تحسين الصور والأداء. تغطّي: وسوم الميتا الاحتياطية الثابتة، وتحسين محرّكات البحث الديناميكي عبر ‎@unhead/react، وخطّاف useSEO، وخرائط الموقع، وHTML الدلالي، وتسلسل العناوين، وبنية الروابط، وCore Web Vitals، ومواصفات الأيقونة وصور OG، والتصميم بمنهج الجوال أولًا، وتكامل IndexNow.

أنماط المصادقة والتفويض لتطبيقات React + Vite + Tailwind التي تستخدم Cloud Backend‏ (Supabase). استخدمها عند تنفيذ تسجيل الدخول والتسجيل وإعادة تعيين كلمة المرور وإدارة الجلسات والمسارات المحمية وأمان مستوى الصف (RLS) والتحكّم في الوصول حسب الدور أو جداول بيانات المستخدمين. تغطّي: جدول الملفات الشخصية مع مُشغّل الإنشاء التلقائي، وجدول user_roles، وAuthContext مع getUser()، ومكوّن ProtectedRoute، وصفحات المصادقة الكاملة، وتسجيل الخروج، والبيانات المملوكة للمستخدم بسياسات RLS، وأفضل ممارسات الأمان.

نظام تصميم يعتمد الجوال أولًا لبناء تطبيقات iOS وAndroid باستخدام React Native أو Flutter أو الأطر الأصلية. يغطي التفاعل باللمس والأداء وأعراف المنصّات والجودة البصرية. يمنع الجماليات النمطية للذكاء الاصطناعي على الجوال (الإفراط في الأزرار الكبسولية، وطبقات الزجاجية، وأقسام التدرّج اللوني، وشبكات بطاقات المؤشرات) ويفرض واجهة وظيفية بتصميم بشري. استخدمه عند بناء أي تطبيق أو مكوّن أو شاشة جوال، حتى دون ذكر «نظام تصميم الجوال».

تحسين مؤشرات Core Web Vitals لتطبيقات Sticklight المبنية بـ React+Vite+Tailwind. استخدمها عند طلب تحسين سرعة التحميل أو درجات Lighthouse أو ‏LCP/FCP/CLS/INP/TBT، أو إصلاح الصفحات البطيئة أو المعطّلة بعد التحديث. تغطّي الصور والخطوط والنصوص البرمجية ورسوم CSS المتحرّكة والمستمعات وحجم الحزمة.

دليل لإنشاء مهارات مستخدم Sticklight أو تحسينها (تعليمات متخصّصة محفوظة في محرّر المهارات). استخدمها عند إضافة مهارة جديدة، أو إعادة كتابة محتوى مهارة، أو ضبط الأوصاف لتحسين تشغيلها، أو نقل أفكار من مستندات المهارات إلى صيغة Sticklight.

نظام للظلال والارتفاع لإنشاء تدرّج في العمق. يغطي أنماط الظلال الحادة والناعمة والمتوهّجة والمتعدّدة الطبقات والنيومورفية. يشمل الظلال الملوّنة وأنماط الوضع الداكن والرسوم المتحرّكة عالية الأداء ومعادلات الارتفاع. استخدمه عند إضافة ظلال أو عمق أو ارتفاع لأي عنصر واجهة.

بناء لوحة إدارة حيّة لـ WooCommerce/WordPress: إدارة المنتجات والطلبات والفئات باستخدام بيانات المتجر الحقيقية. شغّلها عند الرغبة في لوحة إدارة أو لوحة معلومات أو واجهة خلفية لإدارة متجر WordPress أو WooCommerce — وليس واجهة متجر عامة.