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.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "frontend-ui-dark-ts". Créer un composant bouton à thème sombre avec un arrière-plan violet de marque
Résultat attendu:
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
Utilisation de "frontend-ui-dark-ts". Créer une barre latérale avec un effet de panneau en verre
Résultat attendu:
Une barre latérale utilisant la classe glass-panel avec backdrop-blur-lg, un arrière-plan sombre et un style de bordure subtil
Utilisation de "frontend-ui-dark-ts". Ajouter une animation d'apparition en fondu à un composant modal
Résultat attendu:
Modal avec opacité initiale 0, animant vers l'opacité 1, utilisant Framer Motion avec une transition easeOut de 0.3s
Audit de sécurité
SûrStatic 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.
Facteurs de risque
⚡ Contient des scripts (1)
⚙️ Commandes externes (53)
🌐 Accès réseau (3)
📁 Accès au système de fichiers (4)
Score de qualité
Ce que vous pouvez construire
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.
Essayez ces prompts
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.
Bonnes pratiques
- 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
Éviter
- É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