fusengine/shadcn-migration
plugins/shadcn-expert/skills/shadcn-migration/SKILL.md
Migration guide between Radix UI and Base UI primitives for shadcn/ui. Covers step-by-step migration, API transformations, and validation checklists. Use when: migrating a project between Radix UI and Base UI primitives, or validating a migration's API transformations.
$ install --global
skillsauthnpx skillsauth add fusengine/agents shadcn-migrationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 16, 2026, 2:54 AM260.8s4 files scanned
SKILL.md
- name:
- shadcn-migration
- description:
- Migration guide between Radix UI and Base UI primitives for shadcn/ui. Covers step-by-step migration, API transformations, and validation checklists. Use when: migrating a project between Radix UI and Base UI primitives, or validating a migration's API transformations.
- shadcn-ui:
- 2.x
- radix-ui:
- 1.x
- base-ui:
- 1.x
- user-invocable:
- true
- allowed-tools:
- Read, Write, Edit, Bash, Glob, Grep, Task
- references:
- references/radix-to-baseui.md, references/baseui-to-radix.md, references/templates/migration-dialog.md
- related-skills:
- shadcn-detection, shadcn-components
shadcn Migration
Agent Workflow (MANDATORY)
Before migration, use TeamCreate to spawn agents:
- fuse-ai-pilot:explore-codebase - Inventory all affected components
- fuse-ai-pilot:research-expert - Verify migration patterns via Context7
After: Run fuse-ai-pilot:sniper for validation.
Overview
| Feature | Description | |---------|-------------| | Radix -> Base UI | Migrate from legacy to new primitives | | Base UI -> Radix | Migrate to established primitives | | API mapping | Complete transformation table | | Validation | Post-migration checklist |
Critical Rules
- ALWAYS run detection before starting migration
- ALWAYS create backup branch before migration
- MIGRATE one component type at a time
- UPDATE CSS selectors along with JSX changes
- RUN tests after each component migration
Architecture
Migration order (leaf components first):
1. Tooltip, Switch, Checkbox (simple)
2. Accordion, Tabs (medium)
3. Dialog, Select, Popover, Menu (complex)
-> See migration-dialog.md for complete example
Pre-Migration Checklist
[ ] Run shadcn-detection to confirm current primitive
[ ] Create backup branch (git checkout -b pre-migration)
[ ] Inventory all affected files (Grep for imports)
[ ] Review component-specific API changes
[ ] Plan migration order (leaf components first)
Migration Workflow
1. DETECT -> Run shadcn-detection skill
2. BACKUP -> Create git branch
3. INVENTORY -> List all affected components
4. TRANSFORM -> Apply API changes per component
5. VALIDATE -> Run tests + sniper check
Key API Changes
| Aspect | Radix | Base UI |
|--------|-------|---------|
| Composition | asChild | render prop |
| Dialog content | DialogContent | Dialog.Popup |
| Dialog overlay | DialogOverlay | Dialog.Backdrop |
| Positioning | Built-in | Separate Positioner |
| Accordion body | AccordionContent | Accordion.Panel |
| Data attrs | data-state="open" | data-[open] |
| Package | Multiple @radix-ui/* | Single @base-ui/react |
Best Practices
DO
- Migrate one component type at a time
- Run tests after each component migration
- Update CSS selectors along with JSX
- Remove unused Radix packages after migration
DON'T
- Migrate all components at once
- Skip detection step
- Leave mixed APIs in production
- Forget to update data-attribute CSS selectors
Reference Guide
Concepts
| Topic | Reference | When to Consult | |-------|-----------|-----------------| | Radix -> Base UI | radix-to-baseui.md | Migrating from Radix | | Base UI -> Radix | baseui-to-radix.md | Migrating to Radix |
Templates
| Template | When to Use | |----------|-------------| | migration-dialog.md | Complete migration example |
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026