Agent guidance
Narrows to the two concerns the shadow DOM makes an agent get wrong on its own: accessibility and styling. UI5 Web Components agent skillsUI5 Web Components agent skillsTwo skills shipped inside the UI5 Web Components repository itself, under skills/: one for accessibility, covering ARIA and keyboard behaviour, and one for styling through shadow parts and custom properties.sap official, ui5 ships both inside the component library's own repository, so the guidance versions with the components it describes rather than dating separately, and sap-fiori-guidelinessap-fiori-guidelinesAn agent skill SAP publishes in its AI Skills Library, built from the Fiori Design Guidelines at v1.145: eighteen reference files an agent reads before it picks a control, a page type or an AI pattern.sap official, ui5 states the flavor from the other direction, as the framework-agnostic choice for a React, Vue or Angular application, carrying the design rules the three UI5 flavors share.
Showing artifacts, examples and content with confirmed Web Components applicability. View All UI5
Overview
UI5 Web Components agent skillsUI5 Web Components agent skillsTwo skills shipped inside the UI5 Web Components repository itself, under skills/: one for accessibility, covering ARIA and keyboard behaviour, and one for styling through shadow parts and custom properties.sap official, ui5 ships two skills inside the components' own repository: accessibility, covering the ARIA roles, keyboard behaviour and screen-reader support the shadow DOM handles automatically plus the accessibleName/accessibleDescription properties and the InvisibleMessage API for the parts it does not; and styling, covering the sanctioned ways to restyle a component from outside its shadow root — CSS shadow parts, custom states, SAP CSS variable overrides and, last, the addCustomCSS API — against the piercing selectors and undocumented internals that break on the next release. Beside them sap-fiori-guidelinessap-fiori-guidelinesAn agent skill SAP publishes in its AI Skills Library, built from the Fiori Design Guidelines at v1.145: eighteen reference files an agent reads before it picks a control, a page type or an AI pattern.sap official, ui5 states this flavor too, naming UI5 Web Components as the framework-agnostic choice for React, Vue or Angular and carrying the colour, typography and page-type references it shares with the other UI5 flavors.
Not covered: At those concerns. UI5/plugins-coding-agentsUI5/plugins-coding-agentsUI5's own plugins for coding agents, three of them: everyday development, modernising a legacy project, and converting one to TypeScript, each installed into Claude Code or GitHub Copilot.sap official, ui5, the door's other set of development plugins, states only the freestyle and fiori-elements flavors, so project scaffolding, deprecated-API modernisation and TypeScript conversion have no stated Web Components equivalent in the corpus. It also stops short of saying how the two skills reach an agent: nothing read in the components' repository on 2026-10-15 names a client they install into.
SAP/ui-theme-designer-plugins-for-coding-agentsSAP/ui-theme-designer-plugins-for-coding-agentsOne plugin that teaches a coding agent the SAP Design System, Fiori design tokens, and which theming parameters a given control actually reads, installed into Claude Code or GitHub Copilot.sap official, ui5, another sap-official provider behind the door, states no flavor at all, so it counts for neither reading. skillOverflowDanKromp/skillOverflowA collection of 41 agent skills, 37 for CAP, Fiori, BTP, UI5, ABAP, Integration Suite and HANA work and four for creating, reviewing and retiring skills, each with its own eval.independent, cap serves this door and states no flavor either, so it falls back into this flavor, but its own skill list names SAPUI5 data binding, custom controls, i18n and testing and nothing about the component library, so it is reported as a fallback rather than read as a community presence here.
No community artifact is documented here.
Artifacts
Tasks
Get an agent to follow the SAP Fiori design guidelines
A developer wants the controls, colours and messages an agent writes into a Fiori application to follow SAP's design guidelines, without the guidelines being pasted into the prompt each time.
About how the design rules reach the agent and which slice of them it gets. The guidelines themselves are SAP's and stay at experience.sap.com; whether a built screen passes a design review is not something any of these records establishes, and checking what an agent produced against a stated expectation is agent evals.
sap-fiori-guidelinesThe one entry whose subject is the guidelines rather than a framework. Its frontmatter names the cases it applies to, from buttons and tables through object pages and list reports to colours, typography and Joule integration, and the skill answers the recurring questions before any reference file is opened: that the emphasized button is the primary action and there is one per page or dialog, what each semantic colour means, and that an error prevents a task while a warning lets the user proceed. It also states which of SAPUI5, UI5 Web Components and Fiori elements each kind of application calls for, so an agent choosing between them has the skill's own answer.
Remaining work: Install it with the skills command line. The README names the revision it was built from, v1.145 of May 2026, so a rule that has moved since is the reader's to check against SAP's own page; the skill carries one dated reading rather than a live feed.
UI5 Web Components agent skillsTwo skills under skills/ in the components' own repository, so they move when the components do. The accessibility one states what the shadow DOM handles on its own, the ARIA roles, keyboard navigation, screen-reader support and high-contrast themes, and then names the properties and the InvisibleMessage API that cover what it does not. That is the part of the design system a guidelines document cannot answer, because it depends on what the component already does.
Remaining work: Get the two skills in front of an agent. Nothing read in the repository on 2026-10-15 names a client they install into, so how they are loaded is the reader's to work out.
Restyle a UI5 Web Component without breaking on the next release
A developer wants an agent to restyle a UI5 Web Component through the surfaces the library documents, rather than reaching into its shadow DOM in a way that stops working when the component changes.
About the styling rules the agent is handed. Building and publishing a theme is UI theme designer's own job, and whether a particular override survives a given release is between the developer and the component's changelog. Nothing here checks a stylesheet.
UI5 Web Components agent skillsThe styling skill, one of two shipped under skills/ in the components' own repository. It names four ways in, CSS shadow parts, CSS custom states, CSS variables and tag-level styling, says to use documented shadow parts only, and names the deprecated piercing selectors as not working rather than as discouraged. Living in the library's repository is what ties the guidance to the version of the components it describes.
Remaining work: Get the skill in front of the agent. Nothing read in the components' repository on 2026-10-15 names a client the two skills install into, so how they are loaded is the reader's to establish.
sap-fiori-guidelinesIt states the Web Components flavor in its own frontmatter and its reference files cover colours and typography, so a reader who has it installed has design rules in the session. What was not established is whether it says anything about applying them from outside a shadow root, which is the part of this outcome that goes wrong. Listed so the entry reads as looked at and not established, rather than as ruled out.
Remaining work: Read the colours-and-typography reference file and the Web Components passages beside it.
Details
Coverage
Designs that place it
Comparison properties
These are the questions used to compare what the artifacts do. Values come from their documentation and may apply to a particular ecosystem or runtime. Each recorded value in the comparison opens its statement and sources.
For your agent
- Ref
capability:agent-guidance- JSON
- /capabilities/agent-guidance.json
- MCP
- Connecting an agent