microfrontend-nx

Standardize microfrontend development in NX monorepos with Module Federation.

1|Updated Feb 16, 2026

Search Tags:#typescript #architecture #react #monorepo #module federation #nx #microfrontend

Ready to run

npx skills add https://github.com/Jeff-Stapleton/dotclaude --skill microfrontend-nx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: microfrontend-nx
Source: https://github.com/Jeff-Stapleton/dotclaude/tree/main/.claude/skills/microfrontend-nx
Command: npx skills add https://github.com/Jeff-Stapleton/dotclaude --skill microfrontend-nx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a standardized architecture and set of conventions for building microfrontends within an NX monorepo, ensuring consistency and maintainability for the Breeze Airways operations frontend.

Core Features & Use Cases

Module Federation Architecture: Enforces a robust Module Federation setup for dynamic loading of microfrontends.
Feature-Scoped Libraries: Promotes modularity by organizing code into feature-specific libraries.
Shared Conventions: Establishes shared patterns for routing, state management, and dependency sharing.
Use Case: When developing new features or modifying existing ones in the ops-fe workspace, this Skill ensures adherence to the established microfrontend architecture, simplifying integration and deployment.

Quick Start

Use the microfrontend-nx skill to generate a new feature library for the ops-fe monorepo.

Frequently Asked Questions about microfrontend-nx

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up microfrontends in an NX monorepo using Module Federation?▼

To set up microfrontends in an NX monorepo, this Skill standardizes Module Federation architecture by enforcing feature-scoped libraries, routing rules, and shared conventions for dynamic loading. It requires adherence to NX build commands and TypeScript path aliases for module resolution.

What is the best way to organize feature libraries in a React microfrontend workspace?▼

The best way to organize feature libraries in a React microfrontend workspace is through feature-scoped libraries. This Skill promotes modularity by enforcing architectural patterns that separate concerns and establish shared conventions for state management and routing.

Can I use this NX microfrontend architecture with TypeScript path aliases?▼

Yes, you can use this NX microfrontend architecture with TypeScript path aliases. The Skill explicitly requires TypeScript path aliases for module resolution, ensuring that feature-scoped libraries map correctly within the React applications.

How does Module Federation handle shared dependencies across microfrontends?▼

Module Federation handles shared dependencies by enforcing shared conventions across the NX monorepo. This Skill establishes architectural patterns for dependency sharing, ensuring that React and TypeScript applications load dynamically without duplicating runtime libraries.

When do I need feature-scoped libraries for my React monorepo?▼

You need feature-scoped libraries for your React monorepo when developing new features or modifying existing ones in a microfrontend workspace. This Skill ensures adherence to established Module Federation architecture, simplifying integration and deployment across applications.

What are the limitations of using NX Module Federation for microfrontend routing?▼

The limitations of using NX Module Federation for microfrontend routing include strict adherence requirements to NX build commands and TypeScript path aliases. Deviating from these enforced architectural patterns and routing rules will break module resolution within the monorepo.