app-frontend-system-migration

Migrate Backstage apps to the new extension-based frontend system.

Updated Jun 24, 2026
One-click install
npx skills add https://github.com/jacobduijzer/bimcollab-backstage-demo --skill app-frontend-system-migration-jacobduijzer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: app-frontend-system-migration
Source: https://github.com/jacobduijzer/bimcollab-backstage-demo/tree/main/src/bimcollab/.agents/skills/app-frontend-system-migration
Command: npx skills add https://github.com/jacobduijzer/bimcollab-backstage-demo --skill app-frontend-system-migration-jacobduijzer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @backstage/frontend-defaults, @backstage/plugin-app-react, @backstage/plugin-app-api, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of migrating Backstage apps from the old frontend system to the new extension-based frontend system, simplifying the transition and ensuring compatibility.

Core Features & Use Cases

  • Hybrid Mode Migration: Gradually transition apps to the new system with compatibility helpers.
  • Feature Discovery: Automatically discovers and installs plugins from dependencies without manual imports.
  • API and Theme Management: Provides tools for managing APIs and themes in the new system.
  • Use Case: For instance, a developer can use this Skill to migrate a Backstage app package from @backstage/app-defaults to @backstage/frontend-defaults, enhancing the app with new features and improvements.

Quick Start

Migrate your Backstage app to the new frontend system using the app-frontend-system-migration skill.

Frequently Asked Questions about app-frontend-system-migration

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

FAQPage Schema
How do I migrate a Backstage app to the new frontend system?

Migrating a Backstage app to the new frontend system involves transitioning from the old setup to an extension-based architecture. This process moves your app package from @backstage/app-defaults to @backstage/frontend-defaults, enabling new features and improvements.

What is hybrid mode migration in Backstage?

Hybrid mode migration in Backstage is a gradual transition approach that uses compatibility helpers to move apps to the new frontend system. It allows you to migrate components incrementally without breaking existing functionality during the transition period.

Do I need @backstage/frontend-defaults to use the new Backstage frontend system?

Yes, you need @backstage/frontend-defaults along with @backstage/plugin-app-react and @backstage/plugin-app-api to fully support the new extension-based frontend system. These dependencies provide the necessary APIs and tools for theme and feature management.

How does feature discovery work in the Backstage extension-based system?

Feature discovery in the Backstage extension-based system automatically discovers and installs plugins from your dependencies without requiring manual imports. This simplifies plugin management by removing the need to manually wire each plugin into the application configuration.

Can I manage Backstage APIs and themes when migrating to the new frontend system?

Yes, you can manage Backstage APIs and themes when migrating to the new frontend system. The migration provides specific tools for handling API and theme management, ensuring your custom configurations remain compatible within the extension-based architecture.

What are the limitations of migrating Backstage to an extension-based frontend?

Migrating Backstage to an extension-based frontend requires the full @backstage/frontend-defaults dependency stack and may need hybrid mode for gradual transitions. Complex custom configurations might require manual adjustments during the migration process.