skills.rest
Rkaaaa404
Rkaaaa404COMMUNITY
Explore all skills by this author →
GitHub

add-microfrontend

Implements iframe-based micro-frontend architecture with shared Supabase auth and postMessage URL syncing.

Updated May 27, 2026
Search Tags:#authentication#supabase#next.js#micro-frontend#iframe#postmessage#aws amplify
One-click install
npx skills add https://github.com/Rkaaaa404/cyberhack-SYDT --skill add-microfrontend-rkaaaa404
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-microfrontend
Source: https://github.com/Rkaaaa404/cyberhack-SYDT/tree/main/.agents/skills/add-microfrontend
Command: npx skills add https://github.com/Rkaaaa404/cyberhack-SYDT --skill add-microfrontend-rkaaaa404

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? It guides the setup of a micro-frontend architecture where a Main App hosts independent Next.js micro-apps inside sandboxed iframes, sharing one Supabase Auth instance and one DaaS backend without bundling micro-app code. ## Core Features & Use Cases - Iframe Composition: Creates a reusable MicroappIframe component with sandbox permissions, loading skeletons, error boundaries, and strict postMessage origin validation. - Cross-Domain Auth Bridge: Implements a MICROAPP_NEEDS_AUTH / SET_AUTH token handshake so micro-apps deployed on separate Amplify subdomains inherit the host's Supabase session without re-login. - URL Syncing: Syncs allowlisted query params between micro-app and host URL bar via debounced postMessage, plus auto-generated config/app-urls.ts from the get_project_detail MCP tool. - Use Case: A platform team adds a new "users-app" micro-frontend to an existing admin dashboard; the skill scaffolds the host route page, iframe wrapper, auth bridge, environment config, and Playwright tests. ## Quick Start Ask the assistant to add a micro-frontend named users-app hosted at the /admin/users route using the add-microfrontend skill.

Frequently Asked Questions about add-microfrontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a micro-frontend architecture with iframes in Next.js?▼

Create a MicroappIframe client component in the Main App that renders each micro-app via a sandboxed iframe, then add host route pages pointing to each micro-app's deployed URL. Communication between host and micro-apps happens only through postMessage with strict origin validation.

How do I share Supabase authentication between micro-frontends on different domains?▼

On Amplify, subdomains are separate origins so cookies are not shared. Implement a postMessage auth bridge: the micro-app login page sends MICROAPP_NEEDS_AUTH, the host replies with SET_AUTH containing session tokens, and the micro-app calls /api/auth/set-session to establish its own cookie.

How do I sync URL query params between an iframe micro-app and the host page?▼

Use a useQueryParamSync hook in the micro-app that posts QUERY_PARAMS_CHANGE messages to the host with debouncing. The host's MicroappIframe validates the origin, filters params against an allowlist, and updates its own URL with router.replace.

Why do window.confirm and window.alert not work inside sandboxed iframes?▼

Browsers block native dialogs like confirm, alert, and prompt inside sandboxed iframes. Micro-apps must use Mantine Modal or modals.openConfirmModal from @mantine/modals for confirmations and prompts instead.

Can I pass Link as a component prop from a Next.js Server Component in React 19?▼

No. React 19 does not allow functions as props from Server Components to Client Components, so patterns like Anchor component={Link} fail. Use plain next/link in Server Components and reserve the component prop pattern for client components.

What are the limitations of iframe-based micro-frontend composition?▼

Iframes add overhead from separate SSR requests, require postMessage for all cross-app communication, and block native dialogs and top navigation. They suit teams needing full isolation and independent deployments, not tightly coupled shared-component UIs.

Related Skills

Explore More Software Engineering Skills→
Alif-NAlif-N

add-microservice

Automate microservice architecture setup with a shared DaaS backend.

Community
Advanced
BaraArdiwinataBaraArdiwinata

add-microfrontend

Automate micro-frontend setup with iframe composition and shared Supabase authentication.

Community
Advanced
awfixers-stuffawfixers-stuff

clerk-testing

Automate Clerk authentication flow testing with Playwright or Cypress.

Official
Intermediate
Alif-NAlif-N

add-microfrontend

Create micro-frontend components with iframe composition and shared Supabase authentication.

Community
Intermediate