🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
BytesAgain β€Ί Skills β€Ί Micro-Frontend Architecture
πŸ¦€ ClawHub

Micro-Frontend Architecture

by @goldath

Micro-frontend architecture design and implementation guide. Use when: designing micro-frontend architecture, choosing between Module Federation/qiankun/sing...

Versionv1.0.0
Downloads294
#legal#gaming
TERMINAL
clawhub install micro-frontend-arch

πŸ“– About This Skill

name: micro-frontend-arch description: "Micro-frontend architecture design and implementation guide. Use when: designing micro-frontend architecture, choosing between Module Federation/qiankun/single-spa/wujie, splitting monolith into sub-apps, implementing style isolation, setting up inter-app communication, or deploying micro-frontends independently."

Micro-Frontend Architecture

Framework Selection

| Scenario | Recommended | |----------|-------------| | New project, Webpack 5 | Module Federation | | Legacy jQuery/Vue2 migration | qiankun | | Multi-framework coexistence | single-spa | | Need JS sandbox + style isolation | wujie |

Core Workflow

1. Design β†’ Define app boundaries, shared dependencies, routing strategy 2. Setup β†’ Configure main app shell + sub-apps (see framework-specific refs) 3. Communication β†’ Choose communication pattern (see references/communication.md) 4. Style Isolation β†’ Prevent CSS conflicts (see references/style-isolation.md) 5. Deploy β†’ Independent CI/CD per sub-app (see references/deployment.md)

References

  • references/module-federation.md β€” Webpack Module Federation config & patterns
  • references/qiankun.md β€” qiankun registration, sandbox, lifecycle hooks
  • references/single-spa.md β€” single-spa root config & app registration
  • references/communication.md β€” Props, CustomEvent, shared store patterns
  • references/style-isolation.md β€” Shadow DOM, CSS Modules, scoped strategies
  • references/deployment.md β€” Independent deploy, CDN, versioning strategy