New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Migrate Radix To Base

by TheOrcDev in TheOrcDev/youtube-to-blog

Migrates React projects and components from Radix UI to Base UI.

MITAuto-check passedFrontend & Design

Install Migrate Radix To Base

skills CLI
$ npx skills add TheOrcDev/youtube-to-blog --skill migrate-radix-to-base -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install TheOrcDev/youtube-to-blog migrate-radix-to-base --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/TheOrcDev/youtube-to-blog.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/migrate-radix-to-base .claude/skills/migrate-radix-to-base && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
migrate-radix-to-base
GitHub stars
180
Used in
2 other repos
Token cost
~2.3k tokens
SKILL.md length
1,039 words
Files
10
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Migrates React projects and components from Radix UI to Base UI.

  • Works in 5 steps: npx shadcn@latest info --json (or the… → Detect the package manager… → Require a clean git tree; work on a… → …
  • Asked to migrate from radix
  • SKILL.md covers Preflight (always), Strategy: golden pair first,…, Modes and Hard rules, plus 1 more section
  • Calls npx and git; reaches ui.shadcn.com

What it does

Migrate Radix To Base is an agent skill from TheOrcDev/youtube-to-blog. Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files (for example `class-mapping.md`, `consumer-props.md` and `disclosure.md`).

It sits in Frontend & Design, covering Design systems. It works with Radix UI, shadcn/ui and React. The repository describes itself as: Simple YouTube url to MDX blog app. The licence is MIT.

When your agent uses it

  • Asked to migrate from radix
  • Move to base-ui
  • Convert radix primitives
  • Switch a shadcn projects base library

Example prompts

  • “s base library. Handles single components (”
  • “Use the migrate-radix-to-base skill to migrate React projects and components from Radix UI to Base UI”
  • “/migrate-radix-to-base”

Requirements

  • Node.js

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. npx shadcn@latest info --json (or the project's runner): gives the
  2. Detect the package manager (packageManager field / lockfile
  3. Require a clean git tree; work on a branch; one commit per component.
  4. Baseline check BEFORE touching dependencies: run the project's
  5. Install @base-ui/react alongside radix. Radix packages are removed only

What it can do on your machine

Read from SKILL.md and the folder at commit 28fcc3f. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx
    • git

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • ui.shadcn.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Migrate Radix To Base loads about 2.3k tokens when it runs. Until then it costs about 70 tokens; SKILL.md has 1,039 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~70
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from TheOrcDev/youtube-to-blog at commit 28fcc3f, republished under its MIT licence (© TheOrcDev). 1,039 words, ~2,328 tokens.

Download SKILL.mdSave it as .claude/skills/migrate-radix-to-base/SKILL.md (or your agent's skills folder). This skill also uses 9 other files; get the full folder from GitHub.
name
migrate-radix-to-base
description
Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.

Radix UI -> Base UI migration

You migrate shadcn wrappers, hand-rolled radix compositions, and their consumers to @base-ui/react, keeping the project buildable at every step. Be precise; never guess a mapping. When a prop or part is not in these reference files, check node_modules/@base-ui/react/**/*.d.ts before transforming, and record gaps in the report.

Preflight (always)

  1. npx shadcn@latest info --json (or the project's runner): gives the current base, STYLE (e.g. radix-lyra), tailwind version, aliases, installed components, and package manager. Trust it over inference.
  2. Detect the package manager (packageManager field / lockfile: pnpm-lock.yaml, bun.lock, yarn.lock, package-lock.json) and use IT for every install. Never leave a stale lockfile.
  3. Require a clean git tree; work on a branch; one commit per component.
  4. Baseline check BEFORE touching dependencies: run the project's typecheck/build so pre-existing failures are never attributed to you.
  5. Install @base-ui/react alongside radix. Radix packages are removed only after the LAST component is migrated (both coexist fine).

Strategy: golden pair first, transformation engine second

  • Golden pair via the CLI (preferred). If the project is shadcn with a known style (radix-<style>), the shadcn CLI itself is the golden-pair executor:
    1. Classify each ui wrapper FIRST: diff the user's file against its stock origin, using the components.json style VERBATIM in the URL (https://ui.shadcn.com/r/styles/<style>/<component>.json, files[0].content). This works for prefixed styles (radix-nova) AND legacy unprefixed ones (new-york, new-york-v4, default), which are all still served.
    2. WHOLE-PROJECT mode: flip components.json style radix-<style> -> base-<style> now. PROGRESSIVE mode: do NOT flip yet (the project is still mostly radix; the flip happens once, after the last component); fetch base variants directly by URL instead (https://ui.shadcn.com/r/styles/base-<style>/<component>.json).
    3. PRISTINE wrappers, whole-project mode: shadcn add <component> --overwrite delivers the base variant with the project's exact icon/font/preset resolution. Never bulk --all --overwrite; go component by component, or you drown in unrelated registry version drift. PROGRESSIVE mode: never use --overwrite (it destroys the original that consumers still import); write the fetched base variant content to <component>-base.tsx instead.
    4. CUSTOMIZED wrappers: fetch the base variant and replay the user's diff onto it (their customizations must SURVIVE; --overwrite would destroy them). Mechanical implementation that works at scale: git merge-file user.tsx radix-golden.tsx base-golden.tsx (three-way merge, radix golden as ancestor) auto-resolves most files; hand-resolve conflicts with the reference tables.
    5. MANDATORY leftover sweep on EVERY golden-pair file, including ones that merged "clean": grep -n "radix-ui\|@radix-ui\|IconPlaceholder" per file. The registry sometimes reorders functions between variants, which makes three-way merges report zero conflicts while leaving stale radix hunks in place. A clean merge is NOT proof of a clean file. This is more reliable than reconstructing transforms; use it whenever the pair exists. Consumer/app code has no CLI mechanism: always hand-migrate it against consumer-props.md.
  • Legacy styles (new-york, new-york-v4, default): classification only, no replay. These have no base counterpart (there is no base-new-york), and retargeting onto a base-<style> variant would restyle the user's app. Use the radix golden ONLY to detect customizations, then run the transformation engine on the user's OWN file: rewire primitives, keep their exact classes, apply class-mapping renames. Their look stays theirs. At the end of a legacy whole-project migration, FLAG (do not fix): the style name still reads as radix to the CLI, so future shadcn add will deliver radix variants; the user decides whether to switch style or add manually.
  • Transformation engine (fallback). Hand-rolled radix code, non-shadcn projects, unknown styles: transform using universal-patterns.md (imports in BOTH forms: radix-ui and @radix-ui/react-*; asChild->render with the worked example; Portal>Positioner>Popup; the positioner FORWARD rule; part renames), the per-family props tables (overlays.md, menus.md, form-controls.md, disclosure.md, display-misc.md), class-mapping.md for data-attribute/CSS-var rewrites, and wrapper-shapes.md for exact target shapes (tooltip arrow, SubContent defaults, select anatomy).
Show full SKILL.md (439 more words)Show less

Modes

Progressive (default). "Migrate accordion" = one component, strangler-fig:

  1. Detect in-progress state first: an existing <component>-base.tsx, consumers split between old/new imports. The files ARE the state; resume, never restart.
  2. If the component imports other ui wrappers still on radix (select -> button), STOP and recommend migrating those first, bottom-up.
  3. Write the migrated version to <component>-base.tsx (original untouched; golden-pair content fetched by URL, or transformed by hand, per the strategy above); typecheck. Repoint consumers ONE AT A TIME (imports + the call-site props in consumer-props.md); typecheck each. When no consumer imports the original: delete it, rename -base -> original, flip imports back, final check, commit. When the LAST radix wrapper in the project is finalized, flip components.json to base-<style> and remove radix deps.

Whole project (only when explicitly asked): same per-component work in dependency order (leaf/shared wrappers like button and label first). After wrappers, sweep ALL app code against consumer-props.md - the call-site break surface is much larger than asChild. Then remove radix deps, install, full build.

Hard rules

  • NEVER touch non-radix libraries or their wrappers: cmdk (command), vaul (drawer), sonner, input-otp, react-day-picker (calendar), recharts (chart). Report them as intentionally untouched.
  • No Base UI counterpart: AspectRatio -> CSS aspect-ratio div; Label -> native <label>; VisuallyHidden -> sr-only; Direction -> Direction Provider (direction prop, not dir). Popover Anchor and NavigationMenu Indicator have no equivalent: inert passthrough + flag.
  • button.tsx migrates to the REAL @base-ui/react/button primitive, never a hand-rolled useRender wrapper.
  • Behavior deltas are FLAGGED, never silently patched (tabs manual activation, menu items not closing on click, nav-menu 50ms delay). The target is idiomatic Base UI matching the shadcn base registry.
  • Honest reporting: skipped/reverted files are listed as flagged, never as migrated. Pre-existing failures are named as pre-existing.

Verify and report

Typecheck per file, build per batch, full build at the end vs the baseline.

Reports live in a .migration/ directory at the project root, ONE FILE PER COMPONENT: .migration/<component>.md (e.g. .migration/accordion.md). Rules:

  • Each run writes (or fully overwrites) the file for each component it migrated. Re-running a component replaces its report; never touch other components' files.
  • A multi-component run ("migrate alert-dialog and dropdown-menu") writes one file per component, each self-contained; shared consumer-sweep notes are repeated in every affected file.
  • Whole-project mode writes the per-component files plus .migration/project.md (dependency swap, app-code sweep summary, final build result).
  • There is NO index file. Migration status is derived from disk, not maintained: scan the project's ui directory (the ui alias from shadcn info, e.g. components/ui or src/components/ui) for remaining radix imports when asked "what's left". End every run's summary with that derived count ("N wrappers remain on Radix").

Each .migration/<component>.md uses EXACTLY this structure (it is documented publicly; reports must match it):

md
# <component>

<date, strategy used (golden pair via CLI / merge / engine), one-line verdict>

## Changed

<every file touched, with what changed and why; include file:line for
anything notable. Confirm the leftover scan is clean:
grep -n "radix-ui\|@radix-ui" on this component's files>

## Left alone

<files that look related but were intentionally not touched, with the reason
(cmdk/vaul/sonner are not radix; unrelated drift; etc.)>

## Behavior changes

<differences that compile fine but act differently; flagged, never patched
(tabs activation, menu close-on-click, delays...). Empty section if none>

## Verify by hand

<short manual QA checklist for this primitive family: focus return on
dialogs, keyboard nav + typeahead on menus/select, tooltip delay feel,
slider commit events. Concrete steps, one minute of clicking>

© TheOrcDev, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 9 other files in .agents/skills/migrate-radix-to-base of TheOrcDev/youtube-to-blog.

  • SKILL.md
  • class-mapping.md
  • consumer-props.md
  • disclosure.md
  • display-misc.md
  • form-controls.md
  • menus.md
  • overlays.md
  • universal-patterns.md
  • wrapper-shapes.md

Open the folder on GitHubat commit 28fcc3f

Used in 2 other repositories

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in TheOrcDev/youtube-to-blog, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Migrate Radix To Base next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Migrate Radix To Base compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Migrate Radix To Base this skillTheOrcDev/youtube-to-blog1802 repos~2.3kAutomated safety check: PassMIT
Ss Learnbitjaru/styleseed972—~1.3kAutomated safety check: PassMIT
Styleseedbitjaru/styleseed972—~1.1kAutomated safety check: PassMIT
UI Design Systemtry-works/role-model118—~5kAutomated safety check: PassMIT
Shadcn Tailwind UILiarMTTT/TavernWeave150—~1.7kAutomated safety check: PassCustom licence
Shadcn UIeinverne/dotfiles121—~6.2kAutomated safety check: PassMIT

Similar skills

  • Ss Learn

    bitjaru/styleseed

    Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…

    972 GitHub stars~1.3k tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed

  • Styleseed

    bitjaru/styleseed

    Build, improve, or inspect UI with StyleSeed. An agent skill from bitjaru/styleseed.

    972 GitHub stars~1.1k tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed

  • UI Design System

    try-works/role-model

    React UI component systems with TailwindCSS + Radix + shadcn/ui.

    118 GitHub stars~5k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Shadcn Tailwind UI

    LiarMTTT/TavernWeave

    Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.

    150 GitHub stars~1.7k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Shadcn UI

    einverne/dotfiles

    Guide for implementing shadcn/ui - a collection of beautifully-designed, accessible UI components built with Radix UI and Tailwind CSS.

    121 GitHub stars~6.2k tokensUpdated 29 days ago
    Frontend & DesignAuto-check passed

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

Works with

Categories

Questions about Migrate Radix To Base

What does Migrate Radix To Base do?

Migrates React projects and components from Radix UI to Base UI. Migrate Radix To Base is an agent skill from TheOrcDev/youtube-to-blog. Migrates React projects and components from Radix UI to Base UI.

When should I use Migrate Radix To Base?

Migrate Radix To Base fits situations like: asked to migrate from radix; move to base-ui; convert radix primitives; switch a shadcn projects base library.

How do I install Migrate Radix To Base in Claude Code?

Run `npx skills add TheOrcDev/youtube-to-blog --skill migrate-radix-to-base -a claude-code`. Or copy the skill folder (.agents/skills/migrate-radix-to-base in TheOrcDev/youtube-to-blog) into .claude/skills/migrate-radix-to-base in your project. Claude Code loads it when a task matches its description.

How do I install Migrate Radix To Base in Codex?

Run `npx skills add TheOrcDev/youtube-to-blog --skill migrate-radix-to-base -a codex`. Or copy the skill folder (.agents/skills/migrate-radix-to-base in TheOrcDev/youtube-to-blog) into .agents/skills/migrate-radix-to-base in your project. Codex loads it when a task matches its description.

Can I use Migrate Radix To Base in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add TheOrcDev/youtube-to-blog --skill migrate-radix-to-base -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/migrate-radix-to-base, .gemini/skills/migrate-radix-to-base, .github/skills/migrate-radix-to-base and .opencode/skills/migrate-radix-to-base in your project.

What does Migrate Radix To Base need to run?

Going by SKILL.md and its folder, Migrate Radix To Base needs the command-line tools its instructions call (npx and git). Our summary lists: Node.js.

Does Migrate Radix To Base access the network?

SKILL.md names 1 domain. In commands or code: ui.shadcn.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Migrate Radix To Base safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Migrate Radix To Base use?

Migrate Radix To Base is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Migrate Radix To Base use?

About 2.3k tokens (SKILL.md is roughly 9.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Migrate Radix To Base?

Skills that share tags, products or a category with Migrate Radix To Base: Ss Learn (bitjaru/styleseed, 972 stars), Styleseed (bitjaru/styleseed, 972 stars), UI Design System (try-works/role-model, 118 stars) and Shadcn Tailwind UI (LiarMTTT/TavernWeave, 150 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Migrate Radix To Base?

TheOrcDev (a GitHub user) maintains it in TheOrcDev/youtube-to-blog, which has 180 GitHub stars. The repository was last updated on September 3, 2026.

Source: TheOrcDev/youtube-to-blog on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.