skills.rest
UiPath
UiPathOFFICIAL
Explore all skills by this author →
WebsiteGitHub

migrate-canvas-styled-to-tailwind

Migrate Emotion-styled canvas components to static Tailwind classes.

18|7|Updated Nov 3, 2025
Search Tags:#react#migration#canvas#tailwind#emotion#css-in-js#apollo-react
One-click install
npx skills add https://github.com/UiPath/apollo-ui --skill migrate-canvas-styled-to-tailwind
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-canvas-styled-to-tailwind
Source: https://github.com/UiPath/apollo-ui/tree/main/.claude/skills/migrate-canvas-styled-to-tailwind
Command: npx skills add https://github.com/UiPath/apollo-ui --skill migrate-canvas-styled-to-tailwind

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about migrate-canvas-styled-to-tailwind

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate Emotion styled components to Tailwind CSS in React?▼

To migrate Emotion styled components to Tailwind, convert styled elements into static utility classes and use useMemo for CSS custom properties. Replace emotion imports, move keyframes to tailwind.utilities, and restrict cn() to override cases to ensure deterministic styling.

What is the best way to convert CSS-in-JS keyframes to Tailwind utilities?▼

The best way to convert CSS-in-JS keyframes to Tailwind is moving them into tailwind.utilities. This transitions runtime emotion keyframes into static utilities, improving performance and maintaining animation consistency across React components.

How do I handle dynamic styling when migrating from Emotion to Tailwind?▼

Handle dynamic styling during Emotion to Tailwind migration by applying Pattern B: use useMemo to generate CSS custom properties for dynamic dimensions. Keep static styles in Tailwind classes and inject the CSS variables via inline styles on the parent component.

Does converting Emotion to Tailwind require updating React component tests?▼

Yes, converting Emotion to Tailwind requires updating React component tests. You must adjust test assertions to match the new static class names and CSS custom properties, then run pnpm build and pnpm test to ensure lint and builds pass.

When should I use the cn() utility function in Tailwind migrations?▼

Use the cn() utility function in Tailwind migrations only for conflicting utility override cases. Limiting cn() to conditional class overrides prevents unnecessary runtime logic and ensures styling remains static and deterministic across the migrated React components.

Related Skills

Explore More Software Engineering Skills→
dtyqdtyq
5.0k

antd-style-to-tailwind

Translate Ant Design CSS-in-JS patterns to Tailwind utilities.

Official
Advanced
UiPathUiPath
18

apollo-install

Clone the apollo-ui repository, install dependencies, build packages, and start Storybook on port 6006.

Official
Intermediate
PolicyEnginePolicyEngine

policyengine-tailwind-shadcn

Bridge PolicyEngine design tokens to Tailwind v4 utilities via @theme inline blocks.

Official
Intermediate
t-stringst-strings

Frontend CSS

Enforce frontend CSS standards for consistent styling and maintainability.

Official
Basic