chore(claude): add component-css-modules-migration skill

[DreaminDani]

Why?

Captures the two-commit, byte-for-byte-snapshot pattern executed in #1034 (an example CSS Modules migration, ButtonGroup) so the same procedure can be applied mechanically to the remaining components in the migration list.

The skill lives at .claude/skills/component-css-modules-migration/SKILL.md and is committed to the repo so every contributor (and every Claude session) picks it up automatically.

What's in the skill

• Hard scope rule. The migration commit is a pure styling refactor — no a11y refinements, type tightening, consumer updates, or CSS correctness fixes bundled in. The visual regression tests are credible only because the migration commit changes nothing visible.
• Two-commit pattern. Commit 1 captures the styled-components rendering as snapshots; commit 2 swaps styling to CSS Modules + cva/cn while all snapshots stay byte-for-byte identical. A prep commit for tooling fixes goes first if needed.
• Snapshot generation rules. Always fresh via yarn test:visual:update (Docker-backed, so -chromium-linux.png files work on any host OS). Never cherry-pick PNGs from prior PRs.
• CSS Module file rules. One CSS variable per theme.click.* reference, match the original selectors exactly (no "improvements"), match cascade order, BEM naming per stylelint.config.js.
• Component rewrite rules. Preserve every DOM attribute (including redundant ones like role="button"), drop transient props, preserve className passthrough via cn() on both wrapper and per-option levels, preserve forwardRef if the original has it.
• Exact changeset phrasing. patch bump with body migration of <Name> from styled-components to css modules. no behavior change. — no extra words. Scales mechanically across dozens of migration PRs.
• Common pitfalls from chore(ButtonGroup): migrate to CSS Modules with visual regression baseline #1034. Scope creep in drafts, --update-snapshots mode requirement, spread-after-className clobbering variants, missing forwardRef, cherry-picking PNGs, pinning versions down instead of bumping up.
• Checklist for PR review.

Tickets?

N/A

Contribution checklist?

• You've done enough research before writing
• You have reviewed the PR
• The commit messages are detailed
• The build command runs locally (nothing in src/ changed)
• Assets or static content are linked and stored in the project
• For documentation, guides or references, you've tested the commands — the skill was derived from the procedure actually executed in chore(ButtonGroup): migrate to CSS Modules with visual regression baseline #1034 and references existing yarn scripts and files.

Preview?

N/A — the change is a single markdown file under .claude/skills/.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 610b60e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[workflow-authentication-public]

Storybook Preview Deployed

✅ Preview URL: https://click-5c4zj052s-clickhouse.vercel.app

Built from commit: 1b7da891b01edc19db9f1654c978846aa68ff559

[hoorayimhelping]

Might want to make sure we include examples of the widening for other types than just Button

[DreaminDani]

I'll be sure to update the skill as I go. I'll maybe babysit it a bit for the next few migrations.