modernisation

Migrate legacy .NET 4 and AngularJS code to .NET 8 minimal APIs and React 19.

Updated May 21, 2026
One-click install
npx skills add https://github.com/Collins1892/radar-practice --skill modernisation-collins1892
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: modernisation
Source: https://github.com/Collins1892/radar-practice/tree/main/.claude/skills/modernisation
Command: npx skills add https://github.com/Collins1892/radar-practice --skill modernisation-collins1892

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Porting legacy .NET 4 / AngularJS applications to a modern stack often produces mechanical line-by-line translations that carry over outdated idioms. This Skill guides agents to extract behaviour and domain intent from legacy code and rebuild it as idiomatic .NET 8 minimal APIs and React 19 modules that match the repo's established Incidents/Audits conventions. ## Core Features & Use Cases - Behaviour-first migration: Reads legacy controllers, services, and views to extract routes, fields, validation rules, and user-visible copy before writing any modern code, while treating the legacy tree as read-only. - Pattern mapping tables: Provides explicit .NET 4 → .NET 8 and AngularJS → React 19 conversion guidance (e.g. Web API controllers to minimal API endpoints, $scope to hooks, $http to typed fetch layers). - Guardrailed workflow: Enforces one vertical slice per request, repository pattern, global exception handling, synthetic data only, test runs before completion, and PR-based delivery. - Use Case: Ask the agent to migrate the legacy Audits list screen; it reads the AngularJS views, builds an AuditsApi endpoint with EF Core and SQLite, creates a React AuditsView reusing shared components, runs dotnet test and npm test, and raises a PR capturing the transformation. ## Quick Start Migrate the legacy Audits module from the legacy folder into a new .NET 8 minimal API and React 19 vertical slice following the Incidents module patterns.

Frequently Asked Questions about modernisation

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

FAQPage Schema
How do I migrate AngularJS code to React 19?

Extract behaviour from the AngularJS controllers, services, and templates first, then rebuild using function components with hooks, controlled inputs, and react-router-dom routing. Avoid copying $scope shapes or controller names into React; decompose into screens, forms, and thin route shells instead.

How do I convert .NET 4 Web API controllers to .NET 8 minimal APIs?

Replace controllers and HttpResponseMessage with minimal API MapGet/MapPost endpoints returning Results.Ok, Results.Created, or Results.NotFound. Move data access into a dedicated DbContext with an Ef-prefixed repository behind an interface, registered with scoped DI.

Can I edit or fix the legacy code during migration?

No. The legacy tree is permanent read-only before-state evidence used to understand what to build. All fixes and improvements happen only in the modern target projects, never in the legacy folder.

What tests should run after a legacy migration?

Run dotnet test for the new API project's test suite and npm test from the client directory for the React side. Confirm the full suite passes before declaring the migration done, and raise the work as a PR on a feature branch.

When should I not use a rewrite-based migration approach?

Rewrite-based migration fits when the legacy stack is obsolete and the target conventions already exist in the repo. If you only need a small bug fix in a still-supported legacy system, patching in place may be safer than a full port.