This skill should be used when the user asks to "generate frontend wiring", "show frontend wiring", "create RHDH binding", "generate dynamic plugin config", "show plugin wiring for RHDH", "create app-config for frontend plugin", or wants to generate the RHDH dynamic plugin wiring configuration for an existing Backstage frontend plugin. The skill analyzes the plugin's source code and generates the appropriate configuration.
Generates RHDH dynamic plugin wiring configuration by analyzing Backstage frontend plugin source code.
/plugin marketplace add durandom/rhdh-skill/plugin install rhdh-plugin@rhdhThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/entity-page.mdreferences/frontend-wiring.mdAnalyze an existing Backstage frontend plugin and generate the RHDH dynamic plugin wiring configuration. This skill inspects the plugin's source files to determine exports and generates the corresponding app-config.yaml configuration.
Use this skill when:
dynamic-plugins.yamlThe plugin directory must contain:
package.json with plugin metadatasrc/plugin.ts or src/plugin.tsx with plugin definitionsrc/index.ts exporting plugin componentsFind and read the essential plugin files:
package.json - Get package namesrc/plugin.ts - Find exported extensions (pages, cards)src/index.ts - Find public exports (APIs, components)dist-dynamic/dist-scalprum/plugin-manifest.json - Get scalprum name if builtThe scalprum name is used to reference the plugin in RHDH configuration:
plugin-manifest.json exists: Use the name fieldscalprum in package.json: Use scalprum.name@my-org/backstage-plugin-foo becomes my-org.backstage-plugin-foo@internal/backstage-plugin-foo becomes internal.backstage-plugin-fooAnalyze the plugin source to find:
Routable Extensions (pages):
createRoutableExtension in plugin.tsdynamicRoutes entriesMyPluginPage)Entity Cards/Content:
createComponentExtension in plugin.tsmountPoints entriesuseEntity (entity-scoped)API Factories:
createApiFactory and createApiRef in plugin.ts or api.tsapiFactories entriesapiRef export nameIcons:
appIcons entriesOutput the complete wiring configuration in YAML format:
# RHDH Dynamic Plugin Configuration
# Add to your dynamic-plugins.yaml or app-config.yaml
dynamicPlugins:
frontend:
<scalprum-name>:
dynamicRoutes:
- path: /<plugin-id>
importName: <PageComponentName>
menuItem:
icon: <icon-name>
text: <Plugin Display Name>
mountPoints:
- mountPoint: entity.page.overview/cards
importName: <CardComponentName>
config:
if:
allOf:
- isKind: component
apiFactories:
- importName: <apiRefName>
appIcons:
- name: <iconName>
importName: <IconComponentName>
Show the generated configuration with:
For a plugin with:
@internal/backstage-plugin-demopluginDemopluginPagetodoApiRefGenerate:
dynamicPlugins:
frontend:
internal.backstage-plugin-demoplugin:
dynamicRoutes:
- path: /demoplugin
importName: DemopluginPage
menuItem:
icon: extension
text: Demo Plugin
apiFactories:
- importName: todoApiRef
dynamicRoutes:
- path: /my-plugin # URL path
importName: MyPage # Exported component name
module: PluginRoot # Optional: scalprum module (default: PluginRoot)
menuItem:
icon: dashboard # System icon or custom appIcon
text: My Plugin # Sidebar menu text
mountPoints:
- mountPoint: entity.page.overview/cards
importName: MyCard
config:
layout:
gridColumn: '1 / -1' # Full width
if:
allOf:
- isKind: component
- hasAnnotation: my-plugin/enabled
apiFactories:
- importName: myApiFactory # Or myApiRef if plugin exports it
appIcons:
- name: myIcon
importName: MyIconComponent
Plugin that adds a standalone page:
dynamicRoutes:
- path: /my-plugin
importName: MyPluginPage
menuItem:
icon: extension
text: My Plugin
Plugin that adds a card to entity pages:
mountPoints:
- mountPoint: entity.page.overview/cards
importName: MyEntityCard
config:
if:
allOf:
- isKind: component
Plugin with both page and entity integration:
dynamicRoutes:
- path: /my-plugin
importName: MyPluginPage
menuItem:
icon: myIcon
text: My Plugin
mountPoints:
- mountPoint: entity.page.overview/cards
importName: MyEntityCard
appIcons:
- name: myIcon
importName: MyIcon
references/frontend-wiring.md for complete configuration optionsreferences/frontend-wiring.md - Complete mount points, routes, bindingsreferences/entity-page.md - Entity page customizationActivates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.