agentleFS
backstagebackstage/backstage/.agents/skills/mui-to-bui-migration/SKILL.md

mui-to-bui-migration

Skill35k starsChanged 2 days agoApache-2.0View on GitHub

Migrate Material-UI (MUI) to Backstage UI (BUI) with a codemod or standalone guidance. Use when migrating MUI components and styles, running @backstage/mui4-to-bui-migration-recipe, or resolving TODO(backstage-codemod) after a BUI migration.

We split this skill into the rules it gives an agent

15 rules. About 0 are common, 10 are distinctive, and 5 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈10

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 5

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use ordinary conversation so the choice works across agents.

    line 26
  2. Distinctive:

    Prefer a clean git tree so recipe edits are easy to review.

    line 38
  3. Distinctive:

    Use the published registry recipe.

    line 47
  4. Very specific:

    Always dry-run the target before apply.

    line 60
  5. Distinctive:

    After a successful dry-run, note the expected changes and TODOs.

    line 63
  6. Very specific:

    Run only the full recipe so bootstrap → transforms → remove-mui-dependencies stay in order (cleanup last).

    line 72
  7. Distinctive:

    If either command fails, report the failure and inspect any partial changes before retrying.

    line 78
  8. Distinctive:

    Read standalone migration only when the user selects this path.

    line 86
  9. Very specific:

    Search the target for TODO(backstage-codemod).

    line 96
  10. Very specific:

    Search for remaining @material-ui/ and @mui/ imports and styling usage.

    line 98
  11. Distinctive:

    Read migration limits when a component or pattern has no equivalent that preserves its behavior.

    line 99
  12. Distinctive:

    After a codemod run, read leftover cleanup when finishing tokens, icons, or ambiguous layout.

    line 101
  13. Distinctive:

    Use the recipe README to interpret recipe output.

    line 105
  14. Very specific:

    Follow the target repository's setup instructions before checks.

    line 114
  15. Distinctive:

    Run targeted tests and lint checks using the repository's prescribed commands.

    line 116

≈ “Common” is an estimate: at least 1 in 5 of the 308,232 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

MUI to BUI migration

Support two paths through the migration: run the published recipe (@backstage/mui4-to-bui-migration-recipe) and finish its leftovers, or migrate directly using the standalone guidance. Both paths include verification.

Workflow

1. Choose the path and target

Honor a path the user already specified. Otherwise, ask in plain language:

Would you like to run the codemod and then finish its leftovers, or migrate directly with the standalone guidance? I recommend the codemod because it handles mechanical changes deterministically and can reduce agent token usage.

Use ordinary conversation so the choice works across agents. Wait for the answer before migration edits or recipe commands; a recommendation is not a selection. For an unattended run, require the request to specify the path.

Identify the app or package path to migrate (for example . for an app root, or a plugin directory). If the recipe has already run, continue with its leftovers in step 4 without repeating it.

Done when: the path and target are clear from the request or the user's answer.

2. Baseline

Prefer a clean git tree so recipe edits are easy to review.

Done when: git status is clean, or dirty files are listed and accepted as pre-existing.

3. Migrate using the selected path

Codemod path

Use the published registry recipe. Maintainers testing an unpublished recipe: follow local-run instructions in the codemods repository instead of the commands below.

Replace <path-to-app-or-package> with the agreed target. Dry-run first:

yarn dlx codemod run @backstage/mui4-to-bui-migration-recipe \
  --target <path-to-app-or-package> \
  --dry-run

Always dry-run the target before apply. The summary surfaces scope and metrics (for example Button outlined → secondary).

After a successful dry-run, note the expected changes and TODOs. If the user requested only a dry-run, report its results and stop before applying. If no files match, continue to step 4. Otherwise, apply:

yarn dlx codemod run @backstage/mui4-to-bui-migration-recipe \
  --target <path-to-app-or-package>

Run only the full recipe so bootstrap → transforms → remove-mui-dependencies stay in order (cleanup last).

Ordered package list and heuristics: mui4-to-bui-migration-recipe README.

If either command fails, report the failure and inspect any partial changes before retrying. Keep the selected path unless the user chooses to switch.

Done when: dry-run and apply finished for the agreed target with no recipe CLI failure, or the dry-run confirmed no matching files.

Standalone path

Read standalone migration only when the user selects this path. Follow its dependency setup, component examples, styling guidance, and cleanup checklist to edit the target directly. This path requires no codemod installation, dry-run, or apply command.

Done when: the standalone checklist is complete for the agreed target, with remaining MUI usage recorded for step 4.

4. Resolve remaining migration work

  1. Search the target for TODO(backstage-codemod). Resolve each marker, or defer with an explicit reason.
  2. Search for remaining @material-ui/ and @mui/ imports and styling usage.
  3. Read migration limits when a component or pattern has no equivalent that preserves its behavior.
  4. After a codemod run, read leftover cleanup when finishing tokens, icons, or ambiguous layout. Load this reference only for recipe output.

Use the recipe README to interpret recipe output. For direct edits in either path, check the target's installed BUI APIs and preserve existing behavior.

Done when: every migration marker and remaining MUI use in scope is resolved or documented with a reason for retaining it. Keep dependencies needed by retained components, styles, or icons.

5. Verify

  • Follow the target repository's setup instructions before checks. In a Backstage monorepo, run yarn install and yarn tsc from the root.
  • Run targeted tests and lint checks using the repository's prescribed commands.
  • Spot-check UI in light and dark mode where styles changed.

Done when: the required checks pass and changed UI behavior and appearance have been checked. Report any unavailable or failing check as incomplete verification.

Success criteria

Migration is complete when the selected path is finished for the agreed target, remaining work is accounted for in step 4, and verification passes. Summarize the selected path, changed files, retained MUI usage and reasons, and check results.

Download now (ZIP)

Trending

Quiet since April.about the whole repository

Dec 2025: 2 mentionsJan 2026: 1 mentionFeb 2026: 2 mentionsMar 2026: 3 mentionsApr 2026: 1 mentionMay 2026: 0 mentionsJun 2026: 0 mentionsJul 2026: 0 mentionsAug 2026: 0 mentionsSep 2026: 0 mentionsOct 2026: 0 mentionsNov 2026: 0 mentions
Dec 2025Jun 2026Nov 2026
Mentions a month of the backstage/backstage repository that our weekly crawl found. There is no adoption data for this file yet.

Who's talking about backstage/backstage

The biggest 5 of 62 mentions linking to the repository that our crawl found. Each line is their own headline.

See all 62

Talked about on YouTube, GitHub, Stack Overflow and Bluesky (62 times).

On YouTube · 25

20 more on YouTube

On GitHub · 17

12 more on GitHub

On Stack Overflow · 11

6 more on Stack Overflow

On Bluesky · 9

4 more on Bluesky

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.