generate-frontend-wiring_skill

Overview

This skill analyzes an existing Backstage frontend plugin and generates the Red Hat Developer Hub (RHDH) dynamic plugin wiring configuration. It inspects package metadata and plugin source exports, then produces a ready-to-use YAML block for dynamic-plugins.yaml or app-config.yaml. The output includes routes, mount points, API factories, and app icon wiring derived from the plugin code.

How this skill works

The skill reads the plugin directory to locate package.json, src/plugin.ts or src/plugin.tsx, src/index.ts, and an optional built plugin-manifest.json. It extracts the scalprum name, routable extensions (createRoutableExtension), component extensions (createComponentExtension), API factories/refs, and icon exports. Using those findings, it composes the YAML structure for dynamicRoutes, mountPoints, apiFactories, and appIcons.

When to use it

• You have an existing Backstage frontend plugin you want to deploy as a dynamic plugin on RHDH.
• You need a generated dynamic-plugins.yaml or app-config.yaml wiring for a plugin.
• You want to confirm which exports will become routes, mount points, APIs, or icons in RHDH.
• You have built artifacts with a scalprum manifest and want the exact scalprum name.
• You need a starting configuration to integrate the plugin into an app shell.

Best practices

• Ensure package.json and src/plugin.ts or src/plugin.tsx exist and export the expected factories.
• If possible, build the plugin to generate dist-dynamic/dist-scalprum/plugin-manifest.json to get an authoritative scalprum name.
• Name exported components clearly (e.g., MyPluginPage, MyEntityCard, todoApiRef) to produce readable YAML.
• Export custom icons from src/index.ts so they can be referenced as appIcons.
• Review and adjust entity conditions (if/allOf) for mountPoints to avoid unwanted rendering.

Example use cases

• Generate wiring for a page-only plugin to produce a dynamicRoutes entry and menu item.
• Produce mountPoints for an entity card plugin that should appear on component overview pages.
• Create apiFactories entries when a plugin exports createApiFactory or apiRef objects.
• Combine routes, mount points, and appIcons YAML for a plugin that offers a page, cards, and icons.
• Derive scalprum name from package.json or plugin-manifest.json to ensure correct runtime module mapping.