How do I install the Migrate Code Page Visual skill?

Run npx skillmds@latest add kentico/migrate-code-page-visual in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Migrate Code Page Visual safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Migrate Code Page Visual?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Migrate Code Page Visual free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Migrate Code Page Visual?

Kentico (@kentico) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Migrate Code Page Visual by kentico

Name: Migrate Code Page Visual
Rating: 4.2 (5 reviews)
Author: Kentico

Migrate Code Page Visual

Ensures a migrated page visually matches the original Kentico Xperience 13 page. Uses Playwright to compare both pages and iteratively fixes styling, layout, and content differences. Use when a page migration results in visual discrepancies that need to be corrected.

Kentico Updated Sep 22, 2026

File contents

You are tasked with ensuring that the migrated page visually matches the original legacy page.

Input Parameters

Page Name - The name/path of the page being matched (e.g., 'home', 'doctors').
Legacy Page URL - The URL of the page in the KX13 project (e.g., https://localhost:5001/en-us/home).
New Page URL - The URL of the page in the XbyK project (e.g., http://localhost:60444/en-us/home).

Structure of the projects

You are currently located in the root folder, which contains two subfolders:

KX13/ - This folder contains the Kentico Xperience 13 project files. This is the legacy/source project.
XbyK/ - This folder contains the Xperience by Kentico project files. This is the new project.

Context

The page migration from KX13 to XbyK has been completed in the previous step. The result is a functional page, but it does not visually match the original. Your task is to make the new page look completely identical to the old one.

Important Principles

Dynamic content - When migrating a page, ensure that everything that was fetched dynamically from the database will still be dynamically fetched from the database. Nothing can be statically hardcoded in the new project if it was dynamic in the legacy project.
Pixel-perfect matching - The goal is to make the pages visually identical, including layout, spacing, colors, fonts, and responsive behavior.
Preserve functionality - While fixing visual issues, ensure all functionality remains intact.

Visual Matching Steps

Ensure XbyK is running - Start the application if not already running.
Capture both pages - Use Playwright MCP to navigate to both pages:
- Navigate to the legacy page URL
- Take a snapshot or screenshot for reference
- Navigate to the new page URL
- Take a snapshot or screenshot for comparison
Identify visual differences - Compare the two pages and note all differences:
- Layout and structure
- Colors and backgrounds
- Typography (fonts, sizes, weights)
- Spacing and margins
- Images and media
- Interactive elements (buttons, links, forms)
Fix each difference - For each visual discrepancy:
- Identify the source of the difference (CSS, HTML structure, missing content)
- Make the necessary changes in the XbyK project
- Prefer fixing via CSS/styling over changing HTML structure
- Implement retrieval of missing content dynamically from the database
- Nothing can be hardcoded if it was dynamic in the legacy project
Rebuild and restart - After making changes:
- Verify the project builds without errors
- Restart the XbyK application
Verify the fix - Use Playwright MCP to check if the difference is resolved
Iterate - Repeat steps 3-6 until both pages are visually identical

Output format

When done, provide the user with this exact output (without any additional text):

# Migration Complete
Page visual match adjustment has been successfully completed.

**Next steps:**
- Review the changes to ensure everything looks as expected.
- Continue migrating other pages by repeatedly running migrate-code-page-widgets and migrate-code-page.

---name: migrate-code-page-visualdescription: Ensures a migrated page visually matches the original Kentico Xperience 13 page. Uses Playwright to compare both pages and iteratively fixes styling, layout, and content differences. Use when a page migration results in visual discrepancies that need to be corrected.---You are tasked with ensuring that the migrated page visually matches the original legacy page.## Input Parameters- **Page Name** - The name/path of the page being matched (e.g., 'home', 'doctors').- **Legacy Page URL** - The URL of the page in the KX13 project (e.g., <https://localhost:5001/en-us/home>).- **New Page URL** - The URL of the page in the XbyK project (e.g., <http://localhost:60444/en-us/home>).## Structure of the projectsYou are currently located in the root folder, which contains two subfolders:- `KX13/` - This folder contains the Kentico Xperience 13 project files. This is the legacy/source project.- `XbyK/` - This folder contains the Xperience by Kentico project files. This is the new project.## ContextThe page migration from KX13 to XbyK has been completed in the previous step. The result is a functional page, but it does not visually match the original. Your task is to make the new page look completely identical to the old one.## Important Principles1. **Dynamic content** - When migrating a page, ensure that everything that was fetched dynamically from the database will still be dynamically fetched from the database. Nothing can be statically hardcoded in the new project if it was dynamic in the legacy project.2. **Pixel-perfect matching** - The goal is to make the pages visually identical, including layout, spacing, colors, fonts, and responsive behavior.3. **Preserve functionality** - While fixing visual issues, ensure all functionality remains intact.## Visual Matching Steps1. **Ensure XbyK is running** - Start the application if not already running.2. **Capture both pages** - Use Playwright MCP to navigate to both pages: - Navigate to the legacy page URL - Take a snapshot or screenshot for reference - Navigate to the new page URL - Take a snapshot or screenshot for comparison3. **Identify visual differences** - Compare the two pages and note all differences: - Layout and structure - Colors and backgrounds - Typography (fonts, sizes, weights) - Spacing and margins - Images and media - Interactive elements (buttons, links, forms)4. **Fix each difference** - For each visual discrepancy: - Identify the source of the difference (CSS, HTML structure, missing content) - Make the necessary changes in the XbyK project - Prefer fixing via CSS/styling over changing HTML structure - Implement retrieval of missing content dynamically from the database - Nothing can be hardcoded if it was dynamic in the legacy project5. **Rebuild and restart** - After making changes: - Verify the project builds without errors - Restart the XbyK application6. **Verify the fix** - Use Playwright MCP to check if the difference is resolved7. **Iterate** - Repeat steps 3-6 until both pages are visually identical## Output formatWhen done, provide the user with this exact output (without any additional text):```markdown# Migration CompletePage visual match adjustment has been successfully completed.**Next steps:**- Review the changes to ensure everything looks as expected.- Continue migrating other pages by repeatedly running migrate-code-page-widgets and migrate-code-page.```

Frequently asked questions