Compétences css-development:validate
🎨
css-development:validate
Sûr 📁
Accès au système de fichiers
コードベースのCSSパターンを検証する
CSS検証では、セマンティックな命名、ダークモード対応、Tailwindの構成について手動でのレビューが必要です。このスキルはパターンチェックを自動化し、ファイルと行番号を参照した実行可能なレポートを生成します。
Prend en charge: Claude Codex Code(CC)
1
Télécharger le ZIP du skill
2
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
3
Activez et commencez à utiliser
Tester
Utilisation de "css-development:validate". Validate styles/components.css
Résultat attendu:
- styles/components.cssのCSS検証レポート
- レビュー済みクラス：15件
- 問題：3件高優先度（ダークモード不足）、4件中優先度（命名）
- 問題の例：.card-headerにダークモード不足（45行目）、.btn-blueは.button-secondaryであるべき
Audit de sécurité
Sûrv3 • 1/10/2026
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
Fichiers analysés
357
Lignes analysées
1
résultats
3
Total des audits
Facteurs de risque
📁 Accès au système de fichiers (1)
Audité par: claude Voir l’historique des audits →
Score de qualité
38
Architecture
100
Maintenabilité
81
Contenu
21
Communauté
100
Sécurité
61
Conformité aux spécifications
Ce que vous pouvez construire
マージ前のコードレビュー
コードベース全体でパターンの一貫性を確保するために、マージ前にCSSを検証します。
技術的負債の評価
コードベース全体のCSSを監査し、ダークモードのギャップと命名問題を発見します。
パターンの適用
コードレビュープロセス中にコントリビューターが確立されたCSSパターンに従っていることを確認します。
Essayez ces prompts
基本的な検証
Establishされたパターンに従ってstyles/components.cssのCSSを検証します。セマンティックな命名、ダークモード対応、Tailwindの@apply使用法を確認してください。
集中チェック
すべてのCSSファイルで有色要素のダークモードバリアント不足を確認してください。各クラスごとにdark:バリアント不足をファイル:行番号でリストアップします。
命名レビュー
CSSクラス名を非セマンティックな命名についてレビューします。.btn-blueや.text-bigのようなユーティリティベースの名前をフラグ付けし、セマンティックな代替案を提案します。
完全監査
完全なCSS検証を実行します：セマンティックな命名、ダークモード対応、@apply使用法、テストカバレッジ、ドキュメントを確認します。優先度の高い推奨事項を含むサマリーを提供します。
Bonnes pratiques
- 焦点を絞った結果を得るために、検証するCSSファイルのパスを正確に指定してください
- 視覚的なバグの原因となるダークモードの問題を最初にレビューしてください
- リファクタリングの前に検証レポートを使用して範囲を理解してください
Éviter
- .btn-blueや.text-bigのようなユーティリティクラス名を使用する
- 背景色と文字色でdark:バリアントが不足している
- マークアップにTailwindユーティリティが散在している вместо @apply構成
Foire aux questions
このスキルはCSSファイルを変更できますか？
いいえ。このスキルは検証と問題報告のみを行います。問題を自動的に修正するには、css-development:refactorスキルを使用してください。
どのようなCSSファイルをチェックしますか？
指定したCSSファイルを読み取ります。一般的なパスには、styles/components.cssやコンポーネント固有のスタイルシートが含まれます。
ブラウザでレンダリングされたスタイルをテストしますか？
いいえ。静的なCSSパターンのみを検証します。ブラウザのレンダリングテストには別のテストファイルが必要です。
CSSファイルのデータはどこかに送信されますか？
いいえ。このスキルはローカルで実行され、セッション内で検証フィードバックを提供するためにファイルのみを読み取ります。CSSファイルからのデータはどこにも送信されません。
一部のクラスが非セマンティックとしてフラグ付けされるのはなぜですか？
.btn-blueのような非セマンティックな名前は、見た目ではなく目的を記述します。.button-primaryのように、要素が何を表すかを記述する名前を使用してください。
css-development:refactorとどう異なりますか？
Validateは問題をレビューして報告します。Refactorは実際にコードを変更します。まずValidateを使用して範囲を理解し、次にRefactorで修正します。