What problem does it solve? Inline styles in React components cannot receive hover states, focus rings, pseudo-elements, media queries, or animations because they generate no CSS selector. This Skill provides a safe, incremental procedure to move a component's decorative styling from style={{}} objects into a shared stylesheet without breaking layout or duplicating properties. ## Core Features & Use Cases - Split rule for inline vs CSS: Defines exactly which properties move to the stylesheet (pseudo-classes, pseudo-elements, media queries, surfaces, typography) and which stay inline (data-driven values, computed widths, grid positions). - Custom property bridge: Passes dynamic values from React into CSS via style={{ '--estado': color }} and var(--estado) so data still drives visuals while states live in CSS. - Negative-diff verification: Requires deleting replaced inline properties, obsolete mouse listeners, and decorative DOM nodes, then validates with build, contrast checks, and keyboard focus parity. - Use Case: A card component needs a hover shadow and keyboard focus ring. Apply the procedure to add an amx- prefixed class, write the CSS first, bridge the dynamic border color with a custom property, and remove the old onMouseEnter/onMouseLeave handlers. ## Quick Start Migrate the ArmaCard component's hover and focus styles from inline style objects to an amx-prefixed CSS class following this skill's procedure.
