add-microfrontend
CommunityAutomate micro-frontend architecture setup with iframe composition and shared backend.
AuthorAlif-N
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automates the setup of a micro-frontend architecture using client-side iframe composition, allowing for seamless integration of independent apps with shared authentication, backend, and rendering.
Core Features & Use Cases
- Micro-Frontend Architecture: Set up a micro-frontend architecture with a Main App hosting micro-apps via iframes.
- Shared Backend: Utilize a single shared DaaS backend for all apps, simplifying data management and access control.
- Shared Authentication: Share authentication state between the Main App and micro-apps using Supabase session cookies.
- URL Synchronization: Keep the Main App's URL in sync with micro-app changes using postMessage communication.
- Use Case: Ideal for organizations looking to build a scalable, modular application interface, particularly useful for embedding third-party services or integrating separate team projects.
Quick Start
Use the add-microfrontend skill to create a new micro-frontend within the existing application architecture.
Dependency Matrix
Required Modules
nextsupabase
Components
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: add-microfrontend Download link: https://github.com/Alif-N/fe-sima-arome/archive/main.zip#add-microfrontend Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.