MFE Skills — плагин
Два скилла для архитектуры микрофронтендов: восемь правил границ из книги O'Reilly, поиск нарушений и приемы исправления
- 66 ★ репозитория
- Последний коммит
Минимальный доступ
Почему такой уровень
- Скиллы дают инструкции и правила ревью и сами ничего не запускают
Установка
- Работает в
В терминале, через 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: агент выбирает слой для кода во фронтенд-проекте и не нарушает границы импортов.
Скилл с китайскоязычными правилами для агента: как писать и ревьюить интерфейс продукта, состояния, данные и компоненты
Скилл building-ui открывает редактируемый макет интерфейса: правки идут прямо в нем, затем агент реализует его через TDD.
Front-End Checklist проверяет фронтенд-код и публичные страницы по 386 правилам доступности, SEO, скорости и безопасности.
Набор скиллов для работы агента над UI: правила масштаба, сдержанности и движения и проверка результата в живом приложении
Скиллы Material UI
Material UI agent skills
Четыре официальных скилла Material UI: стилизация, темы, интеграция с Next.js и совместная работа с Tailwind CSS
Коротко о 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).