How does it handle API differences between Radix and Base UI?

It uses a transformation table to map attributes like 'asChild' to 'render' props and updates component parts such as 'DialogContent' to 'Dialog.Popup' automatically.

What is the primary function of the shadcn-migration skill?

It automates the process of switching the underlying primitives of shadcn/ui components, specifically moving between Radix UI and Base UI while maintaining styling and functionality.

Can I migrate my entire project at once?

The skill follows a 'leaf-first' architecture, recommending that you migrate one component type at a time (e.g., Tooltips first, then Dialogs) to ensure stability and easier testing.

What safety measures are included in the workflow?

The workflow mandates a detection step to confirm current primitives, the creation of a backup git branch, and post-migration validation using specialized agents.

Does this skill help with CSS updates?

Yes, it specifically includes rules to update CSS selectors along with JSX changes, particularly for data-attributes like data-state which change between libraries.

Shadcn Migration Expert

Name: Shadcn Migration Expert
Author: fusengine

byfusengine

•

デザインツール

Facilitates seamless migrations between Radix UI and Base UI primitives for shadcn/ui components with automated API mapping.

This skill provides a comprehensive framework for transitioning shadcn/ui components between Radix UI and Base UI primitives. It utilizes a specialized multi-agent workflow to inventory codebase components, execute precise API transformations, and update CSS selectors. Whether upgrading to newer primitives or standardizing a design system, this skill ensures consistency through mandatory detection steps, backup protocols, and rigorous validation checklists, making complex frontend refactoring predictable and safe.

主な機能

01Automated API mapping for complex components like Dialogs and Popovers

02Integrated CSS selector updates for data-attribute changes

03Multi-agent validation workflow using fuse-ai-pilot tools

044 GitHub stars

05Bi-directional migration between Radix UI and Base UI primitives

06Step-by-step migration ordering from leaf to complex components

ユースケース

01Automating the repetitive aspects of UI library transitions in large React codebases

02Upgrading legacy shadcn/ui implementations to modern Base UI primitives

03Refactoring frontend architectures to consolidate UI primitive dependencies

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents shadcn-migration

For use in Claude.ai and ChatGPT

Download Skill