From fiori-design
Aligns freestyle SAPUI5/OpenUI5 apps with the SAP Fiori Design Guidelines (Horizon). Use proactively when building or reviewing hand-written UI5 — choosing controls, page layout/floorplan, spacing, theming, accessibility, or UI text — in XML views, fragments, or controllers. Skip for Fiori Elements apps, which enforce these conventions through annotations.
How this skill is triggered — by the user, by Claude, or both
Slash command
/fiori-design:fiori-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Freestyle UI5 gives you total layout freedom — and removes the guardrails Fiori Elements provides for free. This skill restores those guardrails: every hand-built view should look, behave, and read like a first-party Fiori app. **When in doubt, choose what a Fiori Elements app would have generated.**
Freestyle UI5 gives you total layout freedom — and removes the guardrails Fiori Elements provides for free. This skill restores those guardrails: every hand-built view should look, behave, and read like a first-party Fiori app. When in doubt, choose what a Fiori Elements app would have generated.
references/floorplans.mdsap.m / sap.f; never <div>/<span> for app structure. → references/controls.mdsap.f.DynamicPage for most pages; sap.uxap.ObjectPageLayout for object pages. → references/floorplans.mdreferences/layout-and-spacing.mdreferences/theming.mdreferences/layout-and-spacing.md, references/accessibility.mdreferences/content-and-tone.mdreferences/floorplans.md — page patterns and when to use eachreferences/controls.md — design intent → correct Fiori controlreferences/layout-and-spacing.md — DynamicPage, responsive grid, content density, spacing classesreferences/theming.md — Horizon, theme parameters, CSS do's and don'tsreferences/accessibility.md — keyboard, ARIA, labels, contrastreferences/content-and-tone.md — labels, messages, sentence case, terminology<div>/<span>) for app structure — use UI5 controls.ObjectStatus, not manual color.Note: The
references/files are starter skeletons. Fill them in from the official guidelines at https://www.sap.com/design-system/fiori-design-web — each file lists the exact section to pull from.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub sonmezfurkan/fs-skills --plugin fiori-design