About fix-bootstrap-params
A skill for correcting UI5 HTML bootstrap parameters flagged by the linter, intended for developers maintaining UI5 applications. It limits edits to the bootstrap script tag and covers deprecated parameters, themes, and libraries.
Key features
- 01Adds or updates bootstrap parameters
- 02Removes obsolete or redundant parameters
- 03Updates deprecated themes and libraries
- 04Preserves non-bootstrap script tags
Use cases
- 01Fixing missing async or compatibility parameters
- 02Updating a deprecated UI5 theme
- 03Removing deprecated library references
Install
Copy the command and run it in a terminal.
npx skills add https:/ / github.com/ ui5/ plugins-coding-agents --skill fix-bootstrap-paramsAfter installing, type/fix-bootstrap-paramsin Claude Code to confirm it loaded.
Details
From the project READMEFix Bootstrap Parameters
Key Rules
- ONLY modify the bootstrap
<script>tag (identified byid="sap-ui-bootstrap"orsrcmatchingsap-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 byfix-csp-compliancein a later phase. - Do not delete, move, or rewrite any
<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.
Linter Rules Handled
| 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 |
When to Use
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
Fix Strategy
1. Locate the Bootstrap Script Tag
Find the <script> tag with either:
id="sap-ui-bootstrap"srcattribute matching pattern:sap-ui-core.js,sap-ui-custom.js,sap-ui-boot.js, etc.
2. Apply Fixes Based on Rule and Message
no-deprecated-api - Missing Parameters
Missing 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 Values
data-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 supported
no-deprecated-api - Redundant Parameters
data-sap-ui-binding-syntax="simple"- Remove; complex syntax is enforced in modern UI5data-sap-ui-binding-syntax="complex"- Remove ifcompat-version="edge"is setdata-sap-ui-preloadwith invalid values - Remove
no-deprecated-api - Replaced Parameters
data-sap-ui-animation→data-sap-ui-animation-mode(converttrue→full,false→minimal)
no-deprecated-theme - Deprecated Themes
Replace 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_horizon
no-deprecated-library - Deprecated Libraries
Remove 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.dsh
Implementation Steps
- Read the HTML file
- Parse to find the bootstrap script tag
- For each linter error (identified by rule ID and message):
- If missing parameter: Add the parameter with recommended value
- If deprecated value: Update to recommended value
- If abandoned/redundant: Remove the parameter
- If deprecated theme: Replace with modern theme
- If deprecated library: Remove from libs list
- Preserve formatting (indentation, line breaks) as much as possible
- Write the updated file
Example Fix
Given 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>
Notes
- Always add
data-sap-ui-async="true"before other data attributes for consistency - Setting
compat-version="edge"enables complex binding syntax automatically, sobinding-syntaxbecomes redundant - Removed parameters should not leave trailing whitespace or empty lines
- If the file has multiple script tags, only modify the bootstrap tag — leave all others intact (including inline
<script>blocks that will be handled by CSP compliance in Phase 5)