sap-fiori-ios

SAP Fiori for iOS — Design Skill

A Claude Code skill that brings the full SAP Fiori for iOS design system into your AI-assisted workflow. It gives Claude deep, structured knowledge of every component, foundation, pattern, and platform extension — so you get correctly tokenised SwiftUI code, accurate Figma-to-code mappings, and consistent Fiori design decisions without hunting through documentation.

What's inside

Installation

We recommend using the skills CLI for installation:

npx skills add SAP/ai-skills-library --skill sap-fiori-ios

Usage

Once installed the skill activates automatically when your prompt mentions any of the following trigger terms: Fiori iOS, SwiftUI, iOS prototype, Figma to iOS, FioriButton, FioriTheme, animation, interaction, SAP 72, preferredFioriColor, ObjectItem, FioriSwiftUI.

You can also invoke it explicitly:

/sap-fiori-ios <your question or request>

How Claude uses the skill

• Reads the relevant component or foundation file before generating code
• Uses Color.preferredColor(...) tokens — never hardcoded hex values
• Maps Figma variant properties to the correct SwiftUI API
• Applies standard animation specs from the skill's animation table
• Respects Fiori layout, typography, and accessibility rules

Example prompts

Convert a Figma component to SwiftUI

Convert Figma node 123:456 from the SAP Fiori iOS UI Kit into SwiftUI.

Turn this Figma ObjectItem (3-line, with icon, Status: Warning) into SwiftUI code.

Build a screen from scratch

Build a List Report page in SwiftUI using Fiori components — searchable list of
purchase orders, each row showing vendor name, amount, and a status tag.

Create a Fiori Object Details screen for an invoice with a header, key-value form
section, and a primary + secondary action button pair.

Component guidance

Which Fiori component should I use for a multi-step approval workflow?

What's the correct Fiori pattern for showing an empty state when a search returns
no results?

Animation and interaction

Add a Fiori-spec press animation to my custom card component.

What are the correct animation parameters for a view sliding in from the bottom?

Theming and tokens

How do I override the tint color for a specific brand without breaking dark mode?

List all semantic color tokens related to status indicators (positive, negative,
critical, informative).

Platform extensions

What Joule components are available for an in-app AI assistant on iOS?

How should I adapt a Fiori List Report layout for visionOS?

Accessibility

Audit this SwiftUI view for Fiori accessibility compliance — Dynamic Type,
VoiceOver labels, and minimum touch target sizes.

Key rules the skill enforces

Never hardcode hex values. Always use Fiori color tokens:

Color.preferredColor(.primaryLabel)              // adapts to Light / Dark
Color.preferredColor(.tintColor, background: .darkConstant)  // forced scheme

Register the SAP 72 typeface at launch:

import FioriThemeManager

ThemeManager.shared.setPaletteVersion(.v8)
Font.registerFioriFonts()

Use Fiori font styles, not system styles:

Text("Headline").font(.fiori(forTextStyle: .headline))
Text("42").font(.fiori(fixedSize: 36, weight: .light))

File structure

sap-fiori-ios/
├── SKILL.md                  # Skill entry point — Figma mappings, quick-start template
├── README.md                 # This file
├── .well-known/skills/       # Skill discovery manifest
└── references/               # All guideline content
    ├── foundations/          # Colors, typography, theming, accessibility, animation …
    ├── components/           # 60+ individual component guidelines
    ├── patterns/             # Navigation, search, auth, onboarding, charts …
    ├── page-types/           # Full-screen templates
    ├── joule/                # SAP Joule AI copilot guidelines
    ├── in-app-ai-design/     # Embedded AI components and patterns
    ├── watchos/              # Apple Watch guidelines
    ├── visionos/             # Apple Vision Pro guidelines
    ├── carplay/              # CarPlay automotive guidelines
    ├── discover/             # Get started, design system overview, what's new
    ├── resources/            # UI kit links, Mentor app reference
    └── references/           # Quick-lookup tables (colors)

Resources

• SAP Fiori for iOS UI Kit on Figma
• SAP Fiori Design Guidelines
• FioriSwiftUI on GitHub