Advanced Micro-Frontend patterns — testing strategy (unit per-remote, integration with mocked remotes, E2E full composition via Playwright), CI/CD independent deployments per remote, ErrorBoundary resilience, and monolith-to-MFE strangler-fig migration.
From clarcnpx claudepluginhub marvinrichter/clarc --plugin clarcThis skill uses the workspace's default tool permissions.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
This skill extends microfrontend-patterns with testing, CI/CD, resilience, and migration. Load microfrontend-patterns first.
// Test remotes in isolation — mock federation context
// checkout/src/__tests__/CartView.test.tsx
import { render, screen } from "@testing-library/react";
import CartView from "../CartView";
test("displays empty cart message", () => {
render(<CartView items={[]} />);
expect(screen.getByText("Your cart is empty")).toBeInTheDocument();
});
// test/integration/shell.test.tsx
// Mock the federation remotes
jest.mock("checkout/CheckoutApp", () => ({
default: () => <div data-testid="checkout-mock">Checkout</div>,
}));
test("shell renders checkout route", async () => {
render(<App />, { route: "/checkout" });
await screen.findByTestId("checkout-mock");
});
// playwright.config.ts — start all remotes before tests
import { defineConfig } from "@playwright/test";
export default defineConfig({
webServer: [
{ command: "npm run start --prefix shell", port: 3000 },
{ command: "npm run start --prefix checkout", port: 3001 },
{ command: "npm run start --prefix catalog", port: 3002 },
],
use: { baseURL: "http://localhost:3000" },
});
Each Remote has its own pipeline. The Shell only re-deploys when the shell code itself changes.
# .github/workflows/checkout.yml
name: Checkout Remote
on:
push:
paths:
- "remotes/checkout/**"
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci
- run: npm run build # produces remoteEntry.js
- run: npm run test
# Deploy remoteEntry.js to CDN
- uses: aws-actions/s3-deploy@v1
with:
source: dist/
bucket: checkout-remote-prod
# Shell fetches this URL — no shell redeployment needed
// ErrorBoundary for each Remote — one Remote failing doesn't crash the shell
class RemoteErrorBoundary extends Component<
{ fallback: ReactNode; children: ReactNode },
{ hasError: boolean }
> {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error: Error) {
// Log to monitoring — Remote loading failure is a high-priority alert
reportError(error, { context: "remote-load-failure" });
}
render() {
if (this.state.hasError) return this.props.fallback;
return this.props.children;
}
}
Phase 1: /checkout → extracted as Remote
Phase 2: /catalog → extracted as Remote
Phase 3: remaining monolith shell (homepage, navigation)
microfrontend-patterns — Module Federation setup, shared state, design system, CSS isolationtypescript-monorepo-patterns — managing multi-package repose2e-testing — Playwright E2E for full MFE composition testinglegacy-modernization — Strangler Fig and Branch-by-Abstraction migration patterns