Créer et maintenir un CSS cohérent dans une base de code est difficile. Les développeurs luttent avec les conventions de nommage, le support du mode sombre et les tests. Cette compétence fournit des flux de travail guidés pour créer, valider et refactoriser des composants CSS avec un nommage sémantique, la composition Tailwind et le mode sombre par défaut.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「css-development」。 Valider mes styles CSS et suggérer des améliorations
預期結果:
- Nomnage sémantique : 8 classes revues, 2 à renommer (.btn-blue -> .button-primary)
- Couverture du mode sombre : 75% complet, 3 classes manquantes des variantes
- Couverture de tests : 60% complet, 4 classes nécessitant des tests CSS statiques
- Actions recommandées : Ajouter les variantes dark: à .card-header, .badge, .empty-state
安全審計
安全Pure prompt-based skill system with no code execution, no network operations, and no external data access. All file operations are limited to reading project CSS files and creating/modifying styles within the user's project directory.
品質評分
你能建構什麼
Créer de nouvelles classes de composants
Construire de nouveaux composants CSS en suivant les modèles de nommage sémantique et de composition Tailwind.
Refactoriser les styles legacy
Convertir les styles inline et les classes utilitaires en modèles de composants sémantiques maintenables.
Auditer la cohérence CSS
Valider les fichiers CSS pour les conventions de nommage, la couverture du mode sombre et la couverture de tests.
試試這些提示
Créer une nouvelle classe de composant button-primary dans styles/components.css en suivant le modèle de nommage sémantique.
Valider le CSS dans styles/components.css selon les modèles de nommage sémantique et de mode sombre.
Refactoriser les styles inline dans components/ pour utiliser des classes sémantiques avec support du mode sombre.
Créer un nouveau composant card avec des variantes header, body et footer incluant le mode sombre et les tests.
最佳實務
- Utiliser des noms de classes sémantiques qui décrivent le but, pas l'apparence
- Inclure les variantes de mode sombre pour tous les éléments colorés et interactifs
- Composer les utilitaires Tailwind via @apply pour un style centralisé
避免
- Utiliser des noms utilitaires comme .btn-blue ou .text-big
- Laisser des styles inline dispersés dans le balisage
- Créer des composants sans support du mode sombre
常見問題
Est-ce que cela fonctionne avec les fichiers SCSS ou Sass ?
Combien de classes CSS peut-il gérer à la fois ?
Peut-il s'intégrer à ma suite de tests existante ?
Quelles données cette compétence accède-t-elle ?
Pourquoi mes styles ne sont-ils pas détectés ?
En quoi est-ce différent d'utiliser Tailwind directement ?
開發者詳情
授權
MIT
引用
main