add-federated-tab

Create a new federated tab in a modular React application.

Updated Aug 23, 2026

Search Tags:#frontend #react #extension #webpack #module federation #tabs #plugin system

One-click install

npx skills add https://github.com/fkalinski/modular-react --skill add-federated-tab

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: add-federated-tab
Source: https://github.com/fkalinski/modular-react/tree/main/skills/add-federated-tab
Command: npx skills add https://github.com/fkalinski/modular-react --skill add-federated-tab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires npm, webpack, react, typescript, @module-federation/enhanced.

What problem does it solve?

Integrating new features as federated tabs in a modular React application involves intricate Module Federation, Webpack, and React configurations. This Skill provides a comprehensive, step-by-step guide to streamline the process, ensuring your new tab integrates seamlessly without manual guesswork.

Core Features & Use Cases

Guided Tab Creation: Follow a detailed guide to set up directory structure, install dependencies, and create core tab components.
Module Federation Configuration: Learn to correctly configure Webpack for exposing your tab and consuming shared modules.
Use Case: When a product manager requests a new "Analytics Dashboard" tab, use this Skill to generate the boilerplate and guide you through the integration steps, saving hours of setup and configuration time.

Quick Start

Use the add-federated-tab skill to create a new federated tab named 'AnalyticsDashboard'.