# Fix Bootstrap Params

> Fix HTML bootstrap parameter issues that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs these rules: - `no-deprecated-api` - For missing/deprecated bootstrap parameters (async, compat-version, animation, binding-syntax, etc.) - `no-deprecated-theme` - For deprecated theme values in data-sap-ui-theme - `no-deprecated-library` - For deprecated libraries in data-sap-ui-libs Trigger on error messages containing: "Missing bootstrap parameter", "Abandoned bootstrap parameter", "Redundant bootstrap parameter", "deprecated value", "bootstrap" Automatically applies safe fixes to HTML files containing UI5 bootstrap script tags.

- Skill: `williamcorrea23/fix-bootstrap-params` (Agent Skill)
- Install (CLI): `npx skillmds@latest add williamcorrea23/fix-bootstrap-params`
- Raw SKILL.md: https://api.skillmd.com/api/skills/williamcorrea23/fix-bootstrap-params/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: williamcorrea23 (https://skillmd.com/u/williamcorrea23)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/williamcorrea23/fix-bootstrap-params

---


# Fix Bootstrap Parameters

## Key Rules

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.
2. 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"`
- `src` attribute 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"`

```html
<!-- 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 UI5
- `data-sap-ui-auto-aria-body-role` - Removed in modern UI5
- `data-sap-ui-manifest-first` - Use Component.create manifest option instead
- `data-sap-ui-origin-info` - No longer supported
- `data-sap-ui-areas` - Use Control.placeAt instead
- `data-sap-ui-trace` - No longer supported
- `data-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 UI5
- `data-sap-ui-binding-syntax="complex"` - Remove if `compat-version="edge"` is set
- `data-sap-ui-preload` with invalid values - Remove

#### `no-deprecated-api` - Replaced Parameters

- `data-sap-ui-animation` → `data-sap-ui-animation-mode` (convert `true`→`full`, `false`→`minimal`)

#### `no-deprecated-theme` - Deprecated Themes

Replace with modern theme:
- `sap_bluecrystal` → `sap_horizon`
- `sap_belize` → `sap_horizon`
- `sap_belize_plus` → `sap_horizon`
- `sap_belize_hcb` → `sap_horizon_hcb`
- `sap_belize_hcw` → `sap_horizon_hcw`
- `sap_hcb` → `sap_horizon_hcb`
- `sap_ux` → `sap_horizon`
- `sap_platinum` → `sap_horizon`
- `sap_goldreflection` → `sap_horizon`

#### `no-deprecated-library` - Deprecated Libraries

Remove deprecated libraries from `data-sap-ui-libs`:
- `sap.ui.commons`
- `sap.ui.ux3`
- `sap.makit`
- `sap.me`
- `sap.ca.ui`
- `sap.sac.grid`
- `sap.ui.suite`
- `sap.zen.commons`
- `sap.zen.crosstab`
- `sap.zen.dsh`

## Implementation Steps

1. Read the HTML file
2. Parse to find the bootstrap script tag
3. 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
4. Preserve formatting (indentation, line breaks) as much as possible
5. 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:
```html
<!-- 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, so `binding-syntax` becomes 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)