Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
secondsky avatar

Sapui5

secondsky/sap-skills

  • 253 installs
  • 399 repo stars
  • Updated August 4, 2026
  • secondsky/sap-skills

Helps with ai & agent building tasks.

About

sapui5 is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.

  • sapui5
  • AI & Agent Building
  • AI-coding skill

Sapui5 by the numbers

  • 253 all-time installs (skills.sh)
  • +44 installs in the week ending Jul 27, 2026 (Skillselion tracking)
  • Ranked #2,521 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/secondsky/sap-skills --skill sapui5

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs253
repo stars★ 399
Last updatedAugust 4, 2026
Repositorysecondsky/sap-skills ↗

What it does

Helps with ai & agent building tasks.

Files

SKILL.mdMarkdownGitHub ↗

SAPUI5 Development Skill

Related Skills

  • sap-fiori-tools: Use for rapid Fiori application development, Page Editor configuration, and deployment automation
  • sap-cap-capire: Use for backend service integration, OData model binding, and CAP service consumption
  • sap-btp-cloud-platform: Use for deployment options, HTML5 Application Repository service, and BTP integration
  • sap-abap: Use when connecting to ABAP backends or consuming OData services from SAP systems
  • sap-api-style: Use when documenting UI5 application APIs or following REST/OData standards
  • sap-dependency-security: Use for secure dependency upgrades, lockfile policies, supply-chain controls, and exact MCP server pins in SAPUI5 frontend toolchains

When to Use This Skill

Use this skill when building SAPUI5/OpenUI5 applications, XML views, controllers, custom controls, routing, OData v2/v4 model binding, Fiori Elements integrations, QUnit/OPA5 tests, accessibility/security/performance improvements, or UI5 MCP-assisted scaffolding and API lookup.

Comprehensive skill for building enterprise applications with SAP UI5 framework.

Using MCP Tools (New in v2.0.0)

This skill integrates with the official @ui5/mcp-server for live development tools:

  • Scaffolding: Create projects with ui5-app-scaffolder agent or /ui5-scaffold command
  • API Reference: Lookup controls with ui5-api-explorer agent or /ui5-api command
  • Code Quality: Run linter with ui5-code-quality-advisor agent or /ui5-lint command
  • Migration: Upgrade versions with ui5-migration-specialist agent
  • Version Info: Check releases with /ui5-version command
  • Tool Catalog: List all MCP tools with /ui5-mcp-tools command

For setup and troubleshooting, see references/mcp-integration.md. MCP package pins are governed by sap-dependency-security and validated by npm run validate:mcp-security.

Graceful Fallback: All features work without MCP by using reference files and built-in templates.

Table of Contents

1. Quick Start 2. Core Concepts 3. SAP Fiori Elements 4. Metadata-Driven Controls (MDC) 5. Testing 6. Best Practices 7. Common Patterns 8. Troubleshooting 9. Development Tools 10. Bundled Resources

---

Quick Start

Creating a Basic SAPUI5 App

Use UI5 Tooling (recommended) or SAP Business Application Studio:

# Install UI5 CLI
npm install -g @ui5/cli

# Create new project
mkdir my-sapui5-app && cd my-sapui5-app
npm init -y

# Initialize UI5 project
ui5 init

# Add UI5 dependencies
npm install --save-dev @ui5/cli

# Start development server
ui5 serve

Project Structure:

my-sapui5-app/
├── webapp/
│   ├── Component.js
│   ├── manifest.json
│   ├── index.html
│   ├── controller/
│   │   └── Main.controller.js
│   ├── view/
│   │   └── Main.view.xml
│   ├── model/
│   │   └── formatter.js
│   ├── i18n/
│   │   └── i18n.properties
│   ├── css/
│   │   └── style.css
│   └── test/
│       ├── unit/
│       └── integration/
├── ui5.yaml
└── package.json

Templates Available:

  • templates/basic-component.js: Component template
  • templates/manifest.json: Application descriptor template
  • templates/xml-view.xml: XML view with common patterns
  • templates/controller.js: Controller with best practices
  • templates/formatter.js: Common formatter functions

Use templates by copying to your project and replacing placeholders ({{namespace}}, {{ControllerName}}, etc.).

---

Core Concepts

1. MVC Architecture

  • Model: Data layer (JSON, OData, XML, Resource models)
  • View: Presentation layer (XML, JavaScript, JSON, HTML)
  • Controller: Business logic layer
  • Binding: Synchronizes model and view (One-way, Two-way, One-time)

Reference: references/core-architecture.md for detailed architecture concepts.

2. Component & Manifest

  • Component.js: Entry point, initializes router and models
  • manifest.json: Central configuration (models, routing, dependencies, data sources)

Key manifest sections:

  • sap.app: Application metadata and data sources
  • sap.ui: UI technology and device types
  • sap.ui5: UI5-specific configuration (models, routing, dependencies)

3. Data Models

JSON Model (client-side):

var oModel = new JSONModel({
    products: [...]
});
this.getView().setModel(oModel);

OData V2 Model (server-side):

