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 application design following SAP standards.
- Installs
- 1.2K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/sap/ai-skills-library --skill sap-fiori-guidelines- 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-guidelines 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 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:
- Role-based - Designed for specific user roles and tasks
- Adaptive - Works across devices and screen sizes
- Coherent - Consistent experience across all SAP applications
- Simple - Focused on essential tasks, reduces complexity
- 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
- SAP Fiori Design Guidelines: https://experience.sap.com/fiori-design-web/
- SAPUI5 SDK: https://ui5.sap.com/
- UI5 Web Components: https://sap.github.io/ui5-webcomponents/
When implementing specific components, always read the relevant reference file for detailed guidance and examples.
FAQ
What does the sap-fiori-guidelines skill do?
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.
How do I install sap-fiori-guidelines?
Run npx skills add https://github.com/sap/ai-skills-library --skill sap-fiori-guidelines 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-guidelines/ (personal) or .claude/skills/sap-fiori-guidelines/ (project).
Which AI agents can use sap-fiori-guidelines?
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-guidelines 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-guidelines?
It is published by sap in sap/ai-skills-library. It has 1,230 recorded installs.
More from sap/ai-skills-library
genai-hub-tabular-orchestration
sap/ai-skills-library
Open the skill to read its SKILL.md instructions.
aicore-admin-resources
sap/ai-skills-library
Open the skill to read its SKILL.md instructions.
aicore-lifecycle-management
sap/ai-skills-library
Open the skill to read its SKILL.md instructions.
genai-hub-foundation-models
sap/ai-skills-library
Open the skill to read its SKILL.md instructions.
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.