migrate-canvas-styled-to-tailwind

What problem does it solve?

This Skill removes runtime Emotion CSS-in-JS from apollo-react canvas components by converting styled components into static Tailwind class usage and well-scoped CSS custom properties, improving runtime performance, maintainability, and deterministic styling.

Core Features & Use Cases

• Pattern-driven migration: Provides four concrete patterns (static classes, CSS vars for dynamic dimensions, cn() for conflicting utility overrides, and minimal inline styles) to cover common styled-component cases.
• End-to-end migration checklist: Guides auditing of *.styles.ts files, extraction of magic numbers to constants, decomposition into focused subcomponents, test updates, keyframe/utility migration to apollo-wind, and final verification steps.
• Practical use cases: Migrate BaseNode and other canvas primitives under packages/apollo-react/src/canvas, ensure Storybook parity, and enforce Tailwind v4 constraints for class literalization.

Quick Start

Open the canvas styles file under packages/apollo-react/src/canvas, pick the appropriate Pattern (A–D), implement static Tailwind classes and CSS vars in the parent via useMemo, replace emotion imports, update tests, and run pnpm build and pnpm test to verify.