react-microfrontend-patterns Skill

Source

• Creator: microsoft
• Repository: microsoft/amplifier-bundle-skills
• Skill file: skills/react-microfrontend-patterns/SKILL.md

What it does

Use when building a React frontend that dynamically loads independent bundles sharing a single React instance. Covers import maps, frecency-based autocomplete, dynamic schema-driven forms, and Zustand state with localStorage.

Skill instructions

React Micro-Frontend Patterns The Pattern Problem: You have multiple independently-built UI bundles that must share React at runtime, a form system driven by server-side schemas that change dynamically, and state that needs to persist in the browser and sync across tabs. Approach: Import maps with Vite's rollupOptions.external for shared React, a useFrecency hook with exponential decay scoring, schema-to-React rendering with action-triggered schema refinement, and Zustand stores with localStorage sync. Pattern proven in production across multiple React frontends and web services. Key Design Decisions 1. Import map + rollupOptions.external for shared React When multiple independently-built bundles run on the same page, each gets its own copy of React. This causes the "dual React instance" bug: hooks break because the React instance that rendered the component is different from the one providing useState. The fix: externalize React in every bundle's Vite config and provide it via an impo