Claude 3.5 Sonnet Enterprise Microfrontend & Module Federation Architecture
Design decoupled, independently deployable frontend applications sharing common runtime dependencies (React, design system, state stores) with sub-second HMR.
Parametric Customizer & Compiler Live Tool
Adjust the variables below. The prompt code and API payload update dynamically in real time.
Core application domain
List of exposed modules
You are a Principal Frontend Architect and Enterprise Web Infrastructure Specialist.
Architect and implement a scalable, production-grade Microfrontend (MFE) architecture using {Rspack / Rsbuild (Rust-based ultra-fast Module Federation 2.0)} Module Federation for {Global FinTech Banking Portal: Host Shell, Payments Remote, Trading Remote, and Account Settings Remote}.
### ENTERPRISE ARCHITECTURAL REQUIREMENTS:
1. **Decoupled Application Topology**: Define Host (Shell / Container) application and Remote micro-apps with independent build pipelines and Git repositories.
2. **Shared Singleton Dependencies**: Configure shared vendor libraries (`react`, `react-dom`, `@tanstack/react-query`, `zustand`) with `singleton: true`, `strictVersion: true`, and automatic fallback version resolution.
3. **Cross-MFE Type Safety**: Implement dynamic type-sharing (e.g. `@module-federation/typescript` or Zephyr Cloud) so the host app has auto-complete TypeScript types for remote components.
4. **CSS & Styling Isolation**: Prevent global CSS collisions using scoped Tailwind prefixing, CSS Modules, or Shadow DOM boundaries.
5. **Resilient Error Boundaries**: Wrap all remote lazy imports (`React.lazy`) in custom error boundaries with skeleton fallback screens and automatic retry logic if a remote CDN script fails to load.
Microfrontend Remote Units:
{Remote 1: 'payments_app' exposing './CheckoutFlow' and './TransactionHistory'; Remote 2: 'analytics_app' exposing './RevenueDashboard'}
Global State & Navigation Bus:
{Zustand Event Bus with Custom DOM CustomEvent dispatchers for route sync} Design decoupled, enterprise-grade frontend infrastructure with Claude 3.5 Sonnet's deep architectural reasoning.
Leonardo Phoenix & Flux: Generate photorealistic studio assets with 150 daily free credits. Zero setup required.
πΈ Real Sample Outputs & Verified Results
Visual evidence and benchmark responses generated using this exact prompt formula.
π¬ Prompt Engineering Anatomy
Why this prompt consistently delivers high-tier results: technical parameter breakdown.
Singleton Shared Dependencies Prevents loading two separate instances of React in memory, which would break React Context and hook state management.
Remote Error Boundaries Isolates failures so that an outage in one remote micro-app does not crash the entire shell application.
π¬ Frequently Asked Questions
Troubleshooting common edge cases, model incompatibilities, and best practices.
Does Module Federation work with Server-Side Rendering (SSR)?
Yes, modern Module Federation 2.0 and Next.js support federated SSR where remotes stream HTML on server render.
How do you share authentication tokens across remotes?
The host shell manages JWT tokens and shares them via an encrypted HTTP-only cookie or a shared light state store like Zustand.
Cursor AI & Claude 3.5 Sonnet Pro Bundle
Supercharge your workflow with instant codebase indexing, multi-file edits, and automated system rules.
Explore Related Coding & Architecture Prompts View all β
Claude 3.5 Sonnet Senior Staff Full-Stack Refactoring Architect
Specialized prompt framework for Claude 3.5 Sonnet and Claude 3.7. Transforms messy legacy codebases into modular, testable, high-performance systems with automated regression tests.
cursorCursor AI (.cursorrules) for Next.js 15, React 19 & Tailwind CSS
Stops Cursor from writing outdated Next.js 13 patterns, Pages Router syntax, or deprecated React hooks. Enforces strict TypeScript, Server Actions, and modular clean architecture.
deepseekDeepSeek-R1 Autonomous Deep Research & Synthesis Engine
DeepSeek-R1 chain-of-thought framework designed to force deep reflection, counterfactual auditing, and hypothesis testing before producing production-ready research reports.