frontend-ui-dark-ts
بناء واجهات React بت التصميم الداكن
إنشاء تطبيقات React حديثة بت التصميم الداكن مع Tailwind CSS، وتأثيرات الزجاج الشفاف (Glassmorphism)، ورسوم متحركة سلسة من Framer Motion للوحات التحكم ولوحات الإدارة.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-ui-dark-ts". إنشاء مكون زر بت التصميم الداكن مع خلفية علامة تجارية بنفسجية
النتيجة المتوقعة:
مكون زر يستخدم bg-brand مع hover:bg-brand-hover وأنماط حلقة التركيز المناسبة وحجم مناسب لللمس
استخدام "frontend-ui-dark-ts". بناء شريط جانبي بتأثير لوحة زجاجية
النتيجة المتوقعة:
شريط جانبي يستخدم فئة glass-panel مع backdrop-blur-lg وخلفية داكنة وتصميم حد دقيق
استخدام "frontend-ui-dark-ts". إضافة تأثير تلاشي إلى مكون نافذة منبثقة
النتيجة المتوقعة:
نافذة منبثقة تبدأ بـ opacity 0 وتنتقل إلى opacity 1 باستخدام Framer Motion مع انتقال 0.3s easeOut
التدقيق الأمني
آمنStatic analysis flagged 69 potential issues, all of which are false positives. The flagged patterns (shell commands, hardcoded URLs, path traversal, weak crypto) are actually documentation examples and code templates in SKILL.md. No malicious code or security risks detected. This is a legitimate frontend UI skill for building dark-themed React applications.
عوامل الخطر
⚡ يحتوي على سكربتات (1)
⚙️ الأوامر الخارجية (53)
🌐 الوصول إلى الشبكة (3)
📁 الوصول إلى نظام الملفات (4)
درجة الجودة
ماذا يمكنك بناءه
بناء لوحة تحكم بت التصميم الداكن
إنشاء لوحة إدارة احترافية مع تنقل بالشريط الجانبي وجداول البيانات ومؤشرات الحالة باستخدام أنماط التصميم الداكن.
تصميم واجهة تصور البيانات
بناء لوحة تحكم غنية بالبيانات مع بطاقات زجاجية شفافة انتقالات سلسة ورموز ألوان مخصصة لتصور البيانات.
تنفيذ صفحة هبوط حديثة
إنشاء صفحة هبوط أنيقة مع أقسام متحركة وم|Superimposed زجاجية وتفاعلات مصغرة مصقولة.
جرّب هذه الموجهات
استخدم مهارة frontend-ui-dark-ts لإعداد مشروع React جديد مع تكوين Tailwind CSS للتصميم الداكن. قم بتضمين رموز الألوان المخصصة للعلامة التجارية والخلفيات المحايدة ولون النص.
إنشاء مكون بطاقة بتأثير زجاجي باستخدام أنماط frontend-ui-dark-ts. قم بتضمين ضبابية الخلفية والحدود الدقيقة وألوان التصميم الداكن المناسبة.
تنفيذ انتقالات صفحات سلسة باستخدام Framer Motion. استخدم متغيرات التلاشي والصعود من مهارة frontend-ui-dark-ts لتغييرات المسار.
بناء تخطيط كامل للوحة التحكم مع قشرة التطبيق وتنقل الشريط الجانبي头部 الصفحة وبطاقات زجاجية متجاوبة. قم بتضمين شارات الحالة ورموز ألوان تصور البيانات.
أفضل الممارسات
- استخدم رموز الألوان الدلالية (text-primary، text-secondary) بدلاً من الألوان المحددة مسبقاً لقابلية الصيانة
- طبق تأثيرات الزجاج بشكل معتدل - الإفراط في الاستخدام يمكن أن يقلل من قابلية القراءة والأداء
- اختبر الرسوم المتحركة على أجهزة فعلية - يجب احترام تفضيلات تقليل الحركة
تجنب
- تجنب استخدام خلفيات سوداء نقية - استخدم ألوان الخلفية المحايدة مع نسب تباين مناسبة
- لا تطبق تأثير الزجاج على جميع العناصر - احتفظ به للسطح المرتفعة والم|Superimposed
- تجنب تعقيد الرسوم المتحركة المفرط الذي يؤثر على تحميل الصفحة أو استجابة التفاعل