skills.rest
transaurus
transaurusCOMMUNITY
Explore all skills by this author →
GitHub

mui-to-bui-migration

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

Updated Mar 27, 2026
Search Tags:#migration#mui#css-modules#frontend-architecture#component-mapping#ui-refactor#backstage-ui
One-click install
npx skills add https://github.com/transaurus/staging-backstage-backstage --skill mui-to-bui-migration-transaurus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mui-to-bui-migration
Source: https://github.com/transaurus/staging-backstage-backstage/tree/main/docs/.well-known/skills/mui-to-bui-migration
Command: npx skills add https://github.com/transaurus/staging-backstage-backstage --skill mui-to-bui-migration-transaurus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Backstage projects that rely on Material-UI can face inconsistencies and maintenance overhead when upgrading UI patterns. This migration guide provides a structured path to switch to Backstage UI, ensuring a cohesive design system and up-to-date component usage.

Core Features & Use Cases

  • Remove MUI imports and replace with Backstage UI components (Box, Text, Card, Grid, etc.).
  • Adopt CSS Modules and var(--bui-) tokens to style components consistently.
  • Update component patterns (Typography -> Text, Box layout -> Flex, Grid -> Grid.Root/Grid.Item, Dialogs, Tooltips, Menus, etc.) for a seamless migration.
  • Use this guide for plugin migrations, large refactors, or new projects starting from MUI-based code.

Quick Start

Install @backstage/ui, remove material-ui dependencies, and begin converting components following the migration guidelines.

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

Migrating Backstage UI from MUI involves replacing Material-UI imports with Backstage UI components like Box, Text, and Card, then adopting CSS modules using var(--bui-) tokens for consistent styling across plugin codebases.

What is the best way to map MUI Typography and Grid components to Backstage UI?▼

The best way to map MUI components to Backstage UI is updating patterns like Typography to Text, Box layout to Flex, and Grid to Grid.Root and Grid.Item for a seamless component architecture refactor.

How does adopting CSS modules with var(--bui-) tokens standardize Backstage frontend architecture?▼

Adopting CSS modules with var(--bui-) tokens standardizes Backstage frontend architecture by replacing MUI styling with a cohesive design system, reducing maintenance overhead during UI refactors.

Do I need to remove material-ui dependencies before starting a Backstage UI migration?▼

You need to remove material-ui dependencies by installing @backstage/ui, replacing MUI imports with Backstage UI components, and adopting CSS modules to complete the migration.

Can I use this Backstage UI migration guide for large plugin refactors?▼

You can use this Backstage UI migration guide for large plugin refactors, as it covers replacing imports, updating layout and component patterns, and adopting CSS modules for new projects starting from MUI-based code.

Why should I refactor Material-UI patterns to Backstage UI in my plugin codebase?▼

You should refactor Material-UI patterns to Backstage UI to standardize the frontend, ensure a cohesive design system, and reduce maintenance overhead when upgrading UI patterns in Backstage projects.

Related Skills

Explore More Software Engineering Skills→
backstagebackstage
34.1k

mui-to-bui-migration

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

Official
Advanced
jacobduijzerjacobduijzer

mui-to-bui-migration

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

Community
Intermediate
Okeysir198Okeysir198
2

nextjs-shadcn-builder

Analyze codebases and generate migration plans for Next.js and shadcn/ui adoption.

Community
Advanced
chicanoandres702chicanoandres702

frontend-mobile-development-component-scaffold

Generates React components with TypeScript, tests, and Storybook from a formal spec.

Community
Advanced