migrate-styled-components-to-vanilla-extract
Installation
SKILL.md
Migrate styled-components to vanilla-extract
The repeatable procedure for converting a workspace's styling from styled-components (the Studio's
legacy styling library) to vanilla-extract.
This skill covers the workflow: what to change, in what order, and how to verify it. The styling
patterns themselves (dynamic theming, variants, keyframes, the && specificity trick,
encapsulation) live in the sanity-plugin-best-practices skill's
styling reference — read it first and defer
to it for pattern details. For monorepo-specific policy (one plugin per PR, never during a transfer,
which plugins are reference implementations), see AGENTS.md →
Migrating plugin styling off styled-components.
Ground rules
- Identical visual output is the goal. This is a refactor, not a redesign — every rule, theme token, and specificity outcome must be preserved. Verify the result against the original rendering before opening the PR.