From datahub-skills
Scaffolds a new DataHub Micro Frontend app using Webpack Module Federation. Generates all required boilerplate files and guides through setup.
How this skill is triggered — by the user, by Claude, or both
Slash command
/datahub-skills:datahub-mfe-create-appThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Scaffolds a complete, working Micro Frontend app that integrates with DataHub
Scaffolds a complete, working Micro Frontend app that integrates with DataHub via Webpack Module Federation. Generates all 7 required files and guides the user through building and verifying.
Use the AskQuestion tool to collect the following in a single call.
| Question | ID | Options |
|---|---|---|
App name (kebab-case, e.g. team-dashboard) | app_name | test-app / N/A - I'll fill it in later |
| Brief description of what the app does | app_desc | test-description / N/A - I'll fill it in later |
| Dev server port | port | 3002 / 3003 / 3004 / 3005 / 3006 |
| Does the app need to call the DataHub GraphQL API? | needs_graphql | Yes / No |
For app_name and app_desc, present only the N/A - I'll fill it in later
option — do NOT suggest values from the workspace. The user will type their own.
app_nameGiven an app_name like team-dashboard:
team-dashboard-mfe/ (append -mfe if not already present)MF_NAME): convert to camelCase and append MFE — teamDashboardMFEteam-dashboard-mfeTeam DashboardCreate the directory at the workspace root (sibling to datahub-web-react/).
Generate all 7 files using the templates in templates.md.
Apply these substitutions to every template:
| Placeholder | Value |
|---|---|
__APP_DIR__ | Directory name |
__PACKAGE_NAME__ | Package name |
__APP_DESCRIPTION__ | User's description |
__PORT__ | Dev server port |
__MF_NAME__ | Module Federation name (camelCase + MFE) |
__DISPLAY_LABEL__ | Title-cased label |
__PUBLIC_PATH_DEV__ | http://localhost:<PORT>/ |
If needs_graphql is Yes, include the GraphQL proxy block in webpack.config.js
(marked with {{GRAPHQL_PROXY}} in the template). If No, omit it entirely.
package.jsonwebpack.config.jssrc/mount.tsxsrc/index.tsxsrc/App.tsxtsconfig.jsonpublic/index.htmlFirst cd into the app directory — webpack must be started from within it,
not from the workspace root.
cd __APP_DIR__
npm install
npm start
Wait for webpack to compile. The dev server should start on the configured port.
http://localhost:<PORT>/remoteEntry.js in a browser or curl it.
It should return JavaScript (not a 404 or HTML error page).http://localhost:<PORT>/ — the standalone dev page should render.If either check fails, review the webpack output for errors and fix before proceeding.
Tell the user:
Your MFE app is running! To integrate it with DataHub, use the datahub-mfe-configure-app skill — it will walk you through adding this app to the DataHub frontend config so it appears at
/mfe/<path>and optionally in the nav sidebar.
Provide a summary of what was created:
Created __APP_DIR__/ with 7 files:
package.json — dependencies and scripts
webpack.config.js — Module Federation + dev server
src/mount.tsx — mount() contract for DataHub
src/index.tsx — standalone dev entry point
src/App.tsx — starter React component
tsconfig.json — TypeScript config
public/index.html — dev HTML shell
Module Federation name: __MF_NAME__ ← use this as "MFE app name" in datahub-mfe-configure-app
Remote entry URL: http://localhost:__PORT__/remoteEntry.js
Module path: __MF_NAME__/mount
npx claudepluginhub datahub-project/datahub-skills --plugin datahub-skillsWalks through registering a Micro Frontend app with DataHub, including URL path, remoteEntry.js, and navigation sidebar config for local dev or production/k8s.
Reviews and generates micro-frontend code against eight boundary rules, covering Module Federation, Native Federation, Single SPA, and governance for feature flags, edge strategy, and SSR ownership.
Guides building, configuring, and deploying microfrontends on Vercel using microfrontends.json, multi-zone routing, asset prefixes, and the @vercel/microfrontends package.