rhdh-frontend-dynamic-plugin_skill

Overview

This skill bootstraps a frontend dynamic plugin for Red Hat Developer Hub (RHDH). It guides you from scaffolding a Backstage plugin through implementing UI components, exporting as a dynamic plugin, packaging as an OCI image, and wiring the plugin into the RHDH shell. Use it for UI features such as pages, entity cards, sidebar items, and themes.

How this skill works

The skill walks through determining RHDH/Backstage version compatibility, creating a Backstage app and frontend plugin, and building React components (pages, cards, tabs). It configures Scalprum module federation, exports the plugin with the RHDH CLI, packages the output as an OCI image, and shows the dynamic-plugins.yaml wiring needed for routes, mount points, and menu items. It includes development harness tips for previewing RHDH themes locally and debugging in the browser.

When to use it

• You need a new full-page route or sidebar menu item in RHDH.
• You want to add entity page cards, tabs, or conditional mount points.
• You want to publish a UI plugin as a dynamic (Scalprum) module/OCI image.
• You need to preview or adopt RHDH themes locally during development.
• You plan to supply custom icons, theme overrides, or TechDocs/Scaffolder field extensions.

Best practices

• Confirm target RHDH version first and match the compatible Backstage/create-app versions.
• Generate the plugin with Backstage CLI and keep public exports in src/index.ts for Scalprum.
• Use the RHDH theme package in the dev harness so local previews match production styles.
• Define clean wiring in dynamic-plugins.yaml: package name must match scalprum.name and importName must match exported modules.
• Test source maps and set breakpoints in browser DevTools; include MUI v5 class name config if using MUI v5.

Example use cases

• Add a Tools > My Plugin sidebar entry pointing to a full-page route /my-plugin.
• Create an entity overview card that only renders for component entities using conditional mountPoints.
• Add an entity tab with custom cards and a dedicated route under entity.page.my-tab.
• Package a plugin as quay.io/<namespace>/<plugin-name>:v0.1.0 and reference it in dynamic-plugins.yaml for deployment.
• Preview the plugin locally with RHDH light/dark themes using getAllThemes() in the dev harness.