add-shared-component

Add a React component to a federated shared library with Webpack Module Federation configuration.

Updated Aug 23, 2026

Search Tags:#frontend #react #components #ui/ux #reusability #module federation #shared library

One-click install

npx skills add https://github.com/fkalinski/modular-react --skill add-shared-component

Or copy as Structured Prompt for Agent▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires npm, react, webpack.

What problem does it solve?

Creating and integrating new reusable UI components into a federated React platform can be complex, requiring careful configuration for Module Federation, type definitions, and versioning. This Skill provides a streamlined guide to add components to the shared library, making them instantly available across all federated modules.

Core Features & Use Cases

Component Creation & Export: Step-by-step instructions for creating a new React component and exporting it from the shared library.
Module Federation Exposure: Configure Webpack to expose your new component via Module Federation, ensuring runtime availability.
Use Case: When your design system team creates a new DatePicker component, use this Skill to guide you through adding it to shared-components, exposing it, and making it consumable by all other tabs and shells without manual bundling.

Quick Start

Use the add-shared-component skill to add a new 'DatePicker' component to the shared library.