What problem does it solve?
It prevents visible regressions when migrating a Click UI component from styled-components to CSS Modules by enforcing a byte-for-byte, visual regression–verified workflow.
Core Features & Use Cases
- Mechanical, scope-limited migration: Refactors styling only, preserving existing (even incorrect) behavior and DOM structure to keep visual diffs credible.
- Visual regression baseline + parity enforcement: Captures a baseline from the styled-components rendering and requires CSS Modules snapshots to pass without regeneration.
- Token-faithful CSS Modules implementation: Translates theme token usage into the correct
--click-* CSS variables and mirrors selector/cascade behavior to match styled-components output.
- Deterministic component refactor pattern: Replaces styled-components with
cva + cn, preserves className merging, preserves prop/attribute spread order, and keeps forwardRef and displayName behavior.
Quick Start
Use this skill to migrate a single component (one at a time) by first creating a visual regression baseline on the existing styled-components stories and spec, then performing the CSS Modules + cva/cn refactor and verifying that yarn test:visual passes with zero snapshot changes.
