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 06 of 10 6-8 weeks· advanced

Step 6: Migrate Vertical Slice 1

Pick a small, contained workflow (e.g., "view customer details"). Build the entire vertical: SPA page → .NET API → DB query. Use it to validate every architectural decision.

What you're doing in this step

Ship one complete user-facing capability through the new web app. For desktop-to-web specifically, slice 1 should be read-only or low-risk write, exercise the auth flow, use the new design system, and connect to the legacy DB.

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 0.5 day

Feature Flag Rollout Strategy for Migrations

Use feature flags to safely route traffic between legacy and new systems during migration with controlled rollout and instant rollback.

View template
Template· Template 20 min

React Form Builder (react-hook-form + Zod)

Build a fully accessible, type-safe form with react-hook-form, Zod validation, and shadcn/ui components.

Use this when: Slice 1 is a form-heavy screen (the Angular equivalent uses reactive forms with the same patterns)

reacttypescriptnextjstailwindshadcn-ui
View template
Template· Template 45 min

Authentication Setup (OAuth + JWT)

Implement production-grade authentication with OAuth providers, JWT sessions, role-based access, and secure refresh flows.

Use this when: Slice 1 is the sign-in flow itself

nodejstypescriptnextjs
View template
Template· Template 1-2 days

Behavior Parity Test Suite

Generate tests that lock down current legacy behavior so the new system doesn't accidentally change it during migration.

Use this when: Slice 1 covers a critical workflow that needs parity verified against the legacy

View template
Template· Template 30 min

NestJS Module Scaffolder

Scaffold a NestJS module with controller, service, DTOs, validation, OpenAPI, and tests following enterprise patterns.

Use this when: You're using NestJS for the API instead of .NET

typescriptnodejs
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

Spec-Driven Builder Skill

Tool-neutral skill that walks developers through PRD → stories → schema → API → tests for any new feature, producing real artifacts at each step. The methodology is identical on every supported tool.

claude-codecopilotcursor
View skill
Skill· Skill 5 min setup

Test Generator Skill

Claude Code skill that picks the right test type (unit/integration/E2E) based on context and applies Evoke's testing patterns automatically.

claude-code
View skill
Skill· Skill 5 min setup

Code Reviewer Skill

Claude Code skill that performs comprehensive code review on PRs and diffs, prioritized by severity with concrete fixes.

claude-code
View skill
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 10 min setup

Azure DevOps MCP for Evoke

Pre-configured Azure DevOps MCP server for Claude Code — work items, repos, PRs, and pipelines from chat.

claude-codemcp
View config
MCP config· MCP config 10 min setup

GitHub MCP for Evoke

Pre-configured GitHub MCP server for Claude Code — issues, PRs, code search, and Actions from chat.

claude-codemcp
View config
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
View config
MCP config· MCP config 10 min setup

Postgres MCP for Evoke

Pre-configured Postgres MCP server for Claude Code — schema inspection and read-only queries to make database work safer and faster.

claude-codemcppostgres
View config
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.

  • Slice 1 working end-to-end (frontend + API + DB)
  • Auth working: a real user can sign in via the IdP
  • Tested against the legacy DB
  • Performance meets targets
  • Internal validation complete
Common pitfalls

What goes wrong at this step

  • Slice 1 too big — pick the smallest meaningful slice; you'll learn things to apply to bigger slices
  • Skipping the parity check — even if redesigning UX, validate the data is correct
  • Performance neglect — API calls over the network are slower than direct DB; design for it
← Previous step

Command Palette

Search for a command to run...