frontend-ui-dark-ts
Créer des interfaces React à thème sombre
Créez des applications React modernes à thème sombre avec Tailwind CSS, des effets de glassmorphism et des animations fluides Framer Motion pour les tableaux de bord et les panneaux d'administration.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-ui-dark-ts". Créer un composant bouton à thème sombre avec un arrière-plan violet de marque
النتيجة المتوقعة:
Un composant bouton utilisant bg-brand avec hover:bg-brand-hover, des styles de bordure de focus appropriés et une taille confortable au toucher
استخدام "frontend-ui-dark-ts". Créer une barre latérale avec un effet de panneau en verre
النتيجة المتوقعة:
Une barre latérale utilisant la classe glass-panel avec backdrop-blur-lg, un arrière-plan sombre et un style de bordure subtil
استخدام "frontend-ui-dark-ts". Ajouter une animation d'apparition en fondu à un composant modal
النتيجة المتوقعة:
Modal avec opacité initiale 0, animant vers l'opacité 1, utilisant Framer Motion avec une transition easeOut de 0.3s
التدقيق الأمني
آمن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)
درجة الجودة
ماذا يمكنك بناءه
Créer un tableau de bord d'administration en mode sombre
Créez un panneau d'administration professionnel avec navigation latérale, tableaux de données et indicateurs d'état utilisant les modèles de thème sombre.
Concevoir une interface de visualisation de données
Créez un tableau de bord riche en données avec des cartes glassmorphiques, des transitions fluides et des jetons de couleur personnalisés pour la visualisation de données.
Implémenter une page d'accueil moderne
Créez une page d'accueil élégante avec des sections animées, des modals avec overlay en verre et des micro-interactions soignées.
جرّب هذه الموجهات
Utilisez le skill frontend-ui-dark-ts pour configurer un nouveau projet React avec la configuration du thème sombre Tailwind CSS. Incluez les couleurs de marque personnalisées, les arrière-plans neutres et les jetons de couleur de texte.
Créez un composant carte glassmorphique utilisant les motifs frontend-ui-dark-ts. Incluez le flou de fond, les bordures subtiles et les couleurs appropriées du thème sombre.
Implémentez des transitions de page fluides utilisant Framer Motion. Utilisez les variantes fade-in et slide-up du skill frontend-ui-dark-ts pour les changements de route.
Créez une mise en page de tableau de bord complète avec shell d'application, navigation latérale, en-tête de page et cartes responsives en verre. Incluez les badges d'état et les jetons de couleur pour la visualisation de données.
أفضل الممارسات
- Utilisez des jetons de couleur sémantiques (text-primary, text-secondary) au lieu de couleurs codées en dur pour la maintenabilité
- Appliquez les effets de verre avec parcimonie - une utilisation excessive peut réduire la lisibilité et les performances
- Testez les animations sur des appareils réels - les préférences de réduction de mouvement doivent être respectées
تجنب
- Évitez d'utiliser des arrière-plans noir pur - utilisez des couleurs neutral-bg avec des rapports de contraste appropriés
- N'appliquez pas l'effet de verre à tous les éléments - réservez-le pour les surfaces surélevées et les superpositions
- Évitez une complexité动画 excessive qui impacte le temps de chargement ou la réactivité des interactions