
sap-fiori-app-development
Guidelines for SAP Fiori app development for CAP and standalone projects. Use when creating or modifying SAP Fiori Elements applications, adding a List Report, Object Page, or Worklist, or connecting a Fiori app to a CAP service or OData endpoint.
- Installs
- 597
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/sap/open-ux-tools --skill sap-fiori-app-development- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads sap-fiori-app-development automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
SAP Fiori App Development Guidelines (CAP & Standalone Projects)
General Guidelines (Applicable to CAP and Standalone Fiori Projects)
- Always ask the user whether they want to create a Fiori app for CAP (Cloud Application Programming) or a standalone Fiori project connected to an external OData service before proceeding with implementation, unless the technology stack is explicitly specified in the user's request.
- Use the Fiori MCP tools to create the Fiori UI using SAP Fiori Elements.
- After the Fiori MCP Server tools execute successfully, inform the user of completion. Do not verify or double-check - treat successful tool execution as confirmation.
- The data model should be suitable for SAP Fiori elements: at minimum one entity type that serves as the main entity for the application. Navigation properties to related entities are optional but enable richer UI patterns.
- Each property of an entity must have a proper datatype.
- Before modifying the code directly - first check whether Fiori MCP server provides a suitable function or tool, or if a specialized skill exists (e.g.
sap-fiori-analytical-chart).
Available Application Templates (Both CAP and Standalone Projects)
The Fiori MCP can create the following application templates for both CAP and standalone project backends:
- FE_LROP - List Report Object Page (most common, OData V2/V4)
- FE_ALP - Analytical List Page (OData V2/V4)
- FE_OVP - Overview Page (OData V2/V4)
- FE_WORKLIST - Worklist (OData V2/V4)
- FE_FEOP - Form Entry Object Page (OData V4 only)
- FE_FPM - Flexible Programming Model / Custom Page (OData V4 only)
- FF_SIMPLE - Basic SAPUI5 Freestyle template (can work without a data source)
Available Page Types
The Fiori MCP can add the following page types to existing applications:
- ListReport - Table view with filtering and search
- ObjectPage - Detail page for viewing/editing records
- CustomPage - Fully custom page with your own views
Application Structure
- When asked to create a SAP Fiori elements app, check whether the user input can be interpreted as an application organized into one or more pages containing table data or forms.
- Applications typically start with a List Report page showing data in a table, but other templates are available (see above).
- Details of a specific table row are shown in an Object Page based on the base entity.
- An Object Page can contain sections based on navigation properties (both to-one (0..1) and to-many associations) of its entity type.
- Details of a table section row (for to-many associations) can be shown in another Object Page based on the association's target entity.
Application Preview Guidelines
- Use the most specific script for the app in
package.json. - For CAP: Use watch scripts (e.g.,
npm run watch-manage-travel) - For standalone Fiori projects: Use
npm start(live backend) ornpm run start-mock(mock data)
CAP-Specific Guidelines
- The fiori app must be created in the
appfolder under the CAP application root folder created before withcds initoperation. This root folder is always a subfolder directly under working directory. - When creating UI applications following a CAP application summary, make sure to use UI application names as described in the project structure of the summary, unless user explicitly requested otherwise.
- On any follow-up request to change or modify the UI of the full stack CAP application, always try first to make the change in the fiori app unless really required in service.
- Provide primary keys of type UUID for all entities.
- When creating sample data in CSV files, all primary keys and foreign keys MUST be in UUID format (e.g.,
550e8400-e29b-41d4-a716-446655440001).
Standalone Fiori Project Guidelines
- For standalone Fiori projects based on external services, the application is created at the root level by Fiori MCP tools.
- Destination or SAP System Name: If the user doesn't provide a destination name or SAP system name, use the Fiori MCP Server to retrieve and present available destinations/systems for user selection.
- Fetching OData Service Metadata (for initial app creation only): Refer to the tools instructions for downloading OData service metadata. If Service Center MCP is available use that, otherwise use the Fiori MCP Server to download the metadata file. To refresh metadata in an already-created app, see point 8 below.
- Annotations should primarily be maintained in the backend service, and only app-specific UI customizations or overrides should be placed in local (frontend) annotations.
- Use frontend annotations only for app-specific UI tweaks (e.g.,
/webapp/annotations/annotation.xml) referenced inmanifest.jsonwith matchinguriandlocalUrivalues:"annotation": { "type": "ODataAnnotation", "uri": "annotations/annotation.xml", "settings": { "localUri": "annotations/annotation.xml" } } - Standalone Fiori projects connect to remote OData V2 or V4 services (defined in
manifest.jsondataSources). - OData Service Metadata is Read-Only: The service metadata file (
/webapp/localService/mainService/metadata.xml) referenced inmanifest.jsonmust not be edited locally. Any changes to entity definitions, properties, or service structure must be made at the backend source:"dataSources": { "mainService": { "uri": "/path/to/odata/service/", "type": "OData", "settings": { "annotations": ["annotation"], "localUri": "localService/mainService/metadata.xml", "odataVersion": "4.0" } } } - Updating Service Metadata: To refresh the local
metadata.xmlfrom the live backend for an existing Fiori app, do not usedownload_odata_service_metadata(that tool is for initial metadata download during app or page creation, not for refreshing metadata already present in the project). Instead, invoke thesap-fiori-create-cliskill'supdate service-metadatasection.
FAQ
What does the sap-fiori-app-development skill do?
Guidelines for SAP Fiori app development for CAP and standalone projects. Use when creating or modifying SAP Fiori Elements applications, adding a List Report, Object Page, or Worklist, or connecting a Fiori app to a CAP service or OData endpoint.
How do I install sap-fiori-app-development?
Run npx skills add https://github.com/sap/open-ux-tools --skill sap-fiori-app-development in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/sap-fiori-app-development/ (personal) or .claude/skills/sap-fiori-app-development/ (project).
Which AI agents can use sap-fiori-app-development?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is sap-fiori-app-development safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains sap-fiori-app-development?
It is published by sap in sap/open-ux-tools. It has 597 recorded installs.
More from sap/open-ux-tools
sap-fiori-add-visual-filter
sap/open-ux-tools
Add visual filters (chart-based) to SAP Fiori Elements filter bar or value help using CAP or ABAP RAP. Use when asked to add chart filters, bar chart selectors, or visual filter bars to a Fiori Elements application.
sap-fiori-analytical-chart
sap/open-ux-tools
Add analytical chart (chart + table hybrid) to SAP Fiori Elements List Report using aggregated data. Supports CAP and ABAP RAP (OData V4). Use when asked to add a chart section, aggregated data visualization, or Analytical List Page chart to a List Report.
sap-fiori-create-cli
sap/open-ux-tools
Invokes the @sap-ux/create CLI — generate, add, convert, remove, update, change, list, get commands for SAP Fiori projects. Use when asked to run sap-ux, invoke create CLI, add config to a project, generate adaptation-project, or use any sap-ux/create subcommand. Full options for each command group are in the linked references.
sap-fiori-eslint-plugin
sap/open-ux-tools
Configure, migrate, or run ESLint with @sap-ux/eslint-plugin-fiori-tools in SAP Fiori projects (standalone or CAP). Use when ESLint is missing and the user wants to add it or add code quality checks; when an existing .eslintrc or eslint@8 config needs upgrading to ESLint 9 flat config; when the user wants to run linting, fix lint errors, or ESLint is broken or not working; or when the user wants to see the application issues or UX consistency issues for a specific app — e.g. "show application issue(s) for my project ", "show application issues for app X", "UX consistency issues", "issues consistent with Page Map", "same issues as Application Information".
sap-fiori-opa5-test-development
sap/open-ux-tools
Use this skill when writing, fixing, extending, or reviewing OPA5 integration tests for SAP Fiori Elements applications - whether the app uses OData V4 (sap.fe.test library) or OData V2 (fioriElementsTestLibrary). Triggers on any request involving OPA5 journeys, page objects, JourneyRunner setup, test structure, mock data, or debugging test failures in a SAP Fiori Elements project generated by SAP Fiori tools. Use even when the user says "write integration tests" or "add an OPA journey" without specifying the library, as long as the project context is SAP Fiori Elements. Not applicable to freestyle UI5 apps.
odata-vocabularies-sync
sap/open-ux-tools
Sync odata-vocabularies package — update all vocabulary resource files to their latest published versions, and optionally add a new vocabulary given its JSON URL. Use when asked to update vocabularies, refresh vocabulary resources, or add a new vocabulary to @sap-ux/odata-vocabularies.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.