2389-research-css-development_skill

Overview

This skill reviews existing CSS and Tailwind styles for consistency with established patterns and returns a clear, actionable validation report. It focuses on semantic naming, Tailwind @apply composition, dark mode coverage, test coverage, composition opportunities, and inline documentation. Use it to audit styles before merges or refactors.

How this skill works

I load the project's CSS and component files, scan class definitions and markup for utility usage, and validate patterns against the configured rules. I check semantic class names, detect repeated utility combinations that should use @apply, verify dark: variant coverage for color-related styles, and inspect tests and documentation. Results are compiled into a Todo-style checklist and a prioritized findings report with file:line references and concrete suggestions.

When to use it

• Before merging CSS or component style changes
• During a component or UI refactor to identify issues first
• When auditing a codebase for consistency with design system patterns
• To confirm dark mode support and accessibility coverage
• When adding Tailwind utilities to ensure proper composition

Best practices

• Prefer descriptive semantic names (e.g., .button-primary, .card-header) over utility- or color-based names (.btn-blue).
• Compose repeated Tailwind utilities into semantic classes using @apply instead of scattering utilities in markup.
• Add dark: variants for backgrounds, text, borders, and interactive states where color affects legibility.
• Write small static CSS tests and component rendering tests that assert class presence and behavior.
• Document each component class with a short usage comment and an example markup snippet.

Example use cases

• Run a pre-merge audit to catch missing dark mode variants and improper utility usage.
• Scan a legacy styles folder to identify classes that should be refactored into base + variant composition.
• Generate a checklist of missing static and rendering tests for critical UI classes.
• Identify repeated utility combinations that can be extracted into a shared .card or .button base class.
• Produce a prioritized report listing file:line locations and suggested fixes for maintainers.