inline-style-to-class

What problem does it solve?

This Skill removes inline styling clutter by converting inline style attributes, JSX style objects, or <style> blocks into a single reusable CSS class that uses CSS variables for consistent theming and easier maintenance.

Core Features & Use Cases

• Migrate inline styles to a named class: Converts style="...", style={{...}}, and <style>...</style> declarations into one class appended to your project stylesheet.
• Tokenize values with CSS variables: Replaces concrete literals (colors, lengths, keywords, etc.) with var(--...) references, reusing existing variables when possible and creating new ones in a suitable tokens/variables/:root location.
• Works with CSS, SCSS, and Sass-indented syntax: Detects stylesheet flavor and indentation so the generated class and variable declarations match your codebase conventions.

Quick Start

Use inline-style-to-class to convert the inline styles in your React component into a single named class and automatically append it to your stylesheet with corresponding CSS variables.