Habilidades css-development-validate
🎨

css-development-validate

Seguro 📁 Acesso ao sistema de arquivos

驗證程式碼庫中的 CSS 模式

CSS 驗證需要手動審查語意命名、深色模式覆蓋率和 Tailwind 組合。此技能可自動檢查模式並產生包含檔案和行號參考的可操作報告。

Suporta: Claude Codex Code(CC)
📊 71 Adequado
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "css-development-validate". Validate styles/components.css

Resultado esperado:

  • styles/components.css 的 CSS 驗證報告
  • 找到 15 個已審查的類別
  • 問題：3 個高優先級（缺少深色模式），4 個中等（命名問題）
  • 範例問題：.card-header 缺少深色模式（第 45 行），.btn-blue 應該改為 .button-secondary

A utilizar "css-development-validate". Check all CSS files for dark mode coverage

Resultado esperado:

  • 深色模式覆蓋率摘要
  • 檢查了 5 個 CSS 檔案，共 45 個彩色類別
  • 缺少深色模式：8 個類別分布在 3 個檔案中
  • 首要問題：.badge-warning 需要 dark:bg-amber-900 dark:text-amber-100

A utilizar "css-development-validate". Review class naming conventions

Resultado esperado:

  • 語意命名審查
  • 找到 12 個非語意類別名稱
  • 將 .btn-blue 替換為 .button-secondary 或 .button-accent
  • 將 .text-lg-blue 替換為 .text-blue-primary 或 .text-blue-emphasis

Auditoria de Segurança

Seguro
v3 • 1/16/2026

Pure 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.

2
Arquivos analisados
547
Linhas analisadas
1
achados
3
Total de auditorias

Fatores de risco

📁 Acesso ao sistema de arquivos (1)
SKILL.md:67-80
Auditado por: claude Ver Histórico de Auditoria →

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
85
Conteúdo
31
Comunidade
100
Segurança
91
Conformidade com especificações

O Que Você Pode Construir

合併前程式碼審查

在合併前驗證 CSS 以確保整個程式碼庫的模式一致性。

技術債務評估

稽核現有 CSS 的深色模式缺口和命名問題，涵蓋整個程式碼庫。

模式強制執行

在程式碼審查過程中驗證貢獻者是否遵循既定的 CSS 模式。

Tente Estes Prompts

基本驗證 
根據既定的模式驗證 styles/components.css 中的 CSS。檢查語意命名、深色模式覆蓋率和 Tailwind @apply 使用情況。
重點檢查 
檢查所有 CSS 檔案中彩色元素缺少深色模式變體的情況。列出每個缺少 dark: 變體的類別，並提供 file:line 參考。
命名審查 
審查 CSS 類別名稱是否符合語意。標記類似 .btn-blue 或 .text-big 的工具類別名稱，並建議語意替代名稱。
完整稽核 
執行完整 CSS 驗證：檢查語意命名、深色模式覆蓋率、@apply 使用情況、測試覆蓋率和文件。提供包含優先級建議的摘要。

Melhores Práticas

  • 指定確切的 CSS 檔案路徑以進行驗證，以獲得更精確的結果
  • 首先審查深色模式問題，因為它們會導致視覺錯誤
  • 在重構前使用驗證報告來了解範圍

Evitar

  • 使用工具類別名稱如 .btn-blue 或 .text-big
  • 背景和文字顏色上缺少 dark: 變體
  • 在標記中散佈 Tailwind 工具類別而非使用 @apply 組合

Perguntas Frequentes

此技能可以修改 CSS 檔案嗎？
不會。此技能僅驗證和報告問題。使用 css-development:refactor 技能可自動修復問題。
它會檢查哪些 CSS 檔案？
它會讀取您指定的任何 CSS 檔案。常見路徑包括 styles/components.css 和特定於元件的樣式表。
它會在瀏覽器中測試渲染後的樣式嗎？
不會。它僅驗證靜態 CSS 模式。瀏覽器渲染測試需要單獨的測試檔案。
我的 CSS 檔案中的資料會被傳送到任何地方嗎？
不會。此技能在本機執行，只會讀取檔案以在您的工作階段中提供驗證回饋。
為什麼某些類別被標記為非語意？
像 .btn-blue 這樣的非語意名稱描述的是外觀而非用途。請使用類似 .button-primary 這樣的名稱來描述元素的用途。
這與 css-development:refactor 有什麼不同？
驗證會審查和報告問題。重構則會實際修改程式碼。先使用驗證來了解範圍，然後使用重構來修復。

Detalhes do Desenvolvedor

Licença

MIT

Repositório

https://github.com/2389-research/claude-plugins/tree/main/css-development/skills/validate

Referência

main

Estrutura de arquivos

📄 SKILL.md