skills.rest
ohmyhotelco
ohmyhotelcoOFFICIAL
Explore all skills by this author →
GitHub

fe-plan

Generates a React implementation plan from a functional specification or interactive requirements gathering.

1|Updated Feb 19, 2026
Search Tags:#tdd#spec-driven#frontend#react#code generation#implementation plan#incremental
One-click install
npx skills add https://github.com/ohmyhotelco/hare-cc-plugins --skill fe-plan-ohmyhotelco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fe-plan
Source: https://github.com/ohmyhotelco/hare-cc-plugins/tree/main/frontend-react-plugin/skills/fe-plan
Command: npx skills add https://github.com/ohmyhotelco/hare-cc-plugins --skill fe-plan-ohmyhotelco

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning a functional specification into a concrete frontend build plan is error-prone when done ad hoc: files get missed, routes and i18n namespaces are inconsistent, and spec changes force full rebuilds. This Skill analyzes a spec (or gathers requirements interactively) and produces a structured implementation plan for production React code. ## Core Features & Use Cases - Spec-driven planning: Reads the planning-plugin specification, UI DSL manifest, and prototypes to produce a plan.json covering types, API services, stores, components, pages, routes, i18n, MSW mocks, and tests across six TDD phases. - Standalone mode: When no spec exists, gathers entities, screens, and language interactively and generates a minimal spec plus plan. - Incremental delta planning: Detects spec changes against an existing plan and generates a delta-plan.json so only affected files are regenerated, with a large-delta warning when full regeneration is safer. - Use Case: After finalizing a hotel-booking spec with the planning plugin, run this Skill to get a file-by-file React implementation plan, then hand it to fe-gen for TDD code generation. ## Quick Start Run /frontend-react-plugin:fe-plan booking-flow to generate an implementation plan for the booking-flow feature from its functional specification.

Frequently Asked Questions about fe-plan

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

FAQPage Schema
How do I create a React implementation plan from a functional specification?▼

Run fe-plan with the feature name after finalizing the spec with the planning plugin. It reads the spec, UI DSL manifest, and prototypes, then launches a planner agent that writes plan.json covering files, routes, tests, and six TDD phases.

Can I plan a frontend feature without a written specification?▼

Yes, use the --standalone flag or accept standalone mode when no spec is found. The Skill interactively gathers a description, entities, screens, and language, generates a minimal spec, and produces a simplified plan.

How does incremental planning handle spec changes?▼

When a plan and generated code already exist, fe-plan offers incremental mode. The planner compares the current spec against the existing plan and writes a delta-plan.json listing only affected files, so fe-gen regenerates just those.

What happens if the spec is still in draft status?▼

fe-plan stops and asks you to finish the specification first when the progress status is drafting or analyzing. For reviewing status it warns about unresolved issues and asks whether to continue.

Why does fe-plan fail with a lock or initialization error?▼

The Skill requires .claude/frontend-react-plugin.json created by fe-init, and it acquires a per-feature lock before writing. A live lock holder or missing config file causes it to stop with the reported holder or an initialization prompt.

Related Skills

Explore More Software Engineering Skills→
QunnnnQunnnn

writing-plans

Create structured implementation plans with file-level task breakdowns before coding.

Community
Advanced
roycolumbia-coderoycolumbia-code

gsd-add-tests

Generate unit and E2E tests from UAT criteria with RED-GREEN conventions.

Community
Intermediate
bipinksbipinks
3

wireframing-prototyping

Generate ASCII wireframes, information architecture diagrams, and Mermaid user-flow diagrams from design briefs.

Community
Intermediate
UBAIDRAZA1UBAIDRAZA1

spec-driven-development

Enforce spec-driven code generation and validation from formal Markdown specifications.

Community
Advanced