SkillsAdd

sap/ai-skills-library

sap-fiori-guidelines

SAP Fiori design guidelines for building enterprise applications. Use this skill when designing, building, or reviewing SAP Fiori applications, implementing SAPUI5 or UI5 Web Components, working with SAP enterprise UX patterns, or needing guidance on buttons, forms, tables, object pages, list reports, navigation, messaging, colors, typography, accessibility, AI/Joule integration, or any SAP Fiori UI element. Triggers on mentions of Fiori, SAPUI5, UI5, SAP UX, SAP design system, or enterprise ap…

Trending #6092 Hot #603 First seen May 12, 2026

Installation

$ npx skills add sap/ai-skills-library --skill sap-fiori-guidelines
View on skills.sh ↗ GitHub repository ↗

Summary

  • SAP Fiori design guidelines for building enterprise applications.
  • Use this skill when designing, building, or reviewing SAP Fiori applications, implementing SAPUI5 or UI5 Web Components, working with SAP enterprise UX patterns, or needing guidance on buttons, forms, tables, object pages, list reports, navigation, messaging, colors, typography, accessibility, AI/Joule integration, or any SAP Fiori UI element.
  • Triggers on mentions of Fiori, SAPUI5, UI5, SAP UX, SAP design system, or enterprise application design following SAP standards.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs
More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 50
License LICENSES
Default branch main
Open issues 18
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 7,686 B
  • docs README.md 2,940 B
  • docs SUMMARY.md 3,959 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 834 installs

SKILL.md

SAP Fiori Design Guidelines

Comprehensive guidance for designing and building SAP Fiori applications following official SAP design system standards.

When to Use This Skill

  • Designing or building SAP Fiori applications
  • Implementing SAPUI5 or UI5 Web Components
  • Following SAP enterprise UX patterns
  • Choosing UI elements for SAP applications
  • Implementing navigation, messaging, or data visualization
  • Ensuring accessibility and inclusive design
  • Applying colors, typography, or visual styling
  • Designing AI-powered features, Joule integration, or guided prompts

Core Principles

SAP Fiori is built on five principles:

  1. Role-based - Designed for specific user roles and tasks
  2. Adaptive - Works across devices and screen sizes
  3. Coherent - Consistent experience across all SAP applications
  4. Simple - Focused on essential tasks, reduces complexity
  5. Delightful - Engaging and intuitive user experience

Technology Options

Technology Use Case
SAPUI5 Full SAP Fiori applications, SAP BTP, S/4HANA
UI5 Web Components Framework-agnostic, React/Vue/Angular integration
SAP Fiori Elements Metadata-driven apps with OData services

Reference Documentation

Read the appropriate reference file based on your task:

UI Elements

Reference Contents
references/ui-actions.md Buttons, links, toggle buttons, menu buttons
references/ui-inputs.md Input fields, selects, checkboxes, radio buttons, sliders, date/time pickers, filter bar
references/ui-containers.md Panels, cards, dialogs, popovers, toolbars, forms, shell bar, user menu, notification center
references/ui-display.md Avatars, progress indicators, busy indicators, illustrated messages
references/ui-lists-tables.md Responsive tables, grid tables, analytical tables, grid lists, lists
references/ui-navigation.md Icon tab bar, segmented button, side navigation, shell search
references/ui-messages.md Message strips, message strip web component
references/ui-ai.md AI button, AI notice, AI writing assistant, AI acknowledgment, guided prompts, quick prompts, regenerate, home page banner
references/ui-upload.md Upload set with table plugin

Page Types & Floorplans

Reference Contents
references/page-types.md Object page, list report, analytical list page, overview page, dynamic page layout, page header

Foundations

Reference Contents
references/foundations-visual.md Colors, typography, iconography, theming, content density
references/foundations-interaction.md States, cursors, screen reader support
references/foundations-writing-and-wording.md UX writing, UI text guidelines
references/foundations-best-practices.md Navigation, messaging, object handling, action placement
references/foundations-ai-and-joule-design.md AI design patterns, Joule assistant, situation handling, AI guidelines
references/foundations-integration-and-services.md Fiori launchpad, integration patterns

SAP Fiori Elements & S/4HANA

Reference Contents
references/fiori-elements.md Smart templates, list report, object page, table features, AI input assistance
references/sap-s4hana.md S/4HANA specific design: navigation menu, product home page, AI error explanation

Quick Reference

Button Types and Usage

Type Usage
Emphasized Primary action - one per page/dialog
Default/Ghost Secondary actions
Transparent Toolbar actions, low emphasis
Accept (green) Positive semantic actions (Approve, Accept)
Reject (red) Negative semantic actions (Reject, Delete)

Semantic Colors

Color Meaning Usage
Neutral Default state Regular UI elements
Positive (Green) Success, good status Approval, completion
Critical (Orange) Warning Needs attention
Negative (Red) Error, bad status Rejection, errors
Information (Blue) Informational highlight Neutral information

Message Types

Type Usage
Error Prevents task completion, requires user action
Warning Potential issue, user can proceed
Success Confirms completed action
Information Neutral information

Navigation Patterns

Pattern When to Use
Drill-down Navigate to object details with back navigation
Full-screen Replace current view entirely
Flexible Column Layout Master-detail views in columns
Dialog/Popover Temporary overlay for quick tasks

AI Components

Component When to Use
AI Button Trigger AI-powered actions
AI Acknowledgment Show AI contribution transparency
Guided Prompts Help users formulate AI requests
Quick Prompts Provide predefined AI interaction shortcuts
Regenerate Allow users to request new AI-generated content
AI Writing Assistant Inline AI text assistance
Local AI Notice Inform users about on-device AI processing

Implementation Checklist

When building a Fiori application:

  • Single emphasized button per page/dialog
  • Proper semantic colors for status indication
  • Message handling with Message Popover
  • Accessible labels and ARIA attributes
  • Responsive layout for different screen sizes
  • Consistent navigation patterns
  • Form validation with value states
  • Loading indicators for async operations
  • AI features follow Joule design patterns where applicable

Key Guidelines

Buttons

  • Use text buttons for primary, secondary, and semantic actions
  • Icon-only buttons only for universally recognized metaphors
  • Always provide tooltips for icon buttons
  • Button text: imperative verb (Save, Edit, Create)

Forms

  • Group related fields logically
  • Use proper field labels (always visible)
  • Show validation errors with value states
  • Provide clear error messages

Tables

  • Use responsive table for most cases
  • Grid table for complex data analysis
  • Analytical table for aggregation needs
  • Always provide column headers

Messages

  • Message Popover for multiple messages
  • Message Box only for interrupting errors
  • Toast for transient success confirmations
  • Inline validation for form fields

AI Integration

  • Use AI Button for AI-triggered actions
  • Show AI Acknowledgment for transparency
  • Provide Guided Prompts to help users interact with AI
  • Always include Local AI Notice when processing happens on-device
  • Follow responsible AI principles in all AI-powered features

External Resources

When implementing specific components, always read the relevant reference file for detailed guidance and examples.