Ui5 Best Practices
Keep SAP UI5 apps aligned with official async loading, binding, i18n, CSP, TypeScript events, linter MCP tools, CAP patterns, and form layout rules.
Overview
ui5-best-practices is an agent skill for the Build phase that applies official SAP UI5 coding standards for async modules, binding, i18n, CSP, TypeScript events, linter MCP tools, CAP, and form layouts.
Install
npx skills add https://github.com/ui5/plugins-coding-agents --skill ui5-best-practicesWhat is this skill?
- Never global sap.m access—declare dependencies via sap.ui.define, ES6 imports, or core:require
- Data binding with OData types, i18n management, and CSP compliance (no inline scripts)
- TypeScript event types for UI5 >= 1.115.0 (e.g. Button$PressEvent)
- MCP tooling: get_api_reference and run_ui5_linter
- Form rule: never SimpleForm—always Form with ColumnLayout; includes CAP integration and cds watch patterns
- UI5 TypeScript event types documented for UI5 >= 1.115.0
- Explicit never-SimpleForm / always ColumnLayout Form rule
Adoption & trust: 1 installs on skills.sh; 15 GitHub stars; trending (+100% hot-view momentum).
What problem does it solve?
Agent-generated UI5 code often uses deprecated globals, wrong form controls, or CSP-breaking inline scripts that fail SAP review and linter checks.
Who is it for?
Developers building or maintaining SAP UI5 / Fiori apps with agent assistance who need standards enforced on every edit.
Skip if: Non-UI5 React or Vue frontends, or greenfield projects with no SAP UI5 dependency.
When should I use this skill?
Use when writing UI5 applications to ensure modern, maintainable code following SAP standards (async loading, binding, i18n, CSP, TypeScript, MCP linter, CAP, forms).
What do I get? / Deliverables
New and revised UI5 code follows SAP-documented patterns—async dependencies, typed events, linter-clean structure, and ColumnLayout forms ready for CAP-backed apps.
- UI5 code aligned to SAP module-loading and binding rules
- Form layouts using Form + ColumnLayout
- Linter-ready UI5 changes with CSP-safe script boundaries
Recommended Skills
Journey fit
UI5 application coding standards apply while you are actively building the SAP frontend, not during early idea research or post-launch SEO. Frontend subphase covers enterprise UI5 views, components, and CAP-backed UIs where these SAP-specific rules matter day to day.
How it compares
SAP-specific frontend standards skill—not a generic JavaScript style guide or a deployed MCP server by itself.
Common Questions / FAQ
Who is ui5-best-practices for?
Solo and indie builders (and small SAP teams) using coding agents to write UI5 applications, especially with OData, i18n, TypeScript, and CAP.
When should I use ui5-best-practices?
During Build frontend work whenever you create views, controllers, components, forms, or CAP-integrated UI5 features—or before asking the agent to run ui5 linter fixes.
Is ui5-best-practices safe to install?
The skill describes MCP linter and API reference tooling; verify repo and tool permissions on the Security Audits panel on this Prism page before enabling network or shell access.
SKILL.md
READMESKILL.md - Ui5 Best Practices
# UI5 Best Practices and Coding Standards ## Overview This skill enforces UI5 development standards derived from official SAP guidelines. It covers the four critical areas: coding guidelines, tooling integration, CAP integration, and form creation rules. --- ## 1. Module Loading - CRITICAL ### Never Use Global Access **NEVER** access UI5 framework objects globally (e.g., `sap.m.Button`). Always declare dependencies explicitly for asynchronous loading. #### JavaScript ```javascript // ❌ WRONG - Global access var oButton = new sap.m.Button(); // ✅ CORRECT - Explicit dependency sap.ui.define(["sap/m/Button"], function(Button) { var oButton = new Button(); }); // ✅ CORRECT - Dynamic loading with sap.ui.require sap.ui.require(["sap/m/MessageBox"], function(MessageBox) { MessageBox.show("Hello"); }); ``` #### TypeScript ```typescript // ❌ WRONG - Global namespace const button: sap.m.Button; // ✅ CORRECT - Import module import Button from "sap/m/Button"; const button: Button; ``` #### XML Views ```xml <!-- ✅ Controls are auto-loaded by tag --> <m:Button text="Click Me"/> <!-- ✅ For formatters/types, use core:require --> <ObjectListItem core:require="{ Currency: 'sap/ui/model/type/Currency' }" number="{ parts: ['invoice>Price', 'view>/currency'], type: 'Currency' }"/> ``` **Why**: Ensures proper async loading, improves performance in production builds. **Reference**: UI5 documentation page "Require Modules in XML View and Fragment" --- ## 2. Component Initialization Use `sap/ui/core/ComponentSupport` for declarative initialization of the **initial (root)** component: ```html <!-- index.html --> <script id="sap-ui-bootstrap" src="resources/sap-ui-core.js" data-sap-ui-on-init="module:sap/ui/core/ComponentSupport" data-sap-ui-async="true" data-sap-ui-resource-roots='{ "my.app": "./" }'> </script> <body class="sapUiBody"> <div data-sap-ui-component data-name="my.app" data-id="container"> </div> </body> ``` **Reference**: UI5 documentation page "Declarative API for Initial Components" **Note:** Nested components should be managed via component usages (declared in the manifest.json of the containing component) --- ## 3. Data Binding Best Practices ### Always Use Built-in Data Types **ALWAYS** use data binding in views to connect UI controls to data or i18n models. **Priority order**: 1. OData types (`sap/ui/model/odata/type/*`) - **Preferred** 2. Simple types (`sap/ui/model/type/*`) - Only when no OData equivalent 3. Custom types - For special two-way binding scenarios or complex validation 4. Custom formatters - Only for unique business logic (one-way binding) ```xml <!-- ❌ WRONG - Custom formatter for standard formatting --> <Text text="{path: 'price', formatter: '.formatCurrency'}"/> <!-- ✅ CORRECT - Use OData type with format options --> <Text text="{ path: 'price', type: 'sap.ui.model.odata.type.Decimal', formatOptions: { style: 'currency', currencyCode: 'EUR' } }"/> <!-- ✅ CORRECT - Use g