What problem does it solve?
Migrating CSS modules or legacy stylesheets to Tailwind v4 often introduces subtle visual regressions—lost cascade behavior, missing pseudo-states, wrong breakpoints, or arbitrary values that bypass the design token system. This Skill performs a read-only review of such migrations to catch parity and maintainability issues before they ship.
Core Features & Use Cases
- Parity Review: Compares source CSS rules against target Tailwind classes across layout, cascade, specificity, breakpoints, pseudos, data/ARIA selectors, transitions, and motion.
- Token & Variant Enforcement: Flags arbitrary values that should use
@theme tokens, enforces inline-style one-offs for site code, and distinguishes viewport breakpoints from named container variants like @xl/media-root:.
- Structured Findings: Separates behavior regressions from maintainability suggestions, citing the source rule and target class with user-visible impact and the smallest correction.
- Use Case: After converting a header component from CSS modules to Tailwind, ask for a review to verify responsive behavior, hover/focus states, and token usage match the original styles.
Quick Start
Review the header component's CSS-module-to-Tailwind migration and report any parity regressions or token violations.
