Menu
Registers an existing module in the shell host app. Use when wiring a new or existing module into the running application.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Adds slot-based extensibility to the application — defines slot types in app-shared, contributes items from modules, and consumes them in the shell. Use when the shell needs to collect and render contributions from multiple modules (command palettes, system registrations, dashboard widgets, etc.).
Adds data fetching to a module component using React Query with Lokalise HTTP client and API contracts. Use when a component needs to fetch, create, update, or delete server data, or when integrating a new backend contract.
Creates a per-entity scoped Zustand store using createScopedStore(). Use when you need independent state instances keyed by ID — per-interaction tabs, per-conversation messages, per-workspace scratchpads, etc.
Adds zone-based layout regions to the shell that modules populate per-route or per-active-tab. Use when the shell layout has dynamic panels, sidebars, or header regions that change based on the current route or active module.
Creates a new Reactive module with routes, navigation, page components, and package.json. Use when asked to add a new feature module, section, or domain area to the application.
Writes tests for a Reactive module using @react-router-modules/testing with renderModule(), resolveModule(), and createMockStore(). Use when adding or updating tests for module components, routes, or slot contributions.
| name | register-module |
| description | Registers an existing module in the shell host app. Use when wiring a new or existing module into the running application. |
| metadata | {"author":"reactive","version":"1.0"} |
After creating a module, it must be registered in the shell (host app) to appear in the running application.
Note:
reactive create modulehandles registration automatically. These manual steps are only needed when registering a module that was created without the CLI.
In examples/shell/package.json, add the module to dependencies:
{
"dependencies": {
"@example/<module-name>-module": "workspace:*"
}
}
Run pnpm install to link.
In examples/shell/src/main.tsx:
import newModule from "@example/<module-name>-module";
// After createRegistry and before resolve:
registry.register(newModule);
pnpm --filter shell dev
The module's routes and navigation items should appear immediately. The sidebar auto-generates from the navigation manifest.
For large modules that should load on demand:
registry.registerLazy({
id: "<module-name>",
basePath: "/<module-path>",
load: () => import("@example/<module-name>-module"),
});
The module's code is only fetched when the user navigates to the base path.
When registry.resolve() runs, it validates:
id: 'billing' will throw.requires: ['auth', 'analytics'] and analytics is not in the registry config, it throws with a clear error listing available deps.If validation fails, the error message tells you exactly what's missing:
[@react-router-modules/runtime] Module "billing" requires dependencies not provided
by the registry: analytics. Available: auth, config, httpClient
// 1. Create registry with shared dependencies
const registry = createRegistry<AppDependencies>({
stores: { auth: authStore, config: configStore },
services: { httpClient },
})
// 2. Register modules (order doesn't matter)
registry.register(billing)
registry.register(users)
registry.register(newModule)
// 3. Resolve - validates everything, builds route tree, returns App
const { App } = registry.resolve({
rootComponent: Layout,
indexComponent: Home,
})
// 4. Render
createRoot(document.getElementById('root')!).render(<App />)
resolve(). Registering after throws an error.resolve() can only be called once. Calling it again throws an error.order field in navigation items and the route paths themselves.AppDependencies - only modules typed with the same contract can be registered.