css-development-validate
CSS-Muster im Codebase validieren
CSS-Validierung erfordert eine manuelle Überprüfung der semantischen Benennung, Dark-Mode-Abdeckung und Tailwind-Zusammensetzung. Diese Skill automatisiert die Musterprüfung und generiert umsetzbare Berichte mit Datei- und Zeilenreferenzen.
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 "css-development-validate". Validate styles/components.css
Résultat attendu:
- CSS-Validierungsbericht für styles/components.css
- 15 überprüfte Klassen gefunden
- Probleme: 3 hohe Priorität (fehlender Dark-Mode), 4 mittlere (Benennung)
- Beispielprobleme: .card-header fehlender Dark-Mode (Zeile 45), .btn-blue sollte .button-secondary sein
Utilisation de "css-development-validate". Check all CSS files for dark mode coverage
Résultat attendu:
- Dark-Mode-Abdeckungszusammenfassung
- 5 CSS-Dateien mit 45 farbigen Klassen geprüft
- Fehlender Dark-Mode: 8 Klassen in 3 Dateien
- Top-Problem: .badge-warning benötigt dark:bg-amber-900 dark:text-amber-100
Utilisation de "css-development-validate". Review class naming conventions
Résultat attendu:
- Semantische Namensüberprüfung
- 12 nicht-semantische Klassennamen gefunden
- Ersetze .btn-blue durch .button-secondary oder .button-accent
- Ersetze .text-lg-blue durch .text-blue-primary oder .text-blue-emphasis
Audit de sécurité
SûrPure documentation skill with no executable code. All 'external_commands' detections are markdown code examples showing CSS patterns, not actual shell commands. The skill only reads CSS files for validation as designed. No network, filesystem write, or command execution capabilities exist. Static scanner misidentified documentation examples as executable patterns.
Facteurs de risque
📁 Accès au système de fichiers (1)
Score de qualité
Ce que vous pouvez construire
Pre-Merge-Codeüberprüfung
Validiere CSS vor dem Zusammenführen, um Musterkonsistenz im gesamten Codebase sicherzustellen.
Technische-Schulden-Bewertung
Prüfe bestehendes CSS auf Dark-Mode-Lücken und Benennungsprobleme im gesamten Codebase.
Musterdurchsetzung
Verifiziere, dass Contributors etablierte CSS-Muster während des Codeüberprüfungsprozesses einhalten.
Essayez ces prompts
Validiere das CSS in styles/components.css gegen etablierte Muster. Prüfe semantische Benennung, Dark-Mode-Abdeckung und Tailwind-@apply-Verwendung.
Prüfe alle CSS-Dateien auf fehlende Dark-Mode-Varianten bei farbigen Elementen. Liste jede Klasse mit fehlenden dark:-Varianten mit Datei:Zeile-Referenzen auf.
Überprüfe CSS-Klassennamen auf nicht-semantische Benennung. Kennzeichne Utility-basierte Namen wie .btn-blue oder .text-big und schlage semantische Alternativen vor.
Führe vollständige CSS-Validierung durch: prüfe semantische Benennung, Dark-Mode-Abdeckung, @apply-Verwendung, Testabdeckung und Dokumentation. Gib eine Zusammenfassung mit Prioritätsempfehlungen.
Bonnes pratiques
- Gib den genauen CSS-Dateipfad an, um zu validieren, für fokussierte Ergebnisse
- Überprüfe zuerst Dark-Mode-Probleme, da sie visuelle Fehler verursachen
- Verwende Validierungsberichte vor dem Refactoring, um den Umfang zu verstehen
Éviter
- Verwendung von Utility-Klassennamen wie .btn-blue oder .text-big
- Fehlende dark:-Varianten bei Hintergrund- und Textfarben
- Verstreute Tailwind-Utilities im Markup anstelle von @apply-Zusammensetzung