skills.rest
backstage
backstageOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mui-to-bui-migration

Migrate Backstage UI components and imports from Material-UI to Backstage UI.

34.1k|7.5k|Updated Jan 24, 2020
Search Tags:#ui#migration#imports#mui#backstage#bui#component-replacement
One-click install
npx skills add https://github.com/backstage/backstage --skill mui-to-bui-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mui-to-bui-migration
Source: https://github.com/backstage/backstage/tree/main/docs/.well-known/skills/mui-to-bui-migration
Command: npx skills add https://github.com/backstage/backstage --skill mui-to-bui-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migrates Backstage UI components and imports from Material-UI (MUI) to Backstage UI (BUI) to modernize plugins and ensure consistent UI across projects.

Core Features & Use Cases

  • Import migration: replace @material-ui/core and @material-ui/icons with @backstage/ui equivalents and necessary Remix icons.
  • Pattern guidance: provide migration patterns for styling, layout, and component mappings.
  • Validation guidance: outline steps to verify build, type checks, and runtime rendering after migration.

Quick Start

Identify MUI-based components and imports in your plugin, install @backstage/ui, add the CSS import if required, replace MUI components with their BUI equivalents, and run validation checks.

Frequently Asked Questions about mui-to-bui-migration

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

FAQPage Schema
How do I migrate Backstage UI components from Material-UI to Backstage UI?▼

To migrate Backstage UI components from Material-UI, replace @material-ui/core and @material-ui/icons imports with @backstage/ui equivalents and Remix icons, then apply the provided component replacement and styling patterns across your plugins.

What is the process for replacing MUI imports with BUI equivalents in Backstage plugins?▼

Replacing MUI imports with BUI equivalents involves identifying MUI-based components in your plugin, installing @backstage/ui, adding required CSS imports, and swapping out MUI components for their Backstage UI counterparts.

Can I use this MUI to BUI migration approach for both core components and icons?▼

Yes, this migration approach covers both Material-UI core components and @material-ui/icons, replacing them with @backstage/ui equivalents and necessary Remix icons to modernize your Backstage plugins.

How do I verify a safe transition after migrating Material-UI to Backstage UI?▼

To verify a safe transition after migrating to Backstage UI, follow the outlined validation steps which include checking the build, running type checks, and verifying runtime rendering to ensure consistent UI.

What are the prerequisites for migrating a Backstage plugin from MUI to BUI?▼

Before migrating a Backstage plugin from MUI to BUI, you need to identify existing MUI-based components and imports, ensure you can install @backstage/ui, and prepare to add any required CSS imports.

When should I migrate from Material-UI to Backstage UI in my codebase?▼

You should migrate from Material-UI to Backstage UI when you need to modernize your Backstage plugins and ensure consistent UI across projects that currently rely on MUI core and icons.

Related Skills

Explore More Software Engineering Skills→
transaurustransaurus

mui-to-bui-migration

Migrate Material-UI Backstage UIs to Backstage UI components and CSS modules.

Community
Advanced
jacobduijzerjacobduijzer

mui-to-bui-migration

Convert Material-UI components in Backstage plugins to Backstage UI components.

Community
Intermediate
olafkfreundolafkfreund

mui-to-bui-migration

Migrate Backstage plugins from Material-UI to Backstage UI components.

Community
Intermediate
joabgonzalezjoabgonzalez
7

mui

Standardize Material UI theming and component usage in React projects.

Community
Advanced