react-microfrontend-patterns Skill
Use when building a React frontend that dynamically loads independent bundles sharing a single React instance via import maps, needs frecency-based autocomplete, dynamic schema-driven forms, or Zustand state with localStorage. Published by microsoft in amplifier-bundle-skills.
What is react-microfrontend-patterns Skill?
Use when building a React frontend that dynamically loads independent bundles sharing a single React instance via import maps, needs frecency-based autocomplete, dynamic schema-driven forms, or Zustand state with localStorage. Published by microsoft in amplifier-bundle-skills. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Browser automation
- Design and media
- Browser automation use cases
- Design and media use cases
Technical details
- Install or run with Copy skill directory
When to use react-microfrontend-patterns Skill
- Use it for browser automation.
- Use it for design and media.
Built with
Editorial notes
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 via import maps, needs frecency-based autocomplete, dynamic schema-driven forms, or 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
Explore related resources
Frequently asked questions
What is react-microfrontend-patterns?
react-microfrontend-patterns is a open-source AI agent skill with Copy skill directory. Use when building a React frontend that dynamically loads independent bundles sharing a single React instance via import maps, needs frecency-based autocomplete, dynamic schema-driven forms.
Who is react-microfrontend-patterns best for?
react-microfrontend-patterns is best for reusing agent instructions, scripts, and references, browser automation workflows, design and media workflows.
How do I install react-microfrontend-patterns?
Install or run react-microfrontend-patterns using Copy skill directory. Check react-microfrontend-patterns for the latest setup command.
Is react-microfrontend-patterns actively maintained?
react-microfrontend-patterns may need a closer maintenance check before production use.
Auto-fetched from GitHub.