"": {
    "dataSource": "mainService",
    "settings": {
        "defaultBindingMode": "TwoWay",
        "useBatch": true
    }
}

Resource Model (i18n):

"i18n": {
    "type": "sap.ui.model.resource.ResourceModel",
    "settings": {
        "bundleName": "my.app.i18n.i18n"
    }
}

Reference: references/data-binding-models.md for comprehensive guide.

4. Views & Controllers

XML View (recommended):

<mvc:View
    controllerName="my.app.controller.Main"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Page title="{i18n>title}">
        <List items="{/products}">
            <StandardListItem title="{name}" description="{price}"/>
        </List>
    </Page>
</mvc:View>

5. Routing & Navigation

Navigate programmatically:

this.getOwnerComponent().getRouter().navTo("detail", {
    objectId: sId
});

Reference: references/routing-navigation.md for routing patterns.

---

SAP Fiori Elements

Build applications without JavaScript UI code using OData annotations.

Application Types

1. List Report: Searchable, filterable tables/charts 2. Object Page: Detailed view with sections and facets 3. Analytical List Page: Visual filters and analytics 4. Overview Page: Card-based dashboards 5. Worklist: Simplified list for tasks

Quick Setup

manifest.json for List Report + Object Page:

{
    "sap.ui5": {
        "dependencies": {
            "libs": {
                "sap.fe.templates": {}
            }
        },
        "routing": {
            "targets": {
                "ProductsList": {
                    "type": "Component",
                    "name": "sap.fe.templates.ListReport",
                    "options": {
                        "settings": {
                            "contextPath": "/Products",
                            "variantManagement": "Page"
                        }
                    }
                }
            }
        }
    }
}

Key Annotations:

  • @UI.LineItem: Table columns
  • @UI.SelectionFields: Filter bar fields
  • @UI.HeaderInfo: Object page header
  • @UI.Facets: Object page sections

Reference: references/fiori-elements.md for comprehensive guide.

---

Metadata-Driven Controls (MDC)

The sap.ui.mdc library provides metadata-driven controls for building dynamic UIs at runtime.

Key Controls

  • MDC Table: Data display with dynamic columns based on metadata
  • MDC FilterBar: Complex filter conditions with PropertyInfo
  • MDC Value Help: Assisted data input with suggestions

Quick Example

<mdc:Table
    id="mdcTable"
    delegate='{name: "my/app/delegate/TableDelegate", payload: {}}'
    p13nMode="Sort,Filter,Column"
    type="ResponsiveTable">
    <mdc:columns>
        <mdcTable:Column propertyKey="name" header="Name">
            <Text text="{name}"/>
        </mdcTable:Column>
    </mdc:columns>
</mdc:Table>

Reference: references/mdc-typescript-advanced.md for comprehensive MDC guide with TypeScript.

---

Testing

Unit Tests (QUnit)

Test individual functions and modules:

QUnit.module("Formatter Tests");
QUnit.test("Should format price correctly", function(assert) {
    var fPrice = 123.456;
    var sResult = formatter.formatPrice(fPrice);
    assert.strictEqual(sResult, "123.46 EUR", "Price formatted");
});

Integration Tests (OPA5)

Test user interactions and flows:

opaTest("Should navigate to detail page", function(Given, When, Then) {
    Given.iStartMyApp();
    When.onTheWorklistPage.iPressOnTheFirstListItem();
    Then.onTheObjectPage.iShouldSeeTheObjectPage();
    Then.iTeardownMyApp();
});

Mock Server

Simulate OData backend:

var oMockServer = new MockServer({
    rootUri: "/sap/opu/odata/sap/SERVICE_SRV/"
});
oMockServer.simulate("localService/metadata.xml", {
    sMockdataBaseUrl: "localService/mockdata"
});
oMockServer.start();

Reference: references/testing.md for comprehensive testing guide.

---

Best Practices

1. Always Use Async - sap.ui.define, async:true in manifests 2. Use XML Views - declarative and tooling-friendly 3. Proper Namespacing - com.mycompany.myapp.controller.Main 4. Internationalization - always use i18n for texts 5. Data Binding Over Manual Updates - automatic XSS protection 6. Security - enable CSP, validate input, use HTTPS 7. Performance - component preload, lazy loading, batch requests 8. Accessibility - semantic controls, labels, keyboard navigation

---

Common Patterns

CRUD Operations

// Create
oModel.create("/Products", oData, {success: function() {MessageToast.show("Created");}});

// Read
oModel.read("/Products", {filters: [new Filter("Price", FilterOperator.GT, 100)]});

// Update
oModel.update("/Products(1)", {Price: 200}, {success: function() {MessageToast.show("Updated");}});

// Delete
oModel.remove("/Products(1)", {success: function() {MessageToast.show("Deleted");}});

Filtering & Sorting

var oBinding = this.byId("table").getBinding("items");
oBinding.filter([new Filter("price", FilterOperator.GT, 100)]);
oBinding.sort([new Sorter("name", false)]);

Dialog Handling

if (!this.pDialog) {
    this.pDialog = this.loadFragment({
        name: "my.app.view.fragments.MyDialog"
    });
}
this.pDialog.then(function(oDialog) {oDialog.open();});

---

Troubleshooting Common Issues

Binding not working

1. Check model set on view/component 2. Verify correct binding path 3. Confirm data loaded 4. Debug: console.log(this.getView().getModel().getData())

OData call failing

1. Verify service URL in manifest.json 2. Check CORS configuration 3. Test authentication 4. Use browser Network tab

View not displaying

1. Check view registration in manifest.json 2. Verify routing configuration 3. Match controller name 4. Check browser console for errors

Performance problems

1. Enable component preload 2. Use growing lists for large datasets 3. Implement OData paging 4. Use one-way binding when possible

---

Development Tools

UI5 Tooling

ui5 serve    # Development server
ui5 build    # Build for production
npm test     # Run tests

UI5 Inspector

  • Browser extension for debugging
  • View control tree and bindings
  • Performance analysis

Support Assistant

  • Press Ctrl+Alt+Shift+S
  • Built-in quality checker

---

Bundled Reference Files

This skill includes comprehensive reference documentation (15 files):

1. references/glossary.md: Complete SAPUI5 terminology and concepts (100+ terms) 2. references/core-architecture.md: Framework architecture, components, MVC, bootstrapping 3. references/data-binding-models.md: Data binding, models, filters, sorters 4. references/testing.md: QUnit, OPA5, mock server, test automation 5. references/fiori-elements.md: Fiori Elements templates, annotations, configuration 6. references/typescript-support.md: TypeScript setup, configuration, migration 7. references/routing-navigation.md: Routing, navigation, Flexible Column Layout 8. references/performance-optimization.md: Performance best practices, optimization 9. references/accessibility.md: WCAG 2.1 compliance, screen readers, ARIA 10. references/security.md: XSS prevention, CSP, authentication, CSRF 11. references/mdc-typescript-advanced.md: MDC controls, TypeScript control libraries 12. references/mcp-integration.md: MCP setup, troubleshooting, and fallback behavior 13. references/code-quality-checklist.md: Review checklist for UI5 projects 14. references/migration-patterns.md: Upgrade and modernization patterns 15. references/scaffolding-templates.md: Project scaffolding guidance

Access these files for detailed information on specific topics while keeping the main skill concise.

---

Templates Included

Ready-to-use templates in templates/ directory:

1. basic-component.js: Component.js template with best practices 2. manifest.json: Complete application descriptor template 3. xml-view.xml: XML view with common patterns 4. controller.js: Controller template with lifecycle hooks 5. formatter.js: Common formatter functions

---

Instructions for Claude

When using this skill:

1. Always use async patterns - sap.ui.define, async:true 2. Prefer XML views - more declarative and tooling-friendly 3. Use data binding - automatic XSS protection 4. Refer to reference files - for detailed information 5. Use templates - copy from templates/ and replace placeholders 6. Follow best practices - security, performance, accessibility 7. Provide working examples - test code patterns before suggesting

---

Bundled Resources

Reference Documentation

  • references/accessibility.md - Accessibility best practices
  • references/core-architecture.md - Framework architecture and component patterns
  • references/data-binding-models.md - Data binding and model usage
  • references/fiori-elements.md - Fiori Elements templates and annotations
  • references/mdc-typescript-advanced.md - MDC and TypeScript guidance
  • references/mcp-integration.md - MCP setup and troubleshooting
  • references/migration-patterns.md - Migration from older versions
  • references/performance-optimization.md - Performance optimization techniques
  • references/testing.md - Testing strategies and frameworks
  • references/security.md - XSS, CSP, authentication, and CSRF guidance

Templates

  • templates/basic-component.js - Component development template
  • templates/controller.js - Controller template
  • templates/xml-view.xml - XML view template
  • templates/formatter.js - Formatter helper template
  • templates/manifest.json - Application manifest template

---

License: GPL-3.0 Next Review: 2026-02-27 (Quarterly)

Related skills

mattpocockSetup Matt Pocock SkillsScaffold the per-repo configuration that Matt Pocock’s engineering agent skills rely on so they understand the issue tracker, triage labels, and domain documentation la495k196kopen.feishu.cnLark AppsConnect Claude, Cursor or custom agents directly to Lark (Feishu) for messaging, document automation, approval workflows and enterprise data access.402kjuliusbrusseeCavemanSlash token usage by roughly 75% while keeping every technical detail intact when working with Claude Code, Cursor or similar agents.391k94.7klarksuiteLark Skill MakerQuickly turn any Lark/Feishu OpenAPI call or multi-step workflow into a reusable agent skill with its own SKILL.md.386k16kxixu-meRunning Claude Code Via Litellm CopilotRun Claude Code at a fraction of the cost by routing requests through LiteLLM to the GitHub Copilot Chat API.270k72runcomfy-comCodex PetGenerate a complete Codex Pet spritesheet and metadata from one reference image without needing an OpenAI key or Codex Pro.246k10
AI & Agent Buildingagents
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.