skills.rest
jikime
jikimeCOMMUNITY
Explore all skills by this author →
GitHub

jikime-migration-smart-rebuild

Rebuild legacy websites into Next.js and backend code from screenshots and source analysis.

5|1|Updated Jan 24, 2026
Search Tags:#Next.js#Playwright#Spring Boot#legacy modernization#AI code generation#screenshot analysis#website rebuild
One-click install
npx skills add https://github.com/jikime/jikime-adk --skill jikime-migration-smart-rebuild
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jikime-migration-smart-rebuild
Source: https://github.com/jikime/jikime-adk/tree/main/templates/.claude/skills/jikime-migration-smart-rebuild
Command: npx skills add https://github.com/jikime/jikime-adk --skill jikime-migration-smart-rebuild

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, typescript, ts-node, chalk, commander, glob, ora, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the complex and time-consuming process of modernizing legacy websites by rebuilding them from scratch using current frameworks and best practices, based on visual and source code analysis.

Core Features & Use Cases

  • Visual Rebuilding: Recreates UIs pixel-perfectly from screenshots using modern components (like shadcn/ui).
  • Code Generation: Generates clean, modern frontend (Next.js) and backend (Spring Boot, FastAPI, etc.) code.
  • Page-by-Page Workflow: Processes sites incrementally, ensuring quality and allowing for iterative feedback.
  • Use Case: Modernize an outdated PHP e-commerce site into a performant Next.js application with a robust Java backend, preserving the original look and feel while leveraging new technologies.

Quick Start

Use the jikime-migration-smart-rebuild skill to rebuild the legacy site located at https://example.com using Next.js and Java.

Frequently Asked Questions about jikime-migration-smart-rebuild

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

FAQPage Schema
How do I modernize a legacy website using screenshots and source code?▼

Modernize a legacy website by using a page-by-page workflow that captures site structure and screenshots, analyzes source code for database interactions, and generates clean Next.js and Spring Boot codebases. This ensures visual fidelity and functional accuracy.

Can I rebuild a legacy PHP site into Next.js and Spring Boot automatically?▼

Yes, you can rebuild a legacy PHP site into Next.js and Spring Boot automatically. The process analyzes visual layouts and source code, generating modern frontend and backend codebases incrementally to ensure a safe transition to new architectures.

What is the best way to migrate legacy sites while preserving the original UI?▼

The best way to migrate legacy sites while preserving the UI is visual rebuilding. This approach recreates interfaces pixel-perfectly from screenshots using modern components like shadcn/ui, ensuring the new application maintains the original look and feel.

Does the website rebuild process support backend frameworks other than Spring Boot?▼

Yes, the website rebuild process supports multiple backend frameworks. Alongside Java Spring Boot, it generates modern backend code using Python FastAPI, Go Fiber, and NestJS based on the analyzed dynamic content and database interactions of the legacy system.

How does AI code generation handle dynamic content during legacy modernization?▼

AI code generation handles dynamic content by analyzing the legacy source code to identify database interactions and dynamic elements. It then processes the site incrementally, generating new frontend and backend code that accurately replicates the original functional behavior.

Do I need Playwright to automate legacy modernization from screenshots?▼

Yes, Playwright is required to automate the legacy modernization process. It functions as a core dependency to capture the site structure and screenshots needed for visual analysis and pixel-perfect UI rebuilding with modern components.

Related Skills

Explore More Software Engineering Skills→
chrismccoychrismccoy
2

page-cloner

Clones a live webpage into standalone HTML with preserved markup, styles, and assets.

Community
Advanced
yuhle-qugyuhle-qug

devops-expert

Design CI/CD pipelines, containerization, and infrastructure as code with Kubernetes, Docker, and Terraform.

Community
Advanced
jitenkr2030jitenkr2030

fullstack-dev

Bootstrap fullstack web apps with Next.js 16, TypeScript, Tailwind CSS 4, and Prisma ORM.

Community
Advanced
involvexinvolvex
2

web-design-reviewer

Detect and fix visual and layout issues in web applications.

Community
Advanced