SAPUI5 & Fiori

SAPUI5 & SAP Fiori Skills for AI Coding Assistants

SAPUI5 (sometimes written SAP UI5) is SAP's JavaScript UI framework for building enterprise-grade web applications. It provides the MVC architecture, data binding, routing, and control library that power SAP Fiori apps — the design system SAP uses across its products. If you are building a user-facing SAP application, chances are you are writing SAP UI5.

The framework is large and opinionated. SAPUI5 applications use XML views, JSON manifests, OData models (v2 and v4), sap.m controls, and a build pipeline based on the UI5 CLI. SAP Fiori tools extend VS Code and SAP Business Application Studio with generators, a page editor, and annotation tools. The UI5 Linter enforces quality by catching deprecated APIs, CSP violations, and manifest issues. AI coding assistants without SAPUI5 knowledge typically produce generic JavaScript that ignores the framework's conventions — wrong control names, incorrect data binding syntax, and manifests that fail validation.

The four skills in this category give your assistant deep, framework-aware knowledge. The sapui5 skill covers freestyle and Fiori Elements app development, custom controls, data binding, OData integration, routing, testing with QUnit and OPA5, performance optimization, and accessibility. The sapui5-cli skill guides UI5 CLI project setup, configuration, builds, dev servers, and custom tasks. The sapui5-linter skill covers linting rules, autofix, and CI/CD integration. The sap-fiori-tools skill covers Fiori application generation, page editor configuration, annotations, and deployment.

These skills give your assistant the context to write SAPUI5 code that follows SAP framework conventions and is much less likely to invent unsupported controls or manifest patterns.

Quick Install

npx skills add secondsky/sap-skills --skill sap-cap-capire --skill sap-fiori-tools --skill sapui5 --skill sapui5-cli --skill sap-api-style --skill sap-btp-cloud-platform

4 Skills in SAPUI5 & Fiori

UI Development

sap-fiori-tools

Develops SAP Fiori applications using SAP Fiori tools extensions for VS Code and SAP Business Application Studio. Use when: generating Fiori Elements or Freestyle SAPUI5 applications, configuring Page Editor for List Report or Object Page, working with annotations and Service Modeler, setting up deployment to ABAP or Cloud Foundry, creating adaptation projects, using Guided Development, previewing with mock data or live data, configuring SAP Fiori launchpad, or using AI-powered generation with Project Accelerator/Joule. Technologies: SAP Fiori Elements, SAPUI5, OData V2/V4, CAP, SAP BTP, ABAP, Cloud Foundry, fiori-mcp-server (MCP tools for AI-assisted generation).

MCP

abapbtpcapcloud foundry+10

--skill sap-fiori-tools

UI Development

sapui5

This skill should be used when developing SAP UI5 applications, including creating freestyle apps, Fiori Elements apps, custom controls, testing, data binding, OData integration, routing, and troubleshooting. Use when building enterprise web applications with SAP UI5 framework, implementing MVC patterns, configuring manifest.json, creating XML views, writing controllers, setting up data models (JSON, OData v2/v4), implementing responsive UI with sap.m controls, building Fiori Elements apps, writing unit tests with QUnit, integration tests with OPA5, setting up mock servers, handling security (XSS, CSP), optimizing performance, implementing accessibility features, or debugging UI5 applications. Also covers sap.ui.mdc controls and TypeScript control libraries.

4 Agents5 CommandsMCPHooks

componentsfiorifrontendjson+5

--skill sapui5

UI Development

sapui5-cli

Manages SAPUI5/OpenUI5 projects using the UI5 Tooling CLI (@ui5/cli). Use when initializing UI5 projects, configuring ui5.yaml or ui5-workspace.yaml files, building UI5 applications or libraries, running development servers with HTTP/2 support, creating custom build tasks or server middleware, managing workspace/monorepo setups, troubleshooting UI5 CLI errors, migrating between UI5 CLI versions, or optimizing build performance. Supports both OpenUI5 and SAPUI5 frameworks with complete configuration and extensibility guidance.

clicomponentsfiorifrontend+5

--skill sapui5-cli

UI Development

sapui5-linter

Use this skill when working with the UI5 Linter (@ui5/linter) for static code analysis of SAPUI5/OpenUI5 applications and libraries. Covers setup, configuring linting rules, running the linter to detect deprecated APIs, global variable usage, CSP violations, and manifest issues. Supports autofix for deprecated API usage, global references, event handlers, and manifest properties. Includes CI/CD integration, pre-commit hooks, and UI5 2.x migration preparation.

apicomponentsfiorifrontend+5

--skill sapui5-linter

Frequently Asked Questions

What is SAPUI5?

SAPUI5 is SAP's JavaScript UI framework for building enterprise web applications. It provides MVC architecture, data binding, and a rich control library, and is the foundation for SAP Fiori applications.

What is the difference between SAPUI5 and SAP Fiori?

SAPUI5 is the technical framework — the JavaScript library. SAP Fiori is the design system and user experience guidelines. Fiori apps are built using SAPUI5, but you can also build freestyle SAPUI5 applications that are not strictly Fiori-compliant.

Can Claude Code build SAPUI5 applications?

Yes. The SAPUI5 skills provide curated references for MVC patterns, data binding, OData, routing, testing, and the UI5 CLI. With these skills installed, AI coding assistants can generate framework-compliant SAPUI5 code.

How do I install SAPUI5 skills?

Run `npx skills add secondsky/sap-skills` to install all SAP skills, or install individual ones with `--skill sapui5`, `--skill sapui5-cli`, `--skill sapui5-linter`, or `--skill sap-fiori-tools`.