mui-to-bui-migration

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

Updated Jun 4, 2026
One-click install
npx skills add https://github.com/olafkfreund/backstage --skill mui-to-bui-migration-olafkfreund
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mui-to-bui-migration
Source: https://github.com/olafkfreund/backstage/tree/main/.agents/skills/mui-to-bui-migration
Command: npx skills add https://github.com/olafkfreund/backstage --skill mui-to-bui-migration-olafkfreund

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to migrate Backstage plugins from Material-UI (MUI) to Backstage UI (BUI), addressing the need for a seamless transition and efficient development workflow.

Core Features & Use Cases

  • MUI to BUI Migration: Offers a step-by-step process for migrating components, updating imports, and converting MUI components to their BUI equivalents.
  • Layout Components: Detailed documentation on equivalent BUI layout components for a consistent UI.
  • UI Components: In-depth guide on converting MUI UI components to BUI components.
  • Use Case: For developers looking to modernize their Backstage plugins, this Skill simplifies the migration process by providing a clear path to adopting BUI components.

Quick Start

Run the mui-to-bui-migration skill to begin the migration process for your Backstage plugin.

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 plugins from Material-UI to Backstage UI?▼

Migrating Backstage plugins from MUI to BUI involves updating imports and converting Material-UI components to their Backstage UI equivalents. This structured process includes component conversions and styling changes to ensure a smooth transition and maintain UI consistency across the plugin.

What is the difference between MUI and BUI for Backstage plugin development?▼

The difference between MUI and BUI in Backstage plugin development centers on component standardization. BUI provides equivalent layout and UI components specifically designed for Backstage, ensuring a unified interface, whereas MUI relies on generic Material Design components that require manual styling alignment.

What are the equivalent Backstage UI layout components for Material-UI?▼

Equivalent Backstage UI layout components for Material-UI are mapped within the migration guide. It provides detailed documentation on converting MUI layout components to their BUI equivalents, ensuring developers maintain a consistent UI structure during the transition.

How to update imports when transitioning from MUI to BUI in Backstage?▼

Updating imports when transitioning from MUI to BUI in Backstage requires replacing Material-UI import paths with Backstage UI equivalents. The migration process provides a step-by-step guide for accurately updating these imports alongside the corresponding component conversions.

Do I need to manually convert styling when migrating Backstage plugins to BUI?▼

Yes, you need to manually convert styling when migrating Backstage plugins to BUI. The migration process includes specific styling changes required to align Material-UI components with Backstage UI standards, following best practices for a smooth transition.