Django to React witha Claude skill set
I built a Claude Code skill set that knows how to port a legacy Django screen to our React stack, then let it carry out the migration of four live project boards. Dev-complete in about a week, then checked against the old app with 450 parity checks.
To dev-complete on four board views and their API
Parity checks run against the legacy app
Board views migrated, each on real endpoints
One parity check surfaced a live production bug in the legacy app
Thechallenge
The project tracker is where procurement teams track every project from intake to signed savings. Its four main boards - a grid, a kanban, a status board and a Gantt calendar - were server-rendered Django templates driven by a lot of jQuery. Much of the data arrived as HTML fragments, and plenty of business rules lived only in that front-end script.
The company was moving everything into one React + TypeScript hub. The project tracker was the hardest piece: no shared code with the new app, no JSON API for most of what the boards showed, and customers relying on it every day for approvals and savings reporting.
Doing it by hand meant weeks of careful reading and rewriting. I wanted to see whether the right AI tooling, with the right guardrails, could do the heavy lifting without producing code nobody could review.
How Iapproached it
Build the skill set first
Before touching the boards I wrote the tooling: a porting skill that defines the migration contract, a design-system skill that knows our shared UI kit, a white-label skill for tenant theming, a ticket workflow skill, and CLAUDE.md standards for each repo that document its traps - two Django versions years apart, different tenancy models, pagination and soft-delete conventions.
One fixed structure per board
The porting skill enforces the same layering every time: a thin entry file, a view that only renders, a context that wires it, a service hook for state and handlers, and one query hook per endpoint. A file-size limit and a strict "no behaviour change during a port" rule keep the output predictable and easy to review board by board.
Let the skills do the port
With the contract in place, the skill set read each legacy template and script, inventoried what it fetched and what every click did, and produced the React module and the new Django REST API behind it. My job was direction and review, not typing.
Checkpoints, not a big bang
Type-check and smoke-test after every layer, so mistakes surfaced while they were small. The old Django boards kept serving customers the whole time while the new ones ran on staging.
Prove it matched
Because the two apps shared no code, nothing could be diffed. So every legacy behaviour was checked against the new screens one by one - 450 checks, each marked pass, partial or fail with evidence from both sides.
Highlightsworth showing
- (01)
A reusable Claude Code skill set - porting, design system, white-label, ticket workflow and per-repo CLAUDE.md standards - that turns "AI wrote it" into code a team can review.
- (02)
Four complex boards rebuilt: an AG Grid server-side grid with persisted columns, a drag-and-drop kanban with optimistic updates, a status board with savings roll-ups, and a week/month Gantt calendar.
- (03)
A new Django REST API for the boards, with business logic in use-case classes so old pages and new API share the same rules.
- (04)
No downtime: legacy and new boards ran side by side during the switch.
- (05)
A 450-check parity audit that gave the team an exact, prioritised list of what was left - and caught a bug that was already live in the old app.
Have a project like this?
Tell me what you’re building or what’s broken. I’ll tell you straight whether I’m the right person for it.