Today, we're delighted to unveil the UI5 Modernization Plugin for coding agents. It is a comprehensive Claude Code and Github Copilot compatible toolkit that automates the entire modernization journey for your OpenUI5/SAPUI5 applications.
The plugin developed by the UI5 Core team is part of the UI5 plugins for coding agents and turns what once took weeks of manual effort into a task completed in hours, with verification at every step.
The Problem: Modernization Is Painful
The UI5 framework has evolved significantly. Modern best practices call for strict ES module imports, async component loading, CSP-compliant code, and elimination of deprecated APIs. The UI5 linter reliably detects these issues — but fixing them still requires deep framework knowledge and careful manual work.
Consider what a typical modernization touches: manifest configuration, component lifecycle, module imports, deprecated API replacements, CSP compliance, and test infrastructure — often across dozens of files. Each area has nuances and edge cases that require extensive domain expertise, and one wrong move can introduce runtime regressions that no linter will catch.
This is exactly the kind of repetitive, rule-heavy transformation that coding agents handle well.
The Solution: Five Phases, Fully Orchestrated
Target: Manifest version 2.0.0 – Minimum framework version 1.136.0
It runs as a five-phase orchestrated workflow, with each phase building on the previous one:
Phase 1 — Mechanical Baseline: Runs the UI5 linter's built-in autofix and modernizes your test infrastructure (QUnit/OPA5) to the Test Starter concept.
Phase 2 — Foundation: Updates your manifest.json and Component.js, the two files that define your app's configuration, dependencies, and lifecycle.
Phase 3 — Module System & Globals: The heavy lifting. Eliminates all instances of global namespace access in JavaScript and XML files, converts pseudo modules to library imports, detects cyclic dependencies introduced by the new imports, and catches runtime-breaking patterns the linter cannot see.
Phase 4 — Deprecated APIs: Replaces deprecated controls, partially deprecated API signatures, HTML bootstrap parameters, native HTML in XML views, and more.
Phase 5 — CSP Compliance: Extracts any remaining unsafe inline scripts to external files.
Each phase creates a separate git commit, so you can review, revert, or cherry-pick any phase independently. After all phases have completed, the plugin generates a MODERNIZATION-REPORT.md summarizing pass/fail statistics along with a MODERNIZATION-ISSUES.md documenting anything it couldn't fix automatically.
Built Around the UI5 Linter
Instead of reinventing detection, the plugin leverages the findings of the UI5 linter, where every linter rule ID maps to a specialized fix skill:
Linter Rule Fix Skill
no-globals (JS) | /fix-js-globals |
no-globals (XML) | /fix-xml-globals |
no-pseudo-modules | /fix-pseudo-modules |
no-deprecated-api | Routed to 8+ specialized skills based on context |
async-component-flags | /fix-component-async |
csp-unsafe-inline-script | /fix-csp-compliance |
After every fix, the linter is re-run for verification. Combined with runtime blind-spot detection, this feedback loop ensures nothing slips through.
Beyond the Linter: Catching Blind Spots
Some issues only manifest themselves at runtime and thus cannot be detected by the UI5 linter. The plugin includes dedicated detection for these:
- Cyclic module dependencies introduced when converting globals to imports
- QUnit 1.x assertion patterns that break under QUnit 2.x
- Sinon mocking via global chains in tests that fails after namespace removal
These blind-spot detections separate a tool that “fixes linter errors” from one that produces code that actually works.
You're in Control: Three Verification Modes
At the start of a modernization run, the plugin asks which verification mode you prefer and then applies it consistently at every phase boundary:
Mode What happens at each gate
| Full autonomous | Runs your build + tests automatically. On failure, attempts to fix and retries (up to 3 times) before escalating. |
| Half autonomous | Runs build + tests, reports results, and waits for your input before proceeding. |
| Manual | Prints a summary of what changed and waits for you to verify externally. |
This means you can let it run end-to-end on a portfolio of apps in parallel, or stay hands-on and review every phase. Your choice.
What to Expect
In internal testing across SAP applications of varying complexity, the plugin typically resolves 80-90% of linter findings automatically, with the remainder documented in the MODERNIZATION-ISSUES.md for a manual follow-up.
A mid-sized app (~50 files, 200+ linter errors) completes in roughly 20-40 minutes in full autonomous mode – including verification of each phase. The resulting git history gives you one clean commit per phase, making code review straightforward.
19 Specialized Skills — Use Individually or Together
While /modernize-ui5-app orchestrates the full workflow, every skill can also be invoked independently. Dealing with just one category of linter errors? Use the targeted skill:
/fix-component-async # Component.js async issues
/fix-manifest-json # manifest.json issues
/fix-js-globals # no-globals errors in JS files
/fix-xml-globals # no-globals errors in XML views/fragments
/fix-pseudo-modules # no-pseudo-modules, no-implicit-globals
/fix-linter-blind-spots # Runtime patterns linter misses
/fix-cyclic-deps # Circular sap.ui.define dependencies
/fix-bootstrap-params # HTML bootstrap parameters
/fix-library-init # Library.init() apiVersion
/fix-control-renderer # Control renderer issues
/fix-deprecated-controls # Deprecated controls, classes, interfaces
/fix-fiori-elements-extensions # Fiori Elements V2 controller extensions
/fix-partially-deprecated-apis # Partially deprecated API calls
/fix-table-row-mode # Deprecated Table row properties
/fix-xml-native-html # Native HTML/SVG in XML views
/fix-csp-compliance # Unsafe inline scripts
/modernize-test-starter # Test Starter modernization
/modernize-flp-sandbox # Dedicated FLP Sandbox modernization skill
This makes the plugin useful not just for full modernizations but for incremental cleanup work on any UI5 project.
Getting Started
Prerequisites
- Node.js v20.11.0, v22.0.0 or higher
- An OpenUI5/SAPUI5 app with
ui5.yamlin the project root - A clean git working directory (the plugin commits per phase)
Installation
Claude Code:
claude plugin install ui5-modernization@claude-plugins-officialGitHub Copilot:
Install via the VS Code extension marketplace or add the plugin to your Copilot agent configuration.
Run It
Navigate to your UI5 project directory and invoke:
/modernize-ui5-appThe plugin will check your prerequisites, ask for your verification mode preference, and begin the five-phase workflow automatically.
Learnings
Working on this plugin reinforced a key insight: modernization isn't just about replacing one API with another. It's about understanding how changes cascade.
For example, converting sap.ui.getCore().byId("myTable") to a module import seems straightforward – but the new import can create a cyclic dependency that silently breaks at runtime. The fix for one linter error introduces a failure no static analysis will catch.
We've encoded hundreds of these nuances learned from real modernization projects into the plugin's skill definitions. The result is a tool that doesn't just follow rules but understands how the framework's modules, lifecycle, and runtime interact.
Try It Today
The UI5 Modernization plugin is available now in the official Claude marketplace and the Awesome Copilot marketplace. Whether you have a single app to modernize or a portfolio of legacy applications to modernize, this plugin can dramatically reduce the effort and risk involved.
Start with one app. Run /modernize-ui5-app. Review the commits. We think you'll be impressed by what comes out.
The UI5 Modernization Plugin is part of the UI5 Plugins for Coding Agents ecosystem. For feedback and issues, reach out via the plugin's repository or the UI5 community channels.
