frontend-migration-plugin

Plugin frontend-migration-plugin from marketplace ohmyhotelco in ohmyhotelco/hare-cc-plugins. Commands read from the repo's manifest — 8 days ago.

Skills (18)

• fm-analyze

  Use to analyze a legacy OhMyHotel Angular target (page / component / service / store) before migrating it — produces analysis.json with the dependency graph, shared-package candidates, 3-app diff, and required gates.

• fm-audit-codex

  Use to run an independent Codex audit of a migrated page's artifacts — analyze/plan/gen/verify/e2e/parity/route — as a second opinion alongside Claude's own gates. Advisory: records codex-audit.json and never blocks (except the soft acknowledgement at fm-route --flag-on).

• fm-cascade

  Use after fm-verify and before fm-e2e to diff legacy's global stylesheet against the migrated app's, node by node, on the page's real markup — catching rule-level divergences (reset collisions, dropped global rules) that element-indexed style specs and jsdom DOM tests structurally cannot see. Needs

• fm-clean-code

  Use to audit generated React migration code for quality (composition, naming, types, accessibility, performance, convention compliance, simplicity/over-engineering) — a standalone review, independent of the pipeline, runnable on any path.

• fm-delta

  Use when the legacy Angular source for an already-migrated page changes (the staleness hook flags drift) — re-migrate only the changed surface via a delta plan, preserving accumulated fixes, then re-enter the gates.

• fm-e2e

  Use after fm-verify to run the Playwright E2E gatekeeper on a migrated page — realizes the planned scenarios, dual-runs against the legacy app for behavior parity, and runs transactional flows against staging gateways.

• fm-extract

  Use during Phase 0 to lift pure logic out of the legacy Angular apps into framework-agnostic packages/shared-* modules with tests, reconciling PC/Mobile/Hana divergence and enforcing the shared-domain secret boundary.

• fm-fix

  Use when a migration gate fails (fm-verify, fm-e2e, or fm-parity) — auto-detects the fix mode from the latest failure report, applies targeted repairs via the migration-fixer agent, and re-runs the gate. Also use with --mode review to fix PR review findings or QA defects on a gated, flip-prepared or

• fm-gen

  Use after fm-plan to generate the RR v7 page from migration-plan.json via a strict per-phase TDD pipeline (foundation -> api -> store -> component -> page -> integration), with resume and demotion safety.

• fm-init

  Use when setting up Frontend Migration Plugin for a project — detects the legacy Angular apps and monorepo layout, writes the plugin config, and initializes the migration tracker.

• fm-parity

  Use after fm-e2e to run the non-behavioral parity gates on a migrated page — visual regression vs legacy baseline, API contract freeze, WebView bridge round-trip, and telemetry dual-fire parity — the last gate before a route flip.

• fm-plan

  Use after fm-style-spec to turn a page's analysis.json + style-spec.json into a migration-plan.json — the React component tree (with style targets), shared-package deps, rendering mode, required gates, 2-PR flag plan, and E2E scenario list.

• fm-progress

  Use any time to see migration progress — a read-only dashboard from tracker.json: per-app/per-page status, gate state (verify/e2e/parity), shared-package extraction, and the suggested next step per in-flight page.

• fm-route

  Use to manage the Strangler Fig route flip for a migrated page at the app's configured edge layer (nginx, CloudFront, or a project flip script spanning several artifacts) — --flag-off prepares the routing artifact + flag (default OFF) for the code PR, --flag-on flips the path to the new app once ver

• fm-secret-audit

  Use as Phase 0 security pre-work — inventory the secrets read from the legacy environment.*.ts files, classify each by client-bundle vs server-only exposure, flag cross-environment reuse, and emit relocation guidance; re-run once pages ship to track secrets carried into the v2 apps. Read-only postur

• fm-style-spec

  Use after fm-analyze and before fm-plan to extract a page's legacy style answer key into style-spec.json — the live legacy render's per-element computed styles (Playwright probe), asset inventory, and markup structure — so fm-gen builds to real values instead of eyeballing them.

• fm-test-review

  Use to audit generated migration tests (Vitest + Playwright) for test quality — assertions, Testing Library usage, async handling, coverage, timing/flakiness, anti-patterns — a standalone review, independent of the pipeline.

• fm-verify

  Use after fm-gen to run the technical gate on a migrated page — build, TypeScript (composite-aware), Vitest, and ESLint (hard); Prettier --check is advisory — from the app's appDir, and advance the page to verified.

Subagents (17)

• angular-analyzer

  Parses a legacy OhMyHotel Angular 15 target (page / component / service / store) and emits a structured analysis.json that downstream migration skills consume. Read-only against legacy source; writes only the analysis artifact.

• cascade-differ

  Diffs a migrated page's global stylesheet against legacy's, node by node, by rendering the page's own markup twice in one engine with the stylesheet as the only variable — catching reset collisions and dropped global rules that element-indexed style specs and jsdom DOM tests cannot see. Read-only ag

• codex-auditor

  Runs an independent Codex audit of one migration stage's artifact — gathers the stage inputs, delegates to Codex via the codex-cli-runtime contract (headless codex exec), reads the real output, and records the verdict to codex-audit.json. Advisory only; never migrates or mutates pipeline state beyon

• delta-modifier

  Applies a delta-plan.json to an already-migrated page — targeted create/modify/remove on the existing generated files when the legacy Angular source drifts — preserving accumulated fm-fix changes and using TDD for behavioral changes.

• e2e-test-runner

  Realizes a page's planned E2E scenarios as Playwright specs and runs them as the migration gatekeeper — legacy-vs-new dual-run for behavior parity, staging payment gateways for transactional pages, MSW for the rest.

• foundation-generator

  Generates the non-TDD foundation for a page migration — TypeScript types, MSW mock handlers, and (once per app) the Playwright + Vitest + MSW test harness — so the TDD phases have something to compile and mock against.

• integration-generator

  Wires a migrated page into the app — React Router v7 routes, i18n namespace registration, and MSW global handler aggregation — mirroring the auto-integration pattern, with graceful fallback when central files differ.

• migration-fixer

  Applies targeted repairs that close a failed migration gate (verify / e2e / parity) without full regeneration, using the failure report as input and TDD discipline for behavioral changes.

• migration-planner

  Turns a page's analysis.json, style-spec.json, plus the mapping catalog into a migration-plan.json — the React component tree (with per-component style targets), shared-package deps, rendering mode, required gates, the 2-PR flag plan, and the E2E scenario list mapped from legacy flows.

• package-extractor

  Extracts one shared-package candidate from the legacy Angular source into a framework-agnostic packages/shared-* module using strict TDD, reconciling PC/Mobile/Hana divergence and enforcing the shared-domain secret boundary.

• parity-verifier

  Verifies non-behavioral legacy equivalence of a migrated page just before route flip — visual regression vs legacy baseline, API contract freeze, WebView bridge round-trip, and telemetry dual-fire parity. Behavior/flow is the separate fm-e2e gate.

• quality-reviewer

  Audits generated React migration code for code quality — composition, naming, types, accessibility, re-render/performance, convention compliance, and simplicity/over-engineering — independent of legacy parity. Read-only; writes a report.

• secret-auditor

  Inventories secrets read from the legacy environment.*.ts files, classifies each by client-bundle vs server-only exposure, flags cross-environment reuse, tracks where each secret lives once carried into a migrated v2 app, and emits relocation guidance. Read-only; writes a report. Posture only — does

• strangler-orchestrator

  Manages the Strangler Fig route flip for one migrated path at the app's configured edge layer — generates/reverts the nginx routing block + flag entry, the CloudFront behavior-manifest entry, or runs the project's own flip commands over every artifact a multi-tier edge needs — under one interface, e

• style-spec-extractor

  Extracts a page's legacy style answer key into style-spec.json — the live legacy render's per-element computed styles (via a standalone Playwright probe), plus the global-sheet cascade fallback, an asset inventory, and the markup nesting structure — so fm-gen builds to real values instead of eyeball

• tdd-cycle-runner

  Runs one strict Red-Green-Refactor TDD phase (api | store | component | page) for a page migration, translating the legacy Angular behavior into RR v7 code via the mapping catalog, importing the shared-* packages.

• test-reviewer

  Audits the generated migration tests (Vitest + Playwright) for test quality — assertion patterns, Testing Library usage, async handling, coverage, timing/flakiness, and anti-patterns. Read-only; writes a report.

Hooks (2)

• SessionStart

  ${CLAUDE_PLUGIN_ROOT}/scripts/session-init.sh

• PostToolUse

  ${CLAUDE_PLUGIN_ROOT}/scripts/check-staleness.sh

Similar plugins