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.