From ui5-modernization
Fixes deprecated, missing, or redundant bootstrap parameters in UI5 HTML files based on linter output. Automatically applies safe fixes for no-deprecated-api, no-deprecated-theme, and no-deprecated-library rules.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ui5-modernization:fix-bootstrap-paramsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
1. **ONLY modify the bootstrap `<script>` tag** (identified by `id="sap-ui-bootstrap"` or `src` matching `sap-ui-core.js`). All other `<script>` tags — including inline scripts, config blocks, and non-UI5 script references — MUST be preserved exactly as-is. They will be handled by `fix-csp-compliance` in a later phase.
<script> tag (identified by id="sap-ui-bootstrap" or src matching sap-ui-core.js). All other <script> tags — including inline scripts, config blocks, and non-UI5 script references — MUST be preserved exactly as-is. They will be handled by fix-csp-compliance in a later phase.<script> block that is not the bootstrap tag. If the file has <script>window.config = {...}</script> before or after the bootstrap tag, leave it untouched.This skill fixes HTML bootstrap parameter issues that the UI5 linter detects but cannot auto-fix because the changes may affect application behavior.
| Rule ID | Message Pattern | This Skill's Action |
|---|---|---|
no-deprecated-api | Missing bootstrap parameter 'data-sap-ui-async' | Add data-sap-ui-async="true" |
no-deprecated-api | Missing bootstrap parameter 'data-sap-ui-compat-version' | Add data-sap-ui-compat-version="edge" |
no-deprecated-api | Use of deprecated value 'false' for bootstrap parameter 'data-sap-ui-async' | Change to "true" |
no-deprecated-api | Use of deprecated value '...' for bootstrap parameter 'data-sap-ui-compat-version' | Change to "edge" |
no-deprecated-api | Abandoned bootstrap parameter '...' should be removed | Remove the parameter |
no-deprecated-api | Redundant bootstrap parameter '...' should be removed | Remove the parameter |
no-deprecated-api | Bootstrap parameter '...' should be replaced with '...' | Replace with new parameter |
no-deprecated-theme | Use of deprecated theme '...' | Change to sap_horizon |
no-deprecated-library | Use of deprecated library '...' | Remove from libs |
Apply this skill when you see linter output like:
index.html:8:3 error Missing bootstrap parameter 'data-sap-ui-async' no-deprecated-api
index.html:9:3 error Missing bootstrap parameter 'data-sap-ui-compat-version' no-deprecated-api
index.html:12:3 error Abandoned bootstrap parameter 'data-sap-ui-no-duplicate-ids' should be removed no-deprecated-api
index.html:15:3 error Use of deprecated theme 'sap_bluecrystal' no-deprecated-theme
Find the <script> tag with either:
id="sap-ui-bootstrap"src attribute matching pattern: sap-ui-core.js, sap-ui-custom.js, sap-ui-boot.js, etc.no-deprecated-api - Missing ParametersMissing data-sap-ui-async: Add data-sap-ui-async="true"
Missing data-sap-ui-compat-version: Add data-sap-ui-compat-version="edge"
<!-- Before -->
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon">
</script>
<!-- After -->
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-async="true"
data-sap-ui-compat-version="edge"
data-sap-ui-theme="sap_horizon">
</script>
no-deprecated-api - Deprecated Valuesdata-sap-ui-async="false": Change to "true"
data-sap-ui-compat-version with non-edge value: Change to "edge"
no-deprecated-api - Abandoned Parameters (remove completely)Remove these parameters entirely:
data-sap-ui-no-duplicate-ids - Enforced in modern UI5data-sap-ui-auto-aria-body-role - Removed in modern UI5data-sap-ui-manifest-first - Use Component.create manifest option insteaddata-sap-ui-origin-info - No longer supporteddata-sap-ui-areas - Use Control.placeAt insteaddata-sap-ui-trace - No longer supporteddata-sap-ui-xx-no-less - No longer supportedno-deprecated-api - Redundant Parametersdata-sap-ui-binding-syntax="simple" - Remove; complex syntax is enforced in modern UI5data-sap-ui-binding-syntax="complex" - Remove if compat-version="edge" is setdata-sap-ui-preload with invalid values - Removeno-deprecated-api - Replaced Parametersdata-sap-ui-animation → data-sap-ui-animation-mode (convert true→full, false→minimal)no-deprecated-theme - Deprecated ThemesReplace with modern theme:
sap_bluecrystal → sap_horizonsap_belize → sap_horizonsap_belize_plus → sap_horizonsap_belize_hcb → sap_horizon_hcbsap_belize_hcw → sap_horizon_hcwsap_hcb → sap_horizon_hcbsap_ux → sap_horizonsap_platinum → sap_horizonsap_goldreflection → sap_horizonno-deprecated-library - Deprecated LibrariesRemove deprecated libraries from data-sap-ui-libs:
sap.ui.commonssap.ui.ux3sap.makitsap.mesap.ca.uisap.sac.gridsap.ui.suitesap.zen.commonssap.zen.crosstabsap.zen.dshGiven linter output:
index.html:8:3 error Missing bootstrap parameter 'data-sap-ui-async' no-deprecated-api
index.html:8:3 error Missing bootstrap parameter 'data-sap-ui-compat-version' no-deprecated-api
index.html:12:3 error Abandoned bootstrap parameter 'data-sap-ui-no-duplicate-ids' should be removed no-deprecated-api
index.html:10:3 error Use of deprecated theme 'sap_bluecrystal' no-deprecated-theme
Transform:
<!-- Before -->
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-no-duplicate-ids="true"
data-sap-ui-resource-roots='{"my.app": "./"}'>
</script>
<!-- After -->
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-async="true"
data-sap-ui-compat-version="edge"
data-sap-ui-theme="sap_horizon"
data-sap-ui-resource-roots='{"my.app": "./"}'>
</script>
data-sap-ui-async="true" before other data attributes for consistencycompat-version="edge" enables complex binding syntax automatically, so binding-syntax becomes redundant<script> blocks that will be handled by CSP compliance in Phase 5)claude plugin install ui5-modernization@claude-plugins-officialFixes partially deprecated API usage in UI5 apps that the UI5 linter detects but cannot auto-fix. Provides specific fix patterns for each deprecated variant.
Guides setup, configuration, and usage of @ui5/linter for static analysis of SAPUI5/OpenUI5 apps, detecting deprecated APIs, globals, CSP issues, and manifest problems with autofix and CI/CD integration.
Enforces SAP UI5 coding standards including async loading, ComponentSupport, CSP compliance, OData binding, i18n, TypeScript events, CAP integration, and form layouts (Form with ColumnLayout).