ui5-best-practices

Coding rules for SAP UI5, a JavaScript framework for building business web applications. They cover module loading, app startup, data binding, tooling, CAP integration, and forms.

In plain words
What is it for?
Use it while writing or reviewing SAP UI5 applications, including JavaScript or TypeScript modules, XML views, data binding, and forms.
Why use it?
They help avoid outdated or hard-to-maintain UI5 code and keep applications aligned with SAP's official guidance.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/ui5/plugins-coding-agents/ui5-best-practices
Any agent
npx skills add UI5/plugins-coding-agents --skill ui5-best-practices
Clone the repo
git clone --depth 1 https://github.com/UI5/plugins-coding-agents

Made for: Claude Code, Codex.

Per session 193 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,293 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00193 $0.03293
Opus 5 $0.00097 $0.01647
Sonnet 5 $0.00039 $0.00659
Haiku 4.5 $0.00019 $0.00329

Measured 3d ago against content hash f75097d5fa88, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

ui5-best-practices scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/ui5/skills/ui5-best-practices/SKILL.md · 473 lines

How it starts

The opening of the file, as written. The whole thing — 473 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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
// ❌ 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
// ❌ WRONG - Global namespace
const button: sap.m.Button;

// ✅ CORRECT - Import module
import Button from "sap/m/Button";
const button: Button;
XML Views
<!-- ✅ 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:

<!-- 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>

Read the full file on GitHub · 473 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 473 lines · 193 tokens per session scan A f75097d5fa88

Subscribe to this mod's changes

ui5-best-practices is a skill published in the GitHub repository UI5/plugins-coding-agents (34 stars, last pushed yesterday), licensed Apache-2.0. It adds 193 tokens to every session and 3,293 once invoked, about $0.0010 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

plugin-init

初始化 Zhin.js 插件项目。Use when asked to create a new plugin, scaffold plugin structure, or set up a plugin project. 引导生成符合 Plugin Runtime 规范的目录结构、package.json、plugin.ts、约定能力目录和 README。.

zhinjs/zhin · 56 tokens

plugin-publish

发布 Zhin.js 插件到 npm 和 Zhin 插件市场。Use when asked to publish a plugin, prepare for release, check publish readiness, or submit to the Zhin plugin marketplace. 引导完成发布前检查、版本管理和提交流程。.

zhinjs/zhin · 58 tokens

plugin-develop

Implement Zhin.js plugin features with Plugin Runtime: defineCommand, defineAgentTool, middleware, pages. Use when asked to add a command, register a tool, wire cron, extend middleware, or build a console page. Triggers: 插件开发, add command, 加命令, 写插件功能, defineCommand.

zhinjs/zhin · 70 tokens

wordpress-plugin-fundamentals

Modern WordPress plugin development with PHP 8.3+, OOP architecture, hooks system, database interactions, and Settings API.

bobmatnyc/claude-mpm-skills · 32 tokens

view-chain-layout

The layout rules for a z2ui5clui5viewbuilder chain - one call per line, four spaces per tree level, the end( ) column, which factory( ) shape goes with which chain shape, blank lines, and the linter rule that checks them. Identical in abap2UI5, abap2UI5/samples, abap2UI5/samples-controls and abap2UI5/samples-stack.…

abap2UI5/samples · 125 tokens

agent-development

This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development…

mahmoud20138/Tradecraft · 80 tokens