skills.rest
metabase
metabaseOFFICIAL
Explore all skills by this author →
Website𝕏@metabaseGitHub

fe-modularization

Guides frontend code moves across module tiers with boundary linting and verification procedures.

49.0k|6.8k|Updated Feb 2, 2015
Search Tags:#module boundaries#Frontend#modularization#typeScript#esLint#Code Migration#dependency tiers
One-click install
npx skills add https://github.com/metabase/metabase --skill fe-modularization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fe-modularization
Source: https://github.com/metabase/metabase/tree/main/.claude/skills/fe-modularization
Command: npx skills add https://github.com/metabase/metabase --skill fe-modularization

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Deciding where frontend code should live in a large modular codebase is error-prone: wrong placements create circular dependencies, bundle bloat, and boundary violations that linters miss. This Skill encodes the tier model, move mechanics, and verification steps so module moves, new module carves, and boundary fixes land cleanly in one PR.

Core Features & Use Cases

  • Placement decisions: Applies ordered tests (ownership, consumer-tier check, legitimate fixes, bridge placement, proven sharing) to decide where code belongs across the lib/basic/shared/feature/app tiers.
  • Move procedure: Provides a six-step workflow covering consumer enumeration greps, before/after bun run module-boundaries measurement, codemods, barrel exports, and full verification (lint, type-check, unit tests, static-viz bundle budget).
  • Boundary rules and traps: Documents hard rules (no re-exports, no deep imports past enforced barrels, facade modules for vendor libraries), side-effect-free directory constraints, endpoint migration via Api.injectEndpoints, and known traps like late binding and stale plans.
  • Use Case: When moving a utility from a feature module into the shared tier, use this Skill to enumerate consumers, verify the destination tier sits below the lowest consumer, execute the move, and report violation counts before and after.

Quick Start

Ask the AI to move a specific frontend file or module to a new home and have it follow the modularization procedure with before and after boundary measurements.

Frequently Asked Questions about fe-modularization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I decide where frontend code should live in a modular codebase?▼

Apply ordered tests: assign code to the module owning its concept, then run the consumer-tier check so the destination sits at or below the lowest consumer. Only four fixes are legitimate for bad edges: move the code, invert through an extension point, fix tier placement, or delete a thin wrapper.

How do I move a module without breaking import boundaries?▼

Enumerate all consumers with grep including jest mocks and addMatcher calls, measure violations with bun run module-boundaries, then git mv, codemod importers, add barrel exports, and delete the old path in one PR. Verify with lint, type-check, unit tests, and a final boundary count.

What is the difference between enforceSharedTiers and enforcePublicApi?▼

enforceSharedTiers: false exempts a module from shared-tier level rules and is counted by the standalone boundary lint but invisible to PR lint. enforcePublicApi: true restricts outside imports to the module's index.ts barrel, enforced in CI.

Why does importing one constant from a barrel break the bundle budget?▼

A barrel that is not side-effect free drags its entire module graph into the bundle, which once pulled Mantine into the static-viz build. The fix is listing the directory in SIDE_EFFECT_FREE_PATHS and keeping it free of import-time work, never a deep import.

When should code not be moved to a shared module?▼

Do not move code shared by only one consumer; a shared address requires two or more consumers the tier rules cannot serve otherwise. Also stop when any consumer sits below the proposed destination tier, and report the blocking consumer instead.

Related Skills

Explore More Software Engineering Skills→
vardhineediganesh877-uivardhineediganesh877-ui

codebase-map

Analyze TypeScript/JavaScript repositories to generate a queryable dependency map.

Community
Advanced
TheCardGoatTheCardGoat
14

source-command-review-pr-comments

Resolve unanswered GitHub pull request review comments and run tests.

Official
Intermediate
PatternsDevPatternsDev
235

tree-shaking

Eliminate dead code from JavaScript bundles using ES module imports.

Official
Intermediate
pax-kpax-k
3

architecture-boundary-enforcer

Enforce and document architecture boundaries using dependency-cruiser, ESLint, import-linter, and custom scripts.

Community
Advanced