fm-plan

Generates a migration-plan.json from page analysis and style-spec for legacy-to-React migration.

1|Updated Feb 19, 2026
One-click install
npx skills add https://github.com/ohmyhotelco/hare-cc-plugins --skill fm-plan-ohmyhotelco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fm-plan
Source: https://github.com/ohmyhotelco/hare-cc-plugins/tree/main/frontend-migration-plugin/skills/fm-plan
Command: npx skills add https://github.com/ohmyhotelco/hare-cc-plugins --skill fm-plan-ohmyhotelco

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Migrating a legacy page to React without a fixed plan causes scope drift, missed behavioral variants, and gates that fail on correct code. This Skill turns a page's analysis.json and style-spec.json into a migration-plan.json that locks the component tree, rendering mode, required gates, and E2E scenarios before any code is generated. ## Core Features & Use Cases - Plan generation via migration-planner agent: Produces migration-plan.json with the React component tree, style targets, shared-package dependencies, rendering mode, required gates, 2-PR flag plan, and E2E scenario list. - Coverage reconciliation: Verifies every mustPreserve behavioral variant and copy source is either represented in the plan or recorded in openApprovals with a decision owner, preventing silent scope reductions. - State and safety guards: Refuses pages already flipped, done, or mid-flip, warns before demoting verified pages, and enforces lock files around tracker writes. - Use Case: After running fm-analyze and fm-style-spec on a hotel booking page, run this Skill to produce the migration plan that fm-gen will consume, with i18n language sets bound into the visual and E2E gate acceptance criteria. ## Quick Start Run /frontend-migration-plugin:fm-plan for my checkout page after fm-analyze and fm-style-spec have completed.

Frequently Asked Questions about fm-plan

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

FAQPage Schema
How do I plan a legacy page migration to React?▼

Run fm-plan after completing fm-analyze and fm-style-spec for the page. It launches a migration-planner agent that writes migration-plan.json containing the component tree, rendering mode, required gates, and E2E scenarios, then records the page status as planned in tracker.json.

What inputs does a frontend migration plan require?▼

The planner requires analysis.json and style-spec.json for the page, plus the plugin config file .claude/frontend-migration-plugin.json with a configured app entry. Missing analysis or style-spec stops the skill with a message pointing to the prerequisite commands.

Why does fm-plan refuse to run on a flipped or done page?▼

A flipped page still serves production traffic through an edge flag, so rewriting its plan would desync the tracker from the live flag. A done page has no legacy code left to roll back to, so it requires manual intervention rather than fm-route --revert.

What happens if a mustPreserve behavior is missing from the migration plan?▼

The plan is treated as incomplete and the planner must be re-run before recording. Every mustPreserve behavioral variant or copy source must appear in the plan or be recorded in openApprovals with a rationale and decision owner, so reductions reach a human.

Does the migration plan support multilingual pages?▼

Yes. When the config has an i18n block, the planner writes the language set into both gateAcceptance.visual.languages and gateAcceptance.e2e.languages. Without an i18n block both omit it and executors record that axis as not-run.