skills.rest
metabase
metabaseOFFICIAL
Explore all skills by this author →
Website𝕏@metabaseGitHub

emotion-migrate

Migrate Emotion styled-components to Mantine components with style props and CSS modules.

49.0k|6.8k|Updated Feb 2, 2015
Search Tags:#styled-components#Emotion#mantine#reAct#Migration#CSS modules#Design tokens
One-click install
npx skills add https://github.com/metabase/metabase --skill emotion-migrate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emotion-migrate
Source: https://github.com/metabase/metabase/tree/main/.claude/skills/emotion-migrate
Command: npx skills add https://github.com/metabase/metabase --skill emotion-migrate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converting legacy Emotion styled-components to a modern Mantine-based styling approach is tedious and error-prone, requiring careful decisions about which CSS properties map to style props versus CSS modules while preserving visual fidelity.

Core Features & Use Cases

  • Systematic Migration Workflow: Follows a strict priority order—Mantine style props first, CSS modules only for pseudo-selectors and non-expressible properties, inline styles only for dynamic runtime values.
  • Design Token Enforcement: Snaps hardcoded rem/px values to the nearest Mantine spacing, radius, and font-size tokens, and replaces raw colors with design system variables.
  • Pattern Library: Provides ten concrete before/after migration patterns covering layout containers, dynamic props with cx(), keyframes animations, responsive styles, and shared Emotion styles.
  • Use Case: When removing a .styled.tsx file from a React component, the Skill classifies each styled component, generates the CSS module with camelCase classes, updates the TSX with Mantine components, and verifies zero Emotion imports remain.

Quick Start

Migrate the Emotion styled-components in this component to Mantine style props and CSS modules, then delete the .styled.tsx file.

Frequently Asked Questions about emotion-migrate

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

FAQPage Schema
How do I migrate Emotion styled-components to Mantine?▼

Classify each styled component's CSS properties: those with Mantine style prop equivalents (color, spacing, flexbox) become props on Box, Flex, Stack, or Text components, while pseudo-selectors, box-shadow, and animations go into a CSS module. Then delete the .styled.tsx file and remove all @emotion imports.

When should I use CSS modules instead of Mantine style props?▼

Use CSS modules only for properties Mantine style props cannot express: pseudo-selectors like :hover and :focus, box-shadow, border shorthand, cursor, overflow, animations, transitions, and complex selectors. Everything else should use style props first.

Can I use inline styles when migrating from Emotion to Mantine?▼

Inline styles are allowed only for truly dynamic runtime values such as computed widths, positions, or data-driven colors. All static styles must use Mantine style props or CSS modules to maintain design system consistency.

How do I handle dynamic props in styled-components during migration?▼

Simple conditional values become ternary style props like c={active ? "core-brand" : "text-primary"}. Complex state combinations involving pseudo-selectors use cx() from classnames to compose multiple CSS module classes conditionally.

What naming convention should CSS module classes use?▼

CSS module class names must use camelCase, such as .root, .settingsSection, or .dragHandle. PascalCase and kebab-case are not allowed, and cascading descendant selectors are discouraged in favor of direct class assignment.

Should hardcoded rem values be kept when migrating Emotion styles?▼

No, hardcoded rem and px values should be snapped to the nearest Mantine design token. For example, 1rem becomes the md spacing token, 0.5rem becomes sm, and border-radius values map to Mantine radius tokens.

Related Skills

Explore More Software Engineering Skills→
djankiesdjankies

migrating-from-forwardref

Migrate deprecated forwardRef usage to the ref-as-prop pattern in React 19.

Community
Intermediate
SensLiaoSensLiao

qa-visual-regression

Compare UI screenshots against baselines to detect visual regressions.

Community
Advanced
BerryKuipersBerryKuipers
7

semantic-theming

Enforce semantic theming in Tailwind projects by preventing raw color literals.

Community
Advanced
suwandresuwandre

code-architecture-tailwind-v4-best-practices

Guide Tailwind CSS v4 component development with CSS-first tokens and variant strategies.

Community
Intermediate