skills.rest
videojs
videojsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

review-tailwind-migration

Review CSS-to-Tailwind v4 migrations for parity, tokens, variants, and regressions.

931|91|Updated Aug 13, 2025
Search Tags:#CSS#Tailwind#Frontend#parity#Migration#Code review#Design tokens
One-click install
npx skills add https://github.com/videojs/v10 --skill review-tailwind-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-tailwind-migration
Source: https://github.com/videojs/v10/tree/main/.agents/skills/review-tailwind-migration
Command: npx skills add https://github.com/videojs/v10 --skill review-tailwind-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about review-tailwind-migration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review a CSS to Tailwind migration for regressions?▼

Compare the original CSS rules against the target Tailwind classes across layout, cascade, specificity, breakpoints, pseudo-states, and data or ARIA selectors. Inspect the rendered result across affected states and breakpoints, then separate behavior regressions from maintainability suggestions.

What should I check when migrating to Tailwind v4?▼

Verify colors, spacing, radii, and fonts use @theme tokens instead of arbitrary values, pseudos like hover and focus-visible are preserved, and responsive and motion behavior matches the source. Also confirm breakpoints and named container variants are not conflated.

Does this review skill modify my code?▼

No, it is read-only. It reviews the migration and reports findings that cite the source rule and target class, explain user-visible impact, and suggest the smallest correction, but it never edits code itself.

How should non-token one-off values be handled in Tailwind v4 site code?▼

Site code should avoid arbitrary-value classes; one-offs use inline styles instead. When a non-token value needs a variant, use an inline CSS custom-property bridge, and flag repeated values for @theme or @utility entries.

What is the difference between viewport breakpoints and container variants in Tailwind?▼

Viewport breakpoints like md: respond to the browser window size, while named container variants such as @xl/media-root: respond to a specific container's size. A migration review must confirm these are not conflated, since swapping them changes responsive behavior.

Related Skills

Explore More Software Engineering Skills→
TimeKastTimeKast

kb-tailwind-v4

Standardize Tailwind CSS v4 utility generation for Next.js CSS-first @theme token systems.

Official
Intermediate
vaadinvaadin
11

theming

Guide Vaadin 25 theme selection and custom stylesheet implementation.

Official
Intermediate
bacchus-labsbacchus-labs
4

visual-regression-testing

Automate visual regression testing by comparing screenshots against baselines.

Official
Advanced
baasith6baasith6

converting-css-to-tailwind

Convert CSS selectors, properties, and rules to Tailwind CSS utility classes.

Community
Intermediate