How does this skill analyze legacy UI code?

The skill dispatches a specialized sub-agent that scans C# files to identify layout structures, data interactions, and event handlers, mapping them to modern web equivalents.

Does it support visual regression testing?

While it doesn't run automated pixel diffing, it integrates screenshot references into the workflow to facilitate human-led visual verification.

What are the two-gate approval flows?

The workflow pauses for human approval twice: first to verify the implementation plan (Gate 1) and second to verify the visual and functional output (Gate 2).

Is the superpowers plugin required?

Yes, this skill acts as an orchestrator that leverages the superpowers plugin for the specific creation and execution of development plans.

Frontend Epic Orchestrator

Name: Frontend Epic Orchestrator
Author: woodrowpearson

bywoodrowpearson

0•

设计工具

Orchestrates frontend development cycles through legacy UI analysis, component planning, and multi-stage verification gates.

The Frontend Development skill provides a structured framework for migrating and developing complex web features by analyzing legacy C# Windows Forms UI and translating them into modern React components. It manages the entire development lifecycle—from context collection and automated UI analysis to human-approved planning and visual verification—ensuring high-fidelity implementation of application features while maintaining strict quality control through multi-stage approval gates.

主要功能

01Visual Verification Workflow: Facilitates side-by-side UI comparison between legacy screenshots and new web components.

020 GitHub stars

03Multi-Stage Approval Gates: Implements mandatory human-in-the-loop reviews after planning and before final execution.

04Automated Planning Integration: Seamlessly invokes planning plugins to generate comprehensive technical blueprints.

05Legacy UI Analysis: Deep-scans C# Windows Forms code to extract layout, logic, and data flow patterns.

06Epic Progress Tracking: Maintains detailed state management and documentation across multiple development phases.

使用场景

01Mapping C# UI patterns into standardized web equivalents like TanStack Table and shadcn/ui.

02Migrating legacy desktop applications (WinForms) to modern React-based web architectures.

03Orchestrating complex frontend feature development that requires strict quality gates and human oversight.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add woodrowpearson/mids-hero-web frontend-development

For use in Claude.ai and ChatGPT

主要功能

01Visual Verification Workflow: Facilitates side-by-side UI comparison between legacy screenshots and new web components.

020 GitHub stars

03Multi-Stage Approval Gates: Implements mandatory human-in-the-loop reviews after planning and before final execution.

04Automated Planning Integration: Seamlessly invokes planning plugins to generate comprehensive technical blueprints.

05Legacy UI Analysis: Deep-scans C# Windows Forms code to extract layout, logic, and data flow patterns.

06Epic Progress Tracking: Maintains detailed state management and documentation across multiple development phases.

使用场景

01Mapping C# UI patterns into standardized web equivalents like TanStack Table and shadcn/ui.

02Migrating legacy desktop applications (WinForms) to modern React-based web architectures.

03Orchestrating complex frontend feature development that requires strict quality gates and human oversight.