| name | pf6-migrate |
| description | Migrate a PatternFly 5 application to PatternFly 6 with visual verification. Use when upgrading a PatternFly 5 codebase to PatternFly 6, migrating PF5 to PF6, or when asked to upgrade PatternFly. |
| disable-model-invocation | true |
PatternFly 5 to 6 Migration with Visual Verification
Migrate a PatternFly 5 application to PatternFly 6 using the official upgrade guide and visual comparison to ensure the migrated UI matches the original.
Prerequisites Check
CRITICAL: Before proceeding, verify the Chrome MCP server is available.
Run a test to check if the Chrome MCP server is installed and accessible:
- Check if you have access to Chrome MCP tools.
- If Chrome MCP tools are NOT available, stop immediately and inform the user:
ERROR: Chrome MCP server is not installed or not configured.
This skill requires the Chrome MCP server to perform visual comparison
between the original and migrated versions of the application.
To install the Chrome MCP server, add it to your Claude Code MCP configuration.
See: https://github.com/anthropics/claude-code/blob/main/docs/mcp.md
After installing, restart Claude Code and try again.
Do NOT proceed with migration if Chrome MCP is unavailable.
Step 1: Create a Migration Branch
Create a new git branch for the migration work:
git checkout -b pf6-migration
If the branch already exists, ask the user how to proceed (checkout existing, create new name, or abort).
Step 2: Capture Baseline Screenshots
Before making any changes, capture screenshots of the current PF5 application state:
- Start the development server for the application
- Use the Chrome MCP server to navigate to key pages/routes
- Take screenshots of each page and save them for comparison
- Document which URLs were captured
Store baseline information for later comparison.
Step 3: Fetch and Apply the PatternFly 6 Upgrade Guide
Fetch the official PatternFly 6 upgrade documentation:
- Navigate to https://www.patternfly.org/get-started/upgrade/
- Read and understand the upgrade steps, breaking changes, and migration patterns
- Identify which changes apply to this codebase
Key areas to address from the upgrade guide typically include:
- Package updates (
@patternfly/react-core, @patternfly/react-icons, etc.)
- CSS/SCSS changes and design token updates
- Component API changes (renamed props, removed components, new patterns)
- Import path changes
Step 4: Perform the Migration
Apply the migration changes systematically:
- Update dependencies: Update package.json with PF6 versions
- Run codemods: If PatternFly provides migration codemods, run them
- Fix imports: Update import paths as needed
- Update component usage: Fix deprecated props and components
- Update styles: Migrate CSS/design tokens
After each significant change:
- Ensure the application builds without errors
- Ensure TypeScript/linting passes
Step 5: Visual Comparison Loop
This is the core verification step. Repeat until all pages match or you've exhausted fixes:
5.1 Capture Post-Migration Screenshots
- Start the development server with the migrated code
- Use Chrome MCP to navigate to the same URLs captured in Step 2
- Take new screenshots of each page
5.2 Compare Screenshots
For each page, visually compare the baseline (PF5) screenshot with the current (PF6) screenshot:
-
Look for visual differences:
- Layout shifts or misalignments
- Color differences
- Missing or broken components
- Typography changes
- Spacing issues
- Icon differences
-
Document any differences found
5.3 Fix Visual Differences
For each visual difference:
- Identify the root cause (CSS change, component change, prop change, etc.)
- Consult the upgrade guide for the correct PF6 approach
- Make the fix
- Rebuild and verify
5.4 Repeat Until Matching
Continue the compare-fix loop until:
- All pages visually match the baseline (SUCCESS), OR
- You've attempted fixes but differences persist after 5 iterations (ESCALATE)
[!important] Please make sure that the level of accessibility and usability is maintained or improved during the migration process. For example, ensure that there are no light fonts on light backgrounds or low contrast elements that could hinder readability, unless present in the original design.
Step 6: Final Verification
Once visual comparison passes:
- Run the full test suite (if available)
- Run linting and type checking
- Do a final visual sweep of all captured pages
- Commit all changes with a descriptive message:
git add -A
git commit -m "feat: Migrate from PatternFly 5 to PatternFly 6
- Updated all @patternfly/* packages to v6
- Fixed component API changes per upgrade guide
- Verified visual parity with original PF5 implementation
Co-Authored-By: Claude <noreply@anthropic.com>"
Error Handling
If Chrome MCP is unavailable
Stop immediately and inform the user. Do not proceed with migration.
If visual differences cannot be resolved
After 5 fix attempts on the same issue:
- Document the specific visual difference
- Document what was tried
- Ask the user how to proceed:
- Accept the visual difference as expected PF6 behavior
- Provide guidance on how to fix
- Abort the migration
If the application fails to build
- Check build errors for PF6-specific issues
- Consult the upgrade guide
- If stuck, report the specific error to the user
Completion Criteria
The migration is complete when:
Tips
- Take screenshots at multiple viewport sizes if responsive design is important
- Focus on component-heavy pages first as they're most likely to have issues
- The PatternFly upgrade guide is authoritative - prefer its recommendations over other sources
- Some visual differences may be intentional PF6 design changes - these can be accepted after user confirmation
