SAPOfficial·13 Agent Skills Included

fundamental-styles

SAP Fiori CSS components, theming, and accessible UI patterns

Generates correct HTML and CSS for 140+ SAP Fiori components including buttons, forms, tables, dialogs, and navigation. Eliminates guesswork around BEM class naming, ARIA attributes, RTL support, and content density modes. Guides component selection, composition, theming, and accessibility so interfaces meet SAP design standards on the first try.

232|70

↗

npx skills add SAP/fundamental-styles --all -g -y

Available:

Tells the agent how to look up per-component markdown documentation, pick correct modifier and state classes, and generate accessible HTML using the library's BEM naming and theming conventions.

All Skills in This Repository (13)

Pure Emerald Level Indicators

📦 In Repo

SAP

accessibility-guide

Provides accessibility guidelines for fundamental-styles components, including ARIA roles and WCAG 2.1 compliance.

scss-style-guide

Enforce SCSS coding standards with BEM naming and file structure.

bem-naming

Explain BEM naming conventions for CSS classes in Fundamental Styles.

component-guidance-actions

Guide Fiori action component selection and UI design best practices.

component-guidance-forms

Guide Fiori form control selection for SAP data entry forms.

layout-patterns

Generates customizable UI layouts for common web application patterns such as login forms, dashboards, master-detail views, and wizards.

content-density

Implement cozy, compact, and condensed content density modes in SAP applications.

component-docs

Access fundamental-styles component documentation and HTML examples via Storybook.

component-guidance-feedback

Guide selection and implementation of Fiori feedback components.

component-guidance-layout

Guide SAP Fiori UI layout selection and component best practices.

component-guidance-data

Guide Fiori UI component selection for SAP application development.

component-composition

Combine fundamental-styles components with required wrappers and nesting rules.

Official

Intermediate

Frequently Asked Questions

FAQPage Schema

How to install fundamental-styles?▼

Run `npx skills add SAP/fundamental-styles --all -g -y` in your terminal to install all skills in this suite globally.

How to generate SAP Fiori component HTML?▼

Ask for any component by name and the agent reads its auto-generated markdown doc to produce complete HTML with correct modifiers, states, and ARIA attributes.

How to choose the right SAP component?▼

The component guidance skills explain when to use or avoid each component, with Fiori best practices for forms, tables, navigation, layout, and feedback patterns.

Does it handle accessibility and RTL?▼

Yes. Built-in guides enforce ARIA roles, label associations, keyboard support, and logical CSS properties so generated markup works for screen readers and right-to-left languages.

Can I use it without knowing SAP design?▼

Yes. Describe the interface you need in plain English and the agent applies the correct classes, themes, and density modes automatically.