MFE Skills — плагин

Два скилла для архитектуры микрофронтендов: восемь правил границ из книги O'Reilly, поиск нарушений и приемы исправления

  • 66 ★ репозитория
  • Последний коммит
Плагин

Минимальный доступ

Почему такой уровень

  • Скиллы дают инструкции и правила ревью и сами ничего не запускают
Все причины и проверки

lucamezzalira/mfe-skills

Установка

В терминале, через SkillFoxx CLI

npx skillfoxx add plugins/mfe-skills

Определит агенты на машине, покажет уровень доступа и зафиксирует версию.

Другие способы установки

Доступ и проверки

Как мы проверяем

Минимальный доступИнструмент ничего не запускает и не ходит в сеть.

  • Скиллы дают инструкции и правила ревью и сами ничего не запускают

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Набор из двух скиллов учит ассистента границам микрофронтендов по восьми правилам из книги «Building Micro-Frontends» (O'Reilly). Охвачены Module Federation v1 и v2, Native Federation для Angular и Single SPA. Скилл `understanding-mfe-architecture` включается при решениях о внедрении, проектировании границ и способах композиции, а `reviewing-mfe-boundaries` при ревью кода, генерации оболочки, поиске нарушений и обмене между микрофронтендами. Автор проверил подход экспериментом: два агента получили одинаковое задание (React 19, Module Federation, оболочка с главной и каталогом). Без скиллов получились импорты между удаленными модулями, глобальное состояние и жестко прописанные адреса, с ними оболочка осталась тонкой, адреса брались из манифеста обнаружения, а каждая команда владела своими путями. Скиллы дают нарушения с привязкой к правилу, степенью серьезности и способом исправления, а также темы расширенного управления: области флагов функций, периферийные вычисления, владение SSR и функции пригодности для CI (`ts-arch` и `jest`). Для Cursor есть правила `.mdc`, для Codex `AGENTS.md`, для Claude Code плагин.

Для кого. Архитекторам и командам фронтенда, которые строят или проверяют микрофронтенды на Module Federation, Native Federation или Single SPA.

Подходит, если

  • Команда решает, нужны ли микрофронтенды, и как провести границы между доменами
  • Агент генерирует оболочку или удаленные модули, и надо исключить импорты между ними
  • Идет ревью интеграции оболочки с замечаниями по номерам правил
  • В CI надо закрепить границы функциями пригодности на `ts-arch` и `jest`

Не подходит, если

  • Приложение монолитное и разбивать его на микрофронтенды не планируется
  • Нужны подсказки по стилям компонентов или общим практикам React: скиллы про границы
  • Команда одна и независимые релизы не нужны

Пример запроса к агенту

Проверь интеграцию оболочки с микрофронтендами по восьми правилам границ и укажи номера нарушенных правил

Ограничения

Правила опираются на книгу и взгляды автора, и для вашей системы их стоит дополнить `AGENTS.md` или `CLAUDE.md` с владением командами, инструментами и известными исключениями. Скилл Canvas-фасилитации `micro-frontend-canvas` вынесен в отдельный репозиторий. Рекомендуемая установка различается: для Cursor лучше копировать папки скиллов в `.cursor/skills/`, для Codex в `.codex/skills/`, для Antigravity в `.agents/skills/`. Скиллы только советуют и проверяют, а нарушения в CI вы закрепляете сами по шаблону из `docs/governance.md`. Результаты эксперимента получены автором на одном задании.

Как отключить. Выполните `/plugin uninstall mfe-skills` или удалите папки скиллов из `.cursor/skills/`, `.codex/skills/` и `.agents/skills/`.

Частые вопросы

Как поставить MFE Skills в Claude Code?

Выполните `/plugin marketplace add lucamezzalira/mfe-skills`, затем `/plugin install mfe-skills@mfe-skills`. Скиллы вызываются как `/mfe-skills:understanding-mfe-architecture` и `/mfe-skills:reviewing-mfe-boundaries`.

Какие технологии покрыты?

Module Federation v1 и v2, Native Federation для Angular и Single SPA. Набор посвящен архитектурным границам и не привязан к бандлеру.

Что дает каждый из двух скиллов?

`understanding-mfe-architecture` отвечает за решения о внедрении, границы и композицию, а `reviewing-mfe-boundaries` за ревью кода, генерацию оболочки и поиск нарушений.

Зачем нужен AGENTS.md проекта?

Скиллы дают общие правила, а `AGENTS.md` или `CLAUDE.md` сообщает агенту о владении командами, инструментах и исключениях, чтобы правила применялись к вашей системе.

Есть ли пример проекта?

Да, репозиторий `lucamezzalira/mfe-with-skills`: ветка `ecommerce-init-implementation` содержит рабочее приложение с оболочкой и пятью удаленными модулями.

Обсуждение

Вопросов и отзывов пока нет.

Плагины

Скилл по Feature-Sliced Design 2.1: агент выбирает слой для кода во фронтенд-проекте и не нарушает границы импортов.

СкиллМинимальный доступ117Звезды репозитория

Скилл с китайскоязычными правилами для агента: как писать и ревьюить интерфейс продукта, состояния, данные и компоненты

СкиллМинимальный доступ146Звезды репозитория

Скилл building-ui открывает редактируемый макет интерфейса: правки идут прямо в нем, затем агент реализует его через TDD.

ПлагинРасширенный доступ82Звезды репозитория

Front-End Checklist проверяет фронтенд-код и публичные страницы по 386 правилам доступности, SEO, скорости и безопасности.

MCP-серверМинимальный доступ74,7 тыс.Звезды репозитория

Набор скиллов для работы агента над UI: правила масштаба, сдержанности и движения и проверка результата в живом приложении

ПлагинРасширенный доступ66Звезды репозитория

Скиллы Material UI

Material UI agent skills

Четыре официальных скилла Material UI: стилизация, темы, интеграция с Next.js и совместная работа с Tailwind CSS

СкиллМинимальный доступ99,3 тыс.Звезды репозитория

Коротко о README

README объясняет, зачем нужны скиллы, показывает результаты эксперимента до и после, перечисляет расширенное управление и установку для Claude Code, Cursor, Codex, Copilot и Antigravity. В конце идет прохождение за пятнадцать минут.

Бейдж для README

Исходный SKILL.md

---
name: reviewing-mfe-boundaries
description: Reviews and generates micro-frontend code against eight boundary rules from Building Micro-Frontends (O'Reilly), plus governance extensions for feature-flag scope, edge strategy, SSR ownership, and boundary fitness functions. Use when a user says "review my shell code", "is this a boundary violation?", "generate a Module Federation shell", "how do I mount this MFE?", "review my micro-frontend architecture", "set up event communication between MFEs", "create a new micro-frontend", "how should we use edge with MFEs?", "where should feature flags live?", or "how do I enforce boundaries in a monorepo?". Loads automatically when the user pastes shell integration code, Module Federation config, Single SPA registration, or Native Federation routes. Does not activate for component-level code within a single deployed unit, or for generic React, Vue, or Angular questions with no cross-team deployment angle.
license: "MIT — Copyright (c) Luca Mezzalira"
compatibility: Works in Claude.ai, Claude Code, and any Claude API environment. No external tools or MCP servers required. Covers React, Angular, Vue with Module Federation v1/v2, Native Federation, and Single SPA toolchains.
metadata:
  author: luca-mezzalira
  version: "1.0"
  category: architecture
  tags: [micro-frontends, module-federation, native-federation, single-spa, angular, react, boundary-governance, edge-compute, ssr, feature-flags, fitness-functions]
---

# MFE boundary health

Reviews and generates micro-frontend code against the eight boundary rules from *Building Micro-Frontends* (O'Reilly). All rules are tool-agnostic. Full rule definitions, violation signals, and code-checkable patterns are in `references/rules-core-critical.md` (rules 3 and 4) and `references/rules-core-standard.md` (rules 1, 2, 5, 6, 7, 8). Load the file that covers the rule you need.

**On every activation, apply this summary table directly — no file load needed:**

| Rule | What to check in code | Severity |
|---|---|---|
| 1 — Business subdomain | Name reflects a business capability, not a UI element | High |
| 2 — Minimal API surface | Fewer than 5 props; no full domain objects passed | Critical |
| 3 — Hide implementation details | No direct imports from another MFE's internals | Critical |
| 4 — Events not shared state | No shared store; shell handles `shell:*` only; domain events peer-to-peer or URL | Critical |
| 5 — Independent deployment | No versioned URLs in shell config; no build-time MFE imports; no CI pipeline coupling | High |
| 6 — Isolate failure | Every remote mount has a fallback in the shell | High |
| 7 — Coarse-grained | Nesting depth > 1 (MFE inside MFE); more than 3 MFEs per view | High |
| 8 — Single-team ownership | One team in CODEOWNERS; no cross-team sign-off on internals | High |

For full rule definitions and violation signals: load `references/rules-core-critical.md` or `references/rules-core-standard.md`.
For framework-specific patterns (MF v2, Angular/Native Federation, Single SPA): load `references/rules-toolchain.md`.
For URL routing ownership (shell first segment, MFE deeper paths): load `references/routing-ownership.md`.
For fix patterns and step-by-step remediation: load `references/remediation.md` when the user asks how to fix a violation or requests a migration plan.
For framework-by-framework code generation patterns (React, Angular, Vue, Single SPA): load `references/code-patterns.md`.

---

## Cold start: new project

If no boundaries exist yet, ask about the highest-priority unknown first — one question per turn. Do not generate implementation code until each check is resolved.

**Check 1 — Team ownership**
Ask: "Which team will own this micro-frontend end-to-end — design, development, deployment, and operations?"
**If unresolved:** do not generate implementation code. Ask the user to install the **micro-frontend-canvas** skill and complete a canvas iteration (see https://github.com/lucamezzalira/mfe-canvas).

Сообщить о проблеме