- **sap-fiori-tools**: Use for rapid Fiori application development, Page Editor configuration, and deployment automation
Builds enterprise SAPUI5 applications with Fiori Elements, MDC controls, and testing frameworks.
/plugin marketplace add secondsky/sap-skills/plugin install sapui5@sap-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
README.mdreferences/accessibility.mdreferences/code-quality-checklist.mdreferences/core-architecture.mdreferences/data-binding-models.mdreferences/fiori-elements.mdreferences/glossary.mdreferences/mcp-integration.mdreferences/mdc-typescript-advanced.mdreferences/migration-patterns.mdreferences/performance-optimization.mdreferences/routing-navigation.mdreferences/scaffolding-templates.mdreferences/security.mdreferences/testing.mdreferences/typescript-support.mdtemplates/basic-component.jstemplates/controller.jstemplates/formatter.jstemplates/manifest.jsonComprehensive skill for building enterprise applications with SAP UI5 framework.
This skill integrates with the official @ui5/mcp-server for live development tools:
ui5-app-scaffolder agent or /ui5-scaffold commandui5-api-explorer agent or /ui5-api commandui5-code-quality-advisor agent or /ui5-lint commandui5-migration-specialist agent/ui5-version command/ui5-mcp-tools commandFor setup and troubleshooting, see references/mcp-integration.md.
Graceful Fallback: All features work without MCP by using reference files and built-in templates.
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 templatetemplates/manifest.json: Application descriptor templatetemplates/xml-view.xml: XML view with common patternstemplates/controller.js: Controller with best practicestemplates/formatter.js: Common formatter functionsUse templates by copying to your project and replacing placeholders ({{namespace}}, {{ControllerName}}, etc.).
Reference: references/core-architecture.md for detailed architecture concepts.
Key manifest sections:
sap.app: Application metadata and data sourcessap.ui: UI technology and device typessap.ui5: UI5-specific configuration (models, routing, dependencies)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.
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>
Navigate programmatically:
this.getOwnerComponent().getRouter().navTo("detail", {
objectId: sId
});
Reference: references/routing-navigation.md for routing patterns.
Build applications without JavaScript UI code using OData annotations.
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 sectionsReference: references/fiori-elements.md for comprehensive guide.
The sap.ui.mdc library provides metadata-driven controls for building dynamic UIs at runtime.
<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.
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");
});
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();
});
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.
// 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");}});
var oBinding = this.byId("table").getBinding("items");
oBinding.filter([new Filter("price", FilterOperator.GT, 100)]);
oBinding.sort([new Sorter("name", false)]);
if (!this.pDialog) {
this.pDialog = this.loadFragment({
name: "my.app.view.fragments.MyDialog"
});
}
this.pDialog.then(function(oDialog) {oDialog.open();});
console.log(this.getView().getModel().getData())ui5 serve # Development server
ui5 build # Build for production
npm test # Run tests
Ctrl+Alt+Shift+SThis skill includes comprehensive reference documentation (11 files):
Access these files for detailed information on specific topics while keeping the main skill concise.
Ready-to-use templates in templates/ directory:
When using this skill:
references/api-reference.md - Complete SAPUI5 API referencereferences/mobile-development.md - Mobile app development guidereferences/accessibility.md - Accessibility best practicesreferences/performance-optimization.md - Performance optimization techniquesreferences/theming.md - Theming and styling guidereferences/testing.md - Testing strategies and frameworksreferences/migration.md - Migration from older versionstemplates/component-template.js - Component development templatetemplates/controller-template.js - Controller templatetemplates/fragment-template.xml - Fragment templateconfig/grunt-config.js - Grunt configuration exampleconfig/webapp/manifest.json - Application manifest templateLicense: GPL-3.0 Version: 1.4.0 Last Verified: 2025-11-27 Next Review: 2026-02-27 (Quarterly)
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
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 best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.