migrate-styled-components-to-css-modules

What problem does it solve?

Legacy styled-components can introduce runtime overhead, slower SSR, and larger bundle sizes. This skill provides a comprehensive, step-by-step guide to migrate React components to performant CSS Modules, improving UI performance, simplifying architecture, and aligning with modern best practices.

Core Features & Use Cases

• Component Conversion Workflow: Guides through analyzing existing components, creating CSS Module files, converting component code, and replacing hardcoded values with design tokens.
• Dynamic Styling & Theming: Explains how to handle dynamic styles using data attributes, conditional class names, and CSS variables, as well as converting theming from ThemeProvider to CSS variables.
• Testing & Storybook Updates: Provides instructions for updating tests to focus on behavior rather than implementation details, and ensuring Storybook stories remain functional.
• Use Case: To improve the performance of a critical UI component currently using styled-components, use this skill to systematically convert its styles to CSS Modules, integrate design tokens, and update its tests.

Quick Start

Convert a styled-component button to use CSS Modules and design tokens. Create Button.module.css, then update Button.tsx to use className={styles.button} and data-variant attributes.