tailwind-to-stylex
Installation
SKILL.md
Tailwind v4 → StyleX migration
Migrate a Tailwind CSS v4 codebase to StyleX so the site renders pixel-identical while gaining typed, compiler-checked styles. Work the seven phases in order; Tailwind and StyleX coexist until the final teardown. Verification — screenshots plus computed styles — decides whether work passed, never judgment.
Non-negotiables (every phase)
- Ground truth: resolve every utility from the project's own compiled Tailwind CSS captured in P0, never from memorized tables. Models hallucinate v3 values under v4 (ring width/color, shadow scale renames, oklch palette,
color-mix()opacity modifiers). A class missing from the ground-truth CSS gets rendered once and read via computed style, then flagged in the report. - Literal-then-lift: P4 translates values literally so fidelity is checkable; P5 lifts to idiomatic StyleX afterward. Lift only in P5.
- Escape hatch: exactly three sanctioned plain-CSS homes —
reset.css(P3), the token bridge variables (P2), andmarkdown.cssfor subtrees StyleX cannot style (rendered markdown/prose, third-party DOM, container queries). Each consumes thedefineVarsCSS variables. In Astro, scoped<style>blocks are a fourth first-class home for.astrotemplates. Plain CSS anywhere else is a defect to fix. - Diff-clean gate: a unit of work is done only when verification reports no visual or computed-style difference, or every difference is explained in the report and accepted. Never commit past an unexplained diff.
P0 — Baseline
Load references/verification.md now.