component-css-modules-migration

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.