Playbook
0 / 10 complete0%
  1. 01
  2. 02
  3. 03
  4. 04
  5. 05
  6. 06
  7. 07
  8. 08
  9. 09
  10. 10
Step 02 of 10 2-3 weeks· advanced

Step 2: Reshape Architecture for Multi-User Web

Redesign the app for the web before migrating any code. The most important phase — get this wrong and you ship a desktop app rendered in a browser.

What you're doing in this step

Decide what the new app looks like — not what the old app does. WinForms patterns rarely translate. Make explicit decisions on concurrency, state, auth, multi-tenancy, file handling, printing, real-time updates, and responsive scope.

Recommended prompts

Use one of these to do the work in your IDE

Open the template to read it in full. Click Copy prompt to grab it (with your stack values pre-filled where they apply) — then paste into Claude Code, Cursor, or wherever you build.

Primary recommendation 1 day

Coexistence Architecture ADR

Document the architecture decisions for running legacy and new systems in parallel during migration: routing, auth, data, and sessions.

View template
Template· Template 15 min

Architecture Decision Record (ADR) Generator

Generate a structured ADR documenting a technical decision and its trade-offs.

Use this when: You'd rather author each decision as its own ADR rather than one combined document

View template
Recommended skills

Drop these into Claude Code for this phase

Skills auto-trigger on the right kind of request. Install once; they apply to every prompt that fits.

Skill· Skill 5 min setup

Migration Planner Skill

Flagship migration skill that walks Claude Code through audit → strategy → slicing → cutover for any legacy system migration.

claude-code
Recommended MCP configs

Wire these tools into Claude Code first

MCP servers give Claude Code direct access to external systems (Jira, browsers, databases). Configure once.

MCP config· MCP config 5 min setup

Filesystem MCP for Evoke

Pre-configured filesystem MCP server for Claude Code — safe, scoped read/write access to project files.

claude-codemcp
When you're done

Verify these in your own work before moving on

This is a checklist for you to mentally tick off in your repo and IDE — the site doesn't track it, you do.

  • Target architecture documented
  • 5-10 ADRs covering: concurrency, state, auth, multi-tenancy, files, printing, real-time, responsive
  • UX redesign approach decided (1:1 port vs ground-up redesign vs hybrid)
  • Component library / design system chosen (shadcn for React, PrimeNG for Angular, etc.)
  • Performance targets set (load time, interaction latency)
Common pitfalls

What goes wrong at this step

  • 1:1 port mentality — porting WinForms patterns directly produces a bad web app
  • No UX redesign — desktop UX (modals everywhere, dense data grids) doesn't translate
  • Skipping the multi-tenant question — adding multi-tenancy later is much harder than designing it in
  • Ignoring mobile — even if "users will use desktop," tablet and phone use cases emerge
← Previous step

Command Palette

Search for a command to run...