Does this work with Module Federation?

Yes, it is specifically designed to handle Module Federation architectures where maintaining strict isolation between micro-apps is crucial.

What kind of side effects can this skill detect?

It identifies CSS conflicts, global variable pollution, unmanaged event listeners, and risky DOM mutations like direct innerHTML usage.

Should I scan my source code or my build directory?

Scanning the build directory (dist) is recommended for production accuracy, while source scanning is useful for early development feedback during coding.

Can I customize the scan to ignore specific files?

Yes, you can utilize a .serc.ts configuration file to define ignore lists, path aliases, and maximum dependency traversal depth.

Side Effect Analyzer

Name: Side Effect Analyzer
Author: module-federation

bymodule-federation

セキュリティとテスト

Identifies and fixes frontend side effects like CSS leaks, global variable pollution, and unmanaged event listeners to ensure application isolation.

概要

The Side Effect Analyzer skill integrates the @module-federation/side-effect-scanner into your development workflow to detect risky behaviors that compromise frontend stability. It analyzes both source code and built artifacts to uncover global scope pollution, CSS selector conflicts, and memory leaks from event listeners. This skill is essential for developers working with micro-frontends or Module Federation, providing actionable audit reports and prioritized fix strategies to prevent cross-module interference and performance degradation.

主な機能

Identifies global variable pollution and window object overrides.
Audits event listeners for missing cleanup and anonymous handlers.
Generates structured Markdown and JSON reports for PR reviews.
Detects global CSS leaks and selector conflicts across modules.
Analyzes both source entry points and production-ready build artifacts.
0 GitHub stars

ユースケース

Troubleshooting 'zombie' styles and script conflicts in micro-frontend architectures.
Auditing Pull Requests for unintended side effects before merging code.
Optimizing production bundles by identifying and removing risky DOM mutations.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add module-federation/side-effect-scaner side-effect-analyzer

For use in Claude.ai and ChatGPT

Download Skill

GitHub

概要