docs(skill): codify prop spread order and local CSS var patterns

[DreaminDani]

Summary

Two refinements to the CSS Modules migration skill, each in its own commit for easy review:

1. Prop spread order rule — codifies that {...props} must keep its original position relative to hardcoded attributes (aria-disabled, tabIndex, onClick). Reversing the order silently strips consumer overrides, and TypeScript doesn't catch it because HTMLAttributes<...> admits those props. Caught post-merge on CardPrimary (chore(CardPrimary): migrate to CSS Modules with visual regression baseline #1038) and CardHorizontal (chore(CardHorizontal): migrate to CSS Modules with visual regression baseline #1039).

2. Local CSS variable aliasing pattern — codifies the pattern adopted in CardHorizontal (chore(CardHorizontal): migrate to CSS Modules with visual regression baseline #1039) where color/theme variants alias long global tokens (--click-card-horizontal-default-color-background-hover) to short local custom properties (--card-bg-hover) inside the variant block, then write state rules once on the base class. Avoids exploding the CSS module into one state rule per variant.

Test plan

• Skim the rendered SKILL.md and confirm both rules read clearly
• Apply the prop-spread rule mentally against the next migration in the queue

---

Note

Low Risk
Documentation-only change to an internal migration skill; no runtime or library code is modified.

Overview
Updates the component CSS Modules migration skill (.claude/skills/component-css-modules-migration/SKILL.md) with two procedural rules learned from post-merge fixes on CardPrimary and CardHorizontal.

Commit 2 (TSX): Migrators must keep {...props} in the same position relative to hardcoded attributes as in the styled-components JSX—typically hardcoded attrs first, then spread, then className={cn(...)} last. Reversing spread order can silently override consumer props like tabIndex without TypeScript errors.

Commit 2 (CSS module): For theme/color variants that fan out across many states, alias long design tokens to local custom properties inside each variant class and write :hover / :active / disabled rules once on the base class via those short vars (pattern documented with CardHorizontal.module.css as the reference).

Common pitfalls: Adds a bullet mirroring the prop-spread-order failure mode, with PR references #1038 and #1039.

^{Reviewed by Cursor Bugbot for commit 971c5af. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 971c5af

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-7mfzk174m-clickhouse.vercel.app

Built from commit: 0b04dce856261e97fe7287613acd7252a0be8650