css-development:validate
CSS-Muster im Codebase validieren
Die CSS-Validierung erfordert eine manuelle Überprüfung der semantischen Benennung, der Dark-Mode-Abdeckung und der Tailwind-Zusammensetzung. Diese Automatisierung überprüft Muster und erstellt umsetzbare Berichte mit Datei- und Zeilenreferenzen.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「css-development:validate」を使用しています。 Validate styles/components.css
期待される結果:
- 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
セキュリティ監査
安全Pure prompt-based skill with no code execution capabilities. Only reads CSS files for validation as stated in its purpose. No network, filesystem write, or command execution capabilities.
リスク要因
📁 ファイルシステムへのアクセス (1)
品質スコア
作れるもの
Pre-Merge-Codeüberprüfung
Validieren Sie CSS vor dem Zusammenführen, um Musterkonsistenz im gesamten Codebase sicherzustellen.
Technische-Schulden-Bewertung
Auditieren Sie vorhandenes CSS auf Dark-Mode-Lücken und Benennungsprobleme im gesamten Codebase.
Durchsetzung von Mustern
Überprüfen Sie, ob Contributors etablierte CSS-Muster während des Codeüberprüfungsprozesses einhalten.
これらのプロンプトを試す
Validieren Sie das CSS in styles/components.css gegen etablierte Muster. Prüfen Sie semantische Benennung, Dark-Mode-Abdeckung und Tailwind-@apply-Verwendung.
Prüfen Sie alle CSS-Dateien auf fehlende Dark-Mode-Varianten auf farbigen Elementen. Listen Sie jede Klasse mit fehlenden dark:-Varianten mit Datei:Zeile-Referenzen auf.
Überprüfen Sie CSS-Klassennamen auf nicht-semantische Benennung. Markieren Sie Utility-basierte Namen wie .btn-blue oder .text-big und schlagen Sie semantische Alternativen vor.
Führen Sie eine vollständige CSS-Validierung durch: prüfen Sie semantische Benennung, Dark-Mode-Abdeckung, @apply-Verwendung, Testabdeckung und Dokumentation. Geben Sie eine Zusammenfassung mit Prioritätsempfehlungen.
ベストプラクティス
- Geben Sie den genauen CSS-Dateipfad für fokussierte Ergebnisse an
- Überprüfen Sie zuerst Dark-Mode-Probleme, da sie visuelle Fehler verursachen
- Verwenden Sie Validierungsberichte vor dem Refactoring, um den Umfang zu verstehen
回避
- Verwendung von Utility-Klassennamen wie .btn-blue oder .text-big
- Fehlende dark:-Varianten auf Hintergrund- und Textfarben
- Verstreute Tailwind-Utilities im Markup anstelle von @apply-Zusammensetzung