From datahub-skills
Scaffolds a DataHub Micro Frontend (MFE) app using Webpack Module Federation, generating 7 boilerplate files including package.json, webpack.config.js, React/TypeScript sources. Use for new MFEs or remote apps.
npx claudepluginhub datahub-project/datahub-skills --plugin datahub-skillsThis skill uses the workspace's default tool permissions.
Scaffolds a complete, working Micro Frontend app that integrates with DataHub
Configures DataHub instance to register Micro Frontend (MFE) apps, load at /mfe/<path>, add to nav sidebar, setup local dev or production/Kubernetes config, troubleshoot loading issues.
Generates new API endpoints, UI components, backend modules, shared packages, and database collections following existing codebase patterns.
Generates React web apps with TinyBase reactive data store for real-time sync. Use when creating new web apps, adding components, or prototyping SPAs with live data.
Share bugs, ideas, or general feedback.
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