# Validate CSS Quality

CSS changes can drift from naming, dark mode, and test standards. This skill guides Claude, Codex, and Claude Code through a structured stylesheet review.

## Install

```bash
npx skillstore add 2389-research/css-development-validate
```

## Metadata

- - Status: approved
- - Slug: 2389-research-css-development-validate
- - Version: 1.0.0
- - Author: 2389-research
- - GitHub username: 2389-research
- - License: MIT
- - Repository: https://github.com/2389-research/claude-plugins/tree/main/css-development/skills/validate
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: low
- - Quality score: 79
- - Quality tier: bronze
- - Public page: https://skillstore.pages.dev/skills/2389-research-css-development-validate
- - Manifest: https://skillstore.pages.dev/api/skills/2389-research-css-development-validate/manifest

## Capabilities

- Reviews CSS class names for semantic and descriptive naming.
- Checks whether Tailwind utilities are composed with @apply.
- Identifies missing dark mode variants on colored and interactive styles.
- Looks for repeated style patterns that can be extracted into base classes.
- Checks for static CSS tests and component rendering tests.
- Produces a structured CSS validation report with file and line references.

## Use Cases

- Pre-merge stylesheet review: Review changed CSS before merging to catch naming, dark mode, and test coverage issues.
- Design system consistency audit: Check whether component classes follow shared naming and composition patterns across a project.
- Refactor planning for CSS debt: Identify repeated styles, missing documentation, and classes that should be renamed before a cleanup pass.

## Prompt Templates

### Review one stylesheet

```
Review this CSS file for semantic naming, Tailwind @apply usage, dark mode coverage, tests, and documentation.
```

### Audit component styles

```
Audit these component styles and related component files. Report naming issues, repeated utilities, missing dark mode variants, and missing tests.
```

### Prepare for refactoring

```
Validate the current CSS and identify refactor opportunities. Prioritize repeated patterns, unclear class names, and missing coverage.
```

### Gate a pull request

```
Review this CSS change as a pull request gate. Provide pass or fail guidance with file references, severity, and recommended fixes.
```

## Limitations

- It is guidance only and does not include executable validation scripts.
- It depends on the assistant reading the relevant project files correctly.
- It focuses on CSS architecture patterns, not full accessibility testing.
- It assumes Tailwind and semantic component class patterns are desired.

## Best Practices

- Review CSS with the related component files so class usage is clear.
- Ask for file and line references for every reported issue.
- Prioritize dark mode and test gaps before documentation cleanup.

## Anti Patterns

- Do not use it as a replacement for visual regression testing.
- Do not apply Tailwind @apply guidance to projects that intentionally avoid Tailwind.
- Do not rename classes without checking component usage and tests.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-27T16:34:43.272\+00:00
- - Summary: Static analysis reported command execution, weak cryptography, and network reconnaissance patterns, but review found these are Markdown backticks, prose, and CSS example snippets. No executable scripts, network behavior, prompt injection, credential access, or malicious intent were found in SKILL.md. The skill is safe to publish with a low risk note for false-positive static detections.

## Stats

- - Views: 142
- - Downloads: 13
- - Favorites: 0
- - Popularity score: 0