스킬 css-development:validate
🎨
css-development:validate
안전 📁
파일 시스템 액세스
コードベースのCSSパターンを検証する
CSS検証では、セマンティックな命名、ダークモード対応、Tailwindの構成について手動でのレビューが必要です。このスキルはパターンチェックを自動化し、ファイルと行番号を参照した実行可能なレポートを生成します。
지원: Claude Codex Code(CC)
1
스킬 ZIP 다운로드
2
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
3
토글을 켜고 사용 시작
테스트해 보기
"css-development:validate" 사용 중입니다. Validate styles/components.css
예상 결과:
- styles/components.cssのCSS検証レポート
- レビュー済みクラス：15件
- 問題：3件高優先度（ダークモード不足）、4件中優先度（命名）
- 問題の例：.card-headerにダークモード不足（45行目）、.btn-blueは.button-secondaryであるべき
보안 감사
안전v3 • 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
스캔된 파일
357
분석된 줄 수
1
발견 사항
3
총 감사 수
위험 요인
📁 파일 시스템 액세스 (1)
감사자: claude 감사 이력 보기 →
품질 점수
38
아키텍처
100
유지보수성
81
콘텐츠
20
커뮤니티
100
보안
61
사양 준수
만들 수 있는 것
マージ前のコードレビュー
コードベース全体でパターンの一貫性を確保するために、マージ前にCSSを検証します。
技術的負債の評価
コードベース全体のCSSを監査し、ダークモードのギャップと命名問題を発見します。
パターンの適用
コードレビュープロセス中にコントリビューターが確立されたCSSパターンに従っていることを確認します。
이 프롬프트를 사용해 보세요
基本的な検証
Establishされたパターンに従ってstyles/components.cssのCSSを検証します。セマンティックな命名、ダークモード対応、Tailwindの@apply使用法を確認してください。
集中チェック
すべてのCSSファイルで有色要素のダークモードバリアント不足を確認してください。各クラスごとにdark:バリアント不足をファイル:行番号でリストアップします。
命名レビュー
CSSクラス名を非セマンティックな命名についてレビューします。.btn-blueや.text-bigのようなユーティリティベースの名前をフラグ付けし、セマンティックな代替案を提案します。
完全監査
完全なCSS検証を実行します：セマンティックな命名、ダークモード対応、@apply使用法、テストカバレッジ、ドキュメントを確認します。優先度の高い推奨事項を含むサマリーを提供します。
모범 사례
- 焦点を絞った結果を得るために、検証するCSSファイルのパスを正確に指定してください
- 視覚的なバグの原因となるダークモードの問題を最初にレビューしてください
- リファクタリングの前に検証レポートを使用して範囲を理解してください
피하기
- .btn-blueや.text-bigのようなユーティリティクラス名を使用する
- 背景色と文字色でdark:バリアントが不足している
- マークアップにTailwindユーティリティが散在している вместо @apply構成
자주 묻는 질문
このスキルはCSSファイルを変更できますか？
いいえ。このスキルは検証と問題報告のみを行います。問題を自動的に修正するには、css-development:refactorスキルを使用してください。
どのようなCSSファイルをチェックしますか？
指定したCSSファイルを読み取ります。一般的なパスには、styles/components.cssやコンポーネント固有のスタイルシートが含まれます。
ブラウザでレンダリングされたスタイルをテストしますか？
いいえ。静的なCSSパターンのみを検証します。ブラウザのレンダリングテストには別のテストファイルが必要です。
CSSファイルのデータはどこかに送信されますか？
いいえ。このスキルはローカルで実行され、セッション内で検証フィードバックを提供するためにファイルのみを読み取ります。CSSファイルからのデータはどこにも送信されません。
一部のクラスが非セマンティックとしてフラグ付けされるのはなぜですか？
.btn-blueのような非セマンティックな名前は、見た目ではなく目的を記述します。.button-primaryのように、要素が何を表すかを記述する名前を使用してください。
css-development:refactorとどう異なりますか？
Validateは問題をレビューして報告します。Refactorは実際にコードを変更します。まずValidateを使用して範囲を理解し、次にRefactorで修正します。