diff --git a/plugins/ui5/README.md b/plugins/ui5/README.md
index c73b603..8494784 100644
--- a/plugins/ui5/README.md
+++ b/plugins/ui5/README.md
@@ -108,6 +108,17 @@ Authoritative development guidelines for all UI5 table controls (SAPUI5 1.136+ L
 - **Personalization** - `sap.m.p13n.Engine` integration
 - **Cell templates & alignment** - Type-based alignment and model type namespace rules
 
+#### ui5-fiori-guidelines
+
+Picks the correct SAP Fiori / UI5 control for a use case — and stops the wrong one — giving both the SAPUI5 class and the `ui5-*` web component tag:
+
+- **Wrong → Right mapping** - The exact wrong control mapped to the right one (e.g. `sap.m.Bar` used as an app header → `sap.f.ShellBar` / `ui5-shellbar`)
+- **Use-case → Component map** - "App-level navigation" → `ShellBar`; "list → detail split" → `FlexibleColumnLayout`
+- **Table selection by data, not looks** - Responsive vs Grid vs Analytical vs Tree, and when a responsive table degrades
+- **Decision-first reference files** - Per control: when to use, when NOT (with the alternative), machine-checkable rules, gotchas — across actions, inputs, containers, navigation, lists/tables, display, messages, AI, and upload
+- **Critical one-liners** - One emphasized button per page, icon-only buttons need a tooltip, links navigate / buttons act, Popover is non-modal / Dialog is modal
+- **Maintenance** - `REFRESH.md` documents an agent-driven re-sync against SAP sources with human review (no unattended writes)
+
 ---
 
 ## Installation
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/README.md b/plugins/ui5/skills/ui5-fiori-guidelines/README.md
new file mode 100644
index 0000000..fe57119
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/README.md
@@ -0,0 +1,61 @@
+# SAP Fiori Component Selection Skill
+
+Picks the correct SAP Fiori / UI5 control for a use case — and stops the wrong one (a `sap.m.Bar` used as an
+app header, a responsive table used for large and complex data). This skill catches those before the code ships.
+
+Built for AI coding assistants working alongside application developers.
+
+## What it does
+
+- **Wrong → Right mapping.** The exact wrong control → the correct one, with the `sap.*` class and OpenUI5 / SAPUI5 availability.
+- **Use-case → Component map.** "I need to show app navigation" → `ShellBar`, not `Bar`.
+- **Decision-first reference files.** Every component: when to use, when NOT (with the alternative), machine-checkable rules, gotchas. No anatomy, no fluff.
+
+## Usage
+
+Starts automatically on SAP Fiori / UI5 questions and on code containing UI5 control names. Example triggers:
+
+- "How do I build a navigation bar in Fiori?"
+- "I'm using sap.m.Bar for my app header" (→ ShellBar)
+- "Which table should I use for large and complex data?"
+- "Which control for a brief success confirmation?" (→ MessageToast)
+- "Review my Fiori app against the guidelines" (→ review mode, implementation checklist)
+
+## Contents
+
+`SKILL.md` is the router: Wrong→Right table, Use-case→Component map, reference routing, critical one-liners.
+
+| Reference file | Topic |
+|---|---|
+| `component-selection.md` | Full wrong→right + table-type decision + long tail |
+| `theming-tokens.md` | CSS tokens, semantic colors, density tiers |
+| `ui-actions.md` | Buttons, links, toggle/segmented/menu buttons, menu, table toolbar |
+| `ui-inputs.md` | Inputs, selects, combo/multi, pickers, mask, filter bar, facet filter, value help |
+| `ui-layouts.md` | Dynamic page, flexible column layout, side panel, app / nav container |
+| `ui-containers.md` | Cards, dialog, popover, quick view, color palette, P13n, variant management |
+| `ui-navigation.md` | Shell bar, user menu, product switch, icon tab bar, tab container, side nav, shell search, breadcrumbs |
+| `ui-lists-tables.md` | Responsive / Grid / Analytical / Tree table, Grid List, List, pull to refresh |
+| `ui-display.md` | Avatar, progress, busy, illustrated message, carousel, tag, generic tag, expandable text, image, draft indicator |
+| `ui-messages.md` | Message strip / box / toast / popover |
+| `ui-ai.md` | AI button, guided/quick prompts, regenerate, local AI notice |
+| `ui-upload.md` | File Uploader vs Upload Set |
+| `implementation-checklist.md` | Code-review checklist for a built app (review mode) |
+
+## Tests
+
+`tests/eval.json` holds manual evaluation cases: control-selection prompts, reference-dispatch checks,
+and review-mode fixtures under `tests/fixtures/`. See `tests/README.md`.
+
+## Maintenance
+
+`REFRESH.md` documents the repeatable, agent-driven process to re-sync against latest SAP sources
+(diff + human review, no unattended writes).
+
+## Version
+
+Source: SAP Fiori Design Guidelines (`sap.com/design-system/fiori-design-web/`). Control names verified against `ui5.sap.com`.
+
+| Area | Guideline version | UI5 API version | Refreshed |
+|---|---|---|---|
+| Button (`ui-actions.md` Button + Split Button) | v1.151 | 1.153.0 | 2026-10-21 |
+| Everything else | not stamped (pre-refresh snapshot) | — | — |
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/REFRESH.md b/plugins/ui5/skills/ui5-fiori-guidelines/REFRESH.md
new file mode 100644
index 0000000..cc7abcc
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/REFRESH.md
@@ -0,0 +1,91 @@
+# Refreshing this skill
+
+The skill is a snapshot of SAP Fiori guidelines + UI5 APIs. Sources change. This is the repeatable
+process to re-sync it and keep it up to date. **No unattended writes** — the process reports drift and proposes edits; a
+human reviews and applies.
+
+## Authoritative sources
+
+| Source | URL | Reachable? | Use for |
+|---|---|---|---|
+| Fiori Design Guidelines | `sap.com/design-system/fiori-design-web/` | Yes, via versioned `.plain.html` (below) | Design rules, when-to-use |
+| SAPUI5 / OpenUI5 API | `ui5.sap.com/` | Yes | Verifying `sap.*` class names, deprecations, OpenUI5 library membership |
+| Theming tokens | `github.com/SAP/theming-base-content` | Yes (raw.githubusercontent.com) | CSS token names + values |
+
+### Fetching the design guidelines
+
+The portal is client-rendered, but each page's content is served as a static HTML fragment:
+
+```bash
+B=https://www.sap.com/design-system/fiori-design-web
+curl -sS "$B/v1-151/ui-elements/button/usage.plain.html"   # guideline body (When to Use, Types, Guidelines…)
+curl -sS "$B/v1-151/ui-elements/button.plain.html"         # hero: title + sap.* classes
+```
+
+- **Use a versioned path.** Unversioned URLs (`$B/ui-elements/button/`) return 404. Versions are published
+  every third release (`v1-136`, `v1-139`, … `v1-151`); find the newest by probing upward until 404.
+- **Headers.** Plain `curl` works. A browser `User-Agent` *without* an `Accept` header gets a 403 from the
+  bot filter; send `Accept: text/html` with it. `WebFetch`-style tools hit the unversioned URL and fail.
+- **Slug** = the control name in kebab case (`menu-button`, `segmented-button`, `upload-set`). Links inside a
+  page point to sibling slugs.
+- **Strip before use.** Content contains `[internal_only]…[/internal_only]` blocks and links to
+  `wiki.one.int.sap` / `wiki.wdf.sap.corp` — drop both (internal SAP material). Keep `[external_only]` text.
+- **API JSON** for step 2: `ui5.sap.com/test-resources/<lib path>/designtime/apiref/api.json`
+  (e.g. `sap/m`, `sap/ui/core`); current version at `ui5.sap.com/resources/sap-ui-version.json`.
+
+## Refresh process (agent-driven diff + review)
+
+Run one agent per file group so context stays scoped. Each agent:
+1. Reads its current reference file(s).
+2. Fetches the matching live source(s) above. For every `sap.*` class, checks `ui5.sap.com` for
+   existence, deprecation, and whether the library is part of OpenUI5 or SAPUI5-only. For tokens, fetches
+   `theming-base-content`.
+3. Diffs live vs current and **reports** — new/renamed/deprecated controls, changed token values,
+   new wrong-component pitfalls, dead links — plus a proposed edit list. It does **not** write.
+4. A human reviews the report and applies edits.
+
+File groups: `ui-actions/inputs/navigation` · `ui-containers/layouts/lists-tables` ·
+`ui-display/messages/ai/upload` ·
+`SKILL.md + component-selection/theming-tokens`.
+
+Can be launched as a Workflow (one agent per group, results collected) or via the Agent tool.
+
+### Scheduled refresh
+
+The Fiori design portal cannot be fetched live while the skill runs, so the skill is maintained as a
+snapshot. To keep it from drifting, run the process above on a schedule — at least once per UI5
+release — for example from a CI job that runs the agents and opens a pull request containing only the
+drift report and proposed edits. The "no unattended writes" rule still applies: a human reviews and
+merges.
+
+## Invariants every refresh must preserve
+
+- Decision-first contract per section: **OpenUI5 / SAPUI5 control · Use when · Do NOT use when → alternative · Rules · Gotchas.** No anatomy, no state prose.
+- Every control names its `sap.*` class and OpenUI5 vs SAPUI5 availability.
+- When a guideline page names a deprecated API, follow the API: recommend the replacement and mention the deprecated name only as a gotcha.
+- A section with no guideline page is marked "API-based, no guideline page" on its control line.
+- SKILL.md body stays a router: Wrong→Right table, Use-case→Component map, routing table, one-liners. Keep it under ~200 lines; keep `description` under ~1,536 chars.
+- Tone: short, concise, no fluff.
+
+## Verification after any refresh
+
+```bash
+# 1. No scrape artifacts or dead/internal links (must return nothing)
+grep -rnE '\+-+x-+\+|:badge|:decline:|:overflow:|:bell:|builder-prospect|ui5\.github\.io|wiki\.one\.int\.sap|&#x[0-9a-f]+;|Section Metadata|external_only' references/ SKILL.md
+
+# 2. Every ui-*.md component section names a sap.* identifier (spot-check)
+grep -rnE '`sap\.' references/ui-*.md | head
+
+# 3. SKILL.md budget
+wc -l SKILL.md   # target < 200
+```
+- For each `sap.*` class, confirm via `ui5.sap.com` that it exists and note OpenUI5 vs SAPUI5 availability.
+- Run the cases in `tests/eval.json` (see `tests/README.md`); add a case for every new control or wrong→right row.
+- Trigger test in a fresh session: "how do I build a navigation bar in Fiori", "I'm using sap.m.Bar
+  for my header", "which table for large and complex data", "design an object page" should each surface the right
+  guidance.
+
+## Version stamping
+
+- Record the SAP Fiori guideline version and refresh date in `README.md`.
+- On material change, bump the version line in `README.md`.
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/SKILL.md b/plugins/ui5/skills/ui5-fiori-guidelines/SKILL.md
new file mode 100644
index 0000000..f65cbf3
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/SKILL.md
@@ -0,0 +1,91 @@
+---
+name: ui5-fiori-guidelines
+description: Picks the correct SAP Fiori / UI5 control for a use case and prevents the usage of the wrong one; also reviews built OpenUI5/SAPUI5 apps against the Fiori guidelines. Use when (1) choosing between UI5 controls or planning page and app layout (DynamicPage, FlexibleColumnLayout, ObjectPageLayout, ShellBar, ToolPage, App), or (2) the user asks to review, audit, or check an existing Fiori app, view, or fragment against the Fiori guidelines. Covers sap.m.*, sap.f.*, sap.tnt.*, sap.uxap.*, sap.ui.table.* in XML views, fragments, controllers, and manifest.json. Catches classic wrong-component mistakes, for example sap.m.Bar as app header (use sap.f.ShellBar), List as side navigation (use sap.tnt.SideNavigation), responsive sap.m.Table for large data (use sap.ui.table.Table) or group subtotals (use AnalyticalTable), Dialog for a plain error (use MessageBox or MessageStrip), Page for object details (use sap.uxap.ObjectPageLayout).
+---
+
+# SAP Fiori Component Selection
+
+The job of this skill: pick the right control for the task or plan the correct Fiori application architecture / UX.
+
+## Two modes
+
+- **Select** (default) — the user is choosing a control or planning a layout. Answer from the tables below; open one reference file only when they do not answer it.
+- **Review** — the user asks to review, audit, or check existing code against the Fiori guidelines. Read `references/implementation-checklist.md` and check every item against the code. Report each failing item under its checklist section with the file, the control, and the fix. If nothing fails, reply "No Fiori guideline violations found."
+
+## OpenUI5 vs SAPUI5
+
+OpenUI5 and SAPUI5 share almost all `sap.*` controls. Label availability explicitly:
+- **OpenUI5 / SAPUI5** — `sap.m`, `sap.f`, `sap.tnt`, `sap.uxap`, `sap.ui.table`, `sap.ui.layout`, `sap.ui.unified`, `sap.ui.mdc`, `sap.ui.fl`, `sap.ui.integration`.
+- **SAPUI5** only — `sap.ui.comp.*` (smart controls), `sap.fe.*`, `sap.suite.ui.*`, `sap.ushell.*`.
+
+## Wrong → Right
+
+| Developer says / writes | WRONG | RIGHT | Why |
+|---|---|---|---|
+| "navigation bar", "app header", "top bar" | `sap.m.Bar` | `sap.f.ShellBar` | Bar is a generic toolbar; ShellBar is the app-level header (logo, search, notifications, profile, Joule). |
+| "side menu", "left navigation" | `sap.m.List` | `sap.tnt.SideNavigation` | List has no nav semantics, expand/collapse, or selection state. |
+| "tabs on a page", "sections" | `sap.m.TabContainer` | `sap.m.IconTabBar` | TabContainer is editable multi-document tabs; IconTabBar is in-page section/filter nav. |
+| "header with title + actions on a detail page" | `sap.m.Bar` / `sap.m.Page` | `sap.uxap.ObjectPageLayout` | ObjectPage provides standard header + anchored sections. |
+| "error popup", "confirmation dialog" | hand-built `sap.m.Dialog` | `sap.m.MessageBox` | MessageBox gives semantic types and standard buttons. |
+| "inline error / warning banner" | `sap.m.Dialog` / `MessageBox` | `sap.m.MessageStrip` | Dialogs interrupt; strips are non-blocking. |
+| "brief success confirmation" | `sap.m.MessageStrip` / `Dialog` | `sap.m.MessageToast` | Toast auto-dismisses; a strip persists. |
+| "many validation errors at once" | repeated `MessageStrip` | `sap.m.MessagePopover` | One entry point, grouped by severity. |
+| "big data table", "grid table with thousands of rows" | `sap.m.Table` | `sap.ui.table.Table` | Responsive table degrades past ~200 loaded items; grid table is for large desktop datasets and column comparison. |
+| "subtotals per group", "multilevel grouping" | `sap.m.Table` | `sap.ui.table.AnalyticalTable` (V4: `Table` + `ODataV4Aggregation`) | Responsive table only has footer totals, no group subtotals. A single column total stays in `sap.m.Table`. |
+| "hierarchy / tree" | grouped `AnalyticalTable` | `sap.ui.table.TreeTable` | Grouping clusters by value; TreeTable models parent-child nodes. |
+| "master–detail", "list + details side by side" | nested routes / custom CSS columns / `sap.m.SplitApp` | `sap.f.FlexibleColumnLayout` | FCL handles column transitions, breakpoints, and back nav. |
+| "page with title and collapsible header" | `sap.m.Page` + hand-built header | `sap.f.DynamicPage` | Title stays visible, header snaps on scroll, floating footer. |
+| "app with header and left menu" | custom layout around `SideNavigation` | `sap.tnt.ToolPage` | ToolPage places ShellBar and SideNavigation with correct responsive behavior. |
+| "object detail page" | `sap.m.Page` | `sap.uxap.ObjectPageLayout` | Page has no anchored section navigation. |
+| "menu button" | custom split markup | `sap.m.MenuButton` | Use MenuButton (or split mode) instead of ad-hoc menus. |
+| "secondary button in header/footer toolbar" | `type="Transparent"` | `type="Ghost"` | Ghost gives the guideline's default style there; Transparent is for negative path (Cancel) and the less important buttons in content toolbars. |
+| "on/off setting" | `sap.m.CheckBox` for immediate effect | `sap.m.Switch` | Switch = immediate effect; CheckBox = confirmed-on-save. |
+| "pick one from a long list" | `sap.m.Select` | `sap.m.ComboBox` / value help | Select is for short fixed lists (~2–12). |
+| "pick a date" | `sap.m.Input` | `sap.m.DatePicker` | Input has no calendar, parsing, or validation. |
+
+## Use case → Component
+
+| I need to… | Use | NOT |
+|---|---|---|
+| App-level nav: logo, search, notifications, profile | `sap.f.ShellBar` | Bar, Toolbar |
+| Left-hand navigation menu | `sap.tnt.SideNavigation` | List, VerticalLayout |
+| Navigate between facets of one object | `sap.m.IconTabBar` | TabContainer, SegmentedButton |
+| Switch a small set of views (2–3) | `sap.m.SegmentedButton` | RadioButtonGroup, Select |
+| Persistent page-level error/warning | `sap.m.MessageStrip` | MessageBox, Dialog |
+| One-time success confirmation | `sap.m.MessageToast` | MessageStrip, Dialog |
+| Show entity details (header + sections) | `sap.uxap.ObjectPageLayout` | Page, Panel |
+| List → detail split layout | `sap.f.FlexibleColumnLayout` | custom columns, SplitApp |
+| Page with title, collapsible header, footer | `sap.f.DynamicPage` | Page with custom header |
+| Switch between suite products from the header | `sap.f.ProductSwitch` | Menu, custom popover grid |
+| KPI / situation in a page header | `sap.m.GenericTag` | ObjectStatus, Text |
+| Empty / no-data / error state | `sap.m.IllustratedMessage` | plain Text/Label |
+| Contextual detail without leaving page | `sap.m.Popover` | Dialog (that's modal) |
+| Personalize 20+ table columns | `sap.m.p13n.Popup` | ViewSettingsDialog |
+
+## Reference files — read on demand
+
+| Topic | File | Read when |
+|---|---|---|
+| Full wrong→right + long tail, table-type decision | `references/component-selection.md` | Any control-choice question not fully answered above |
+| CSS tokens, semantic colors, density tiers | `references/theming-tokens.md` | Colors, theming, cozy/compact/condensed |
+| Buttons, links, toggle/segmented/menu buttons, menu, table toolbar | `references/ui-actions.md` | Choosing an action control |
+| Inputs, selects, combo/multi, pickers, mask, filter bar, facet filter | `references/ui-inputs.md` | Form/input/filter design |
+| Layouts: dynamic page, flexible column layout, side panel, app / nav container | `references/ui-layouts.md` | Page structure, list-detail, app root |
+| Containers: cards, panel, wizard, dialog, popover, color palette, P13n, variant management | `references/ui-containers.md` | Overlays, cards, panels, wizards, personalization |
+| Navigation: shell bar, user menu, product switch, icon tab bar, side nav, breadcrumbs | `references/ui-navigation.md` | Shell header, tab/section/side navigation |
+| Tables and lists (Responsive/Grid/Analytical/Tree/List), pull to refresh | `references/ui-lists-tables.md` | Choosing a table or list |
+| Avatar, image, carousel, tags, tokens, rating, draft indicator, progress, busy, illustrated message | `references/ui-display.md` | Status/empty-state display |
+| Message strip / popover / box / toast | `references/ui-messages.md` | Message pattern and placement |
+| AI/Joule: AI button, guided/quick prompts, notice | `references/ui-ai.md` | AI-powered features |
+| Upload (File Uploader vs Upload Set) | `references/ui-upload.md` | File upload |
+| Implementation review checklist | `references/implementation-checklist.md` | Review mode — always read it first |
+
+## Rules that stop the most mistakes
+
+- **One emphasized/primary button per page or dialog.** Everything else is Default/Transparent.
+- **Icon-only buttons need a tooltip** and a recognizable, worldwide-consistent icon metaphor.
+- **App header = ShellBar, never Bar.** Bar is a content-area toolbar.
+- **Button text is an imperative verb** — Save, Edit, Create. Not "OK to save?".
+- **Table choice is by data, not looks:** ≤~200 loaded items → Responsive (footer totals OK); large/desktop → Grid; multilevel grouping + subtotals → Analytical; simple hierarchy → `sap.m.Tree`, deep/large → TreeTable.
+- **Links navigate, buttons act.** Don't use a Button to go to a page or a Link to submit.
+- **Popover is non-modal contextual; Dialog is modal.** Don't use a Popover for anything requiring focus or confirmation.
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/references/component-selection.md b/plugins/ui5/skills/ui5-fiori-guidelines/references/component-selection.md
new file mode 100644
index 0000000..1bbe382
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/references/component-selection.md
@@ -0,0 +1,194 @@
+# Component Selection
+
+The full wrong to right map. SKILL.md carries the high-frequency subset; this file carries the long
+tail and the decision criteria. Every entry names the `sap.*` control and OpenUI5 vs SAPUI5 availability.
+
+## Contents
+- [Tables — the biggest offender](#tables--the-biggest-offender)
+- [Inputs & selection](#inputs--selection)
+- [Actions](#actions)
+- [Navigation & structure](#navigation--structure)
+- [Overlays & messaging](#overlays--messaging)
+- [Display & status](#display--status)
+- [SAPUI5-only controls](#sapui5-only-controls)
+
+---
+
+## Tables — the biggest offender
+
+Choose by **data shape**, never by appearance. This single decision causes more wrong-component
+usage than anything else.
+
+| Need | Control | Class |
+|---|---|---|
+| ≤ ~200 loaded items, mobile + desktop; simple column totals in the footer | Responsive Table | `sap.m.Table` |
+| Large data, desktop-first, cell comparison | Grid Table | `sap.ui.table.Table` |
+| Multilevel grouping with subtotals per group (OData V2) | Analytical Table | `sap.ui.table.AnalyticalTable` |
+| Deep or large (>~200 items) parent-child hierarchy (bill of materials, cost centers) | Tree Table | `sap.ui.table.TreeTable` |
+| Simple hierarchy, ≤~200 items, responsive | Tree | `sap.m.Tree` |
+| Card/tile visual layout, images, non-tabular | Grid List | `sap.f.GridList` |
+| Simple vertical item list, not columnar | List | `sap.m.List` / `sap.m.StandardListItem` |
+
+Decision order:
+1. **Hierarchy?** Two levels → grouped list/table; simple ≤~200 items → `sap.m.Tree`; deep or large → Tree Table.
+2. **Multilevel grouping + subtotals?** → Analytical Table. One column total → Responsive Table footer.
+3. **More than ~200 items loaded at once, or desktop cell-comparison?** → Grid Table.
+
+"~200" counts items loaded in the front end, not database rows. For OData V4, use `sap.ui.table.Table` with the `ODataV4Aggregation` / `ODataV4Hierarchy` plugin instead of `AnalyticalTable` / `TreeTable` (V2 / JSON only).
+4. **Visual cards, not columns?** → Grid List.
+5. **Otherwise** → Responsive Table (`sap.m.Table`).
+
+Common misuses:
+- **Responsive Table for large and complex data.** It loads and renders everything → DOM bloat, single-column pop-in mush. Use Grid Table.
+- **Analytical Table with no aggregation** → adds cost, drops mobile. Use Grid Table (without aggregation it looks the same as a grid table).
+- **Grouping an Analytical Table to fake a hierarchy.** Grouping ≠ nodes. Use Tree Table.
+- **Grid List for text-heavy tabular data** because "cards look nice." No column alignment/sort. Use Responsive Table.
+- **`sap.m.Table` as a drop-in for grid/analytical/tree tables** → responsive table has no group subtotals, freeze, or hierarchy (only footer totals).
+
+Smart/MDC tables (Fiori Elements): `sap.ui.comp.smarttable.SmartTable` (**SAPUI5**, OData V2) / `sap.ui.mdc.Table` (**OpenUI5 / SAPUI5**, OData V4) are annotation-driven wrappers — see the `ui5-best-practices-smart-controls` and `ui5-best-practices-mdc` skills. Don't hand-build these, and don't hand-build table personalization either — use `sap.m.p13n` (`Engine` + `Popup`).
+
+---
+
+## Inputs & selection
+
+Pick the simplest control that fits the cardinality and source.
+
+| Need | Control | Class |
+|---|---|---|
+| Single-line free text | Input | `sap.m.Input` |
+| Multi-line text | Text Area | `sap.m.TextArea` |
+| Pick one, short fixed list (~2–12) | Select | `sap.m.Select` |
+| Pick one, long list (13–200), type-ahead/free text | Combo Box | `sap.m.ComboBox` |
+| Pick many from a list | Multi-Combo Box | `sap.m.MultiComboBox` |
+| Enter many tokens (with value help/suggestions) | Multi-Input | `sap.m.MultiInput` |
+| Pick one, all options visible, ≤ ~8 | Radio Button (group) | `sap.m.RadioButton` / `RadioButtonGroup` |
+| Toggle a confirmed-on-save flag | Checkbox | `sap.m.CheckBox` |
+| Toggle an immediate on/off state | Switch | `sap.m.Switch` |
+| Pick a date | Date Picker | `sap.m.DatePicker` |
+| Pick a date range | Date Range Selection | `sap.m.DateRangeSelection` |
+| Pick date + time | Date/Time Picker | `sap.m.DateTimePicker` |
+| Pick a time | Time Picker | `sap.m.TimePicker` |
+| Numeric with steppers | Step Input | `sap.m.StepInput` |
+| Search a list/table | Search Field | `sap.m.SearchField` |
+| Complex value selection (dialog + inline) | Value Help | `sap.ui.mdc.ValueHelp` (OpenUI5 / SAPUI5) / `sap.ui.comp.valuehelpdialog.ValueHelpDialog` (**SAPUI5**) |
+
+Common misuses:
+- **Input for dates** → use Date Picker (parsing, calendar, validation come free).
+- **Select for 200 items** → use Combo Box or Input + value help.
+- **Checkbox for an immediate on/off** → use Switch; Checkbox implies "applies on save."
+- **Multiple Inputs for multi-value entry** → use Multi-Input or Multi-Combo Box.
+- **Select for a binary** → use Switch (setting) or Radio group (2 visible choices).
+
+---
+
+## Actions
+
+| Need | Control | Class |
+|---|---|---|
+| Trigger an action | Button | `sap.m.Button` |
+| Navigate to a page/anchor/URL | Link | `sap.m.Link` |
+| Toggle a two-state toolbar action | Toggle Button | `sap.m.ToggleButton` |
+| Choose one of a small option set | Segmented Button | `sap.m.SegmentedButton` |
+| Button that opens a menu | Menu Button | `sap.m.MenuButton` |
+| Default action + menu | Split Button | `sap.m.MenuButton` (split) |
+
+Button emphasis:
+- **Primary:** `type="Emphasized"` — one per page/dialog.
+- **Secondary:** header/footer toolbars → `type="Ghost"`; content toolbars → most important button `type="Ghost"`, the rest `type="Transparent"`.
+- **Negative path (Cancel):** `type="Transparent"`.
+- **Positive/Negative:** semantic `Accept`/`Reject`, header/footer only. Text buttons only.
+
+Common misuses:
+- **Button for navigation** → Link. **Link to submit** → Button.
+- **Cancel styled as secondary** (`Default`/`Ghost`) → negative path is `type="Transparent"`.
+- **Custom menu button markup** → use `sap.m.MenuButton` (or split mode) instead.
+
+---
+
+## Navigation & structure
+
+| Need | Control | Class |
+|---|---|---|
+| App header (logo, search, notifications, profile, Joule) | Shell Bar | `sap.f.ShellBar` |
+| Left navigation menu | Side Navigation | `sap.tnt.SideNavigation` |
+| In-page section/facet navigation | Icon Tab Bar | `sap.m.IconTabBar` |
+| Editable multi-document tabs | Tab Container | `sap.m.TabContainer` |
+| Switch between products of a suite (Shell Bar) | Product Switch | `sap.f.ProductSwitch` |
+| App shell with header + left navigation | Tool Page | `sap.tnt.ToolPage` |
+| Page with title, collapsible header, floating footer | Dynamic Page | `sap.f.DynamicPage` |
+| Object detail floorplan | Object Page | `sap.uxap.ObjectPageLayout` |
+| List → detail columns | Flexible Column Layout | `sap.f.FlexibleColumnLayout` |
+| Root container for full-page navigation | App | `sap.m.App` |
+| Page drill-down inside a popover/dialog | Nav Container | `sap.m.NavContainer` |
+| Breadcrumb trail | Breadcrumbs | `sap.m.Breadcrumbs` |
+| Save/load view configurations | Variant Management | `sap.m.VariantManagement` / `sap.ui.fl.variants.VariantManagement` |
+
+Common misuses:
+- **Bar as app header** → ShellBar. Bar is a content-area toolbar (page/dialog header/footer).
+- **List as side nav** → SideNavigation (nav semantics, expand/collapse, selection).
+- **`sap.f.SideNavigation`** → does not exist. The class is `sap.tnt.SideNavigation`.
+- **TabContainer for in-page sections** → IconTabBar. TabContainer is browser-tab-style editing.
+- **`sap.tnt.SideNavigation` standalone** → put it in the `sideContent` of `sap.tnt.ToolPage` or responsive behavior breaks.
+- **Shell Bar `Back` button** → prefer the browser back button; only use ShellBar back when technically forced.
+- **`sap.m.Page` with a hand-built collapsible header** → Dynamic Page (title stays visible, header snaps on scroll).
+- **`sap.m.SplitApp` for new list-detail apps** → Flexible Column Layout.
+- **FCL layout set with `setLayout` in controllers** → drive the layout from the router (`{layout}` route parameter) with `FlexibleColumnLayoutSemanticHelper`.
+- **`app.to()` for app-level navigation** → use the router so the URL hash, back, and bookmarks work.
+
+---
+
+## Overlays & messaging
+
+| Need | Control | Class |
+|---|---|---|
+| Modal that blocks and requires input | Dialog | `sap.m.Dialog` |
+| Semantic error/warning/success/confirm dialog | Message Box | `sap.m.MessageBox` |
+| Non-blocking inline page message | Message Strip | `sap.m.MessageStrip` |
+| Transient success confirmation | Message Toast | `sap.m.MessageToast` |
+| Aggregate many messages | Message Popover | `sap.m.MessagePopover` |
+| Contextual detail beside a trigger | Popover | `sap.m.Popover` |
+| Standardized object preview | Quick View | `sap.m.QuickView` |
+| Responsive popover (full-screen on phone) | Responsive Popover | `sap.m.ResponsivePopover` |
+
+Common misuses:
+- **Dialog for a plain error** → MessageBox (semantic type + buttons for free).
+- **MessageBox/Dialog for inline feedback** → MessageStrip (non-blocking).
+- **MessageStrip/Dialog for brief success** → MessageToast (auto-dismiss).
+- **Popover for confirmation** → Dialog. Popover is non-modal, background stays interactive.
+- **Custom Popover structure for object preview** → QuickView (standard) unless it truly can't fit.
+
+---
+
+## Display & status
+
+| Need | Control | Class |
+|---|---|---|
+| Picture or logo as content | Image | `sap.m.Image` |
+| Person / object thumbnail | Avatar | `sap.m.Avatar` |
+| Status in a table cell, list, or form | Object Status | `sap.m.ObjectStatus` |
+| KPI or situation in a page header | Generic Tag | `sap.m.GenericTag` |
+| "Saving draft..." / "Draft saved" feedback | Draft Indicator | `sap.m.DraftIndicator` |
+| Object editing-status marker (Draft, Locked, Unsaved) | Object Marker | `sap.m.ObjectMarker` |
+| Refresh a list by pulling down (touch) | Pull to Refresh | `sap.m.PullToRefresh` |
+| Empty / no-data / error state | Illustrated Message | `sap.m.IllustratedMessage` |
+
+Common misuses:
+- **`sap.m.Image` with only `alt`** → `decorative` defaults to `true`, so `alt` is ignored. Set `decorative="false"` for meaningful images.
+- **`sap.m.Image` for icons** → `sap.ui.core.Icon`. **For person thumbnails** → `sap.m.Avatar`.
+- **`ObjectStatus` for header KPIs** → Generic Tag. **Generic Tag in table cells** → ObjectStatus.
+- **MessageToast for every draft autosave** → Draft Indicator in the footer.
+- **Pull to Refresh on desktop-only pages** → a Refresh button in the toolbar.
+
+---
+
+## SAPUI5-only controls
+
+Mark these **SAPUI5** (libraries not shipped with OpenUI5):
+- `sap.ui.comp.smarttable.SmartTable`, `sap.ui.comp.smartfilterbar.SmartFilterBar`, and related `sap.ui.comp.*` smart controls.
+- `sap.fe.*` (SAP Fiori elements for OData V4), `sap.suite.ui.*`, and `sap.ushell.*` (SAP Fiori launchpad).
+
+These ship with **both** OpenUI5 and SAPUI5 — do not mark them SAPUI5-only:
+- `sap.m`, `sap.f`, `sap.uxap`, `sap.ui.table`, `sap.ui.layout`, `sap.ui.unified`.
+- `sap.tnt` (`SideNavigation`, `ToolPage`, `ToolHeader`).
+- `sap.ui.mdc`, `sap.ui.fl` (including `sap.ui.fl.variants.VariantManagement`), `sap.ui.integration`.
+- `sap.m.plugins.UploadSetwithTable` (replaces the deprecated `sap.m.upload.UploadSet` and `sap.m.UploadCollection`).
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/references/implementation-checklist.md b/plugins/ui5/skills/ui5-fiori-guidelines/references/implementation-checklist.md
new file mode 100644
index 0000000..dca8f64
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/references/implementation-checklist.md
@@ -0,0 +1,124 @@
+# Implementation Checklist
+
+Use this in **review mode** (see SKILL.md): when the user asks to review, audit, or check a built Fiori app.
+Each item is a yes/no check. Report only failing items, grouped by the section headings below, each with
+the file, the control, and the fix. Skip sections that do not apply to the code under review.
+
+## Shell and Navigation
+
+- [ ] App header uses `sap.f.ShellBar` — not `sap.m.Bar` or a custom header
+- [ ] Left-hand navigation uses `sap.tnt.SideNavigation` (not a List) inside the `sideContent` of `sap.tnt.ToolPage`
+- [ ] No `sap.f.SideNavigation` — the class is `sap.tnt.SideNavigation`
+- [ ] Master–detail layout uses `sap.f.FlexibleColumnLayout` — not custom CSS columns or `sap.m.SplitApp`
+- [ ] FCL layout is driven by the router (`{layout}` route parameter) and `FlexibleColumnLayoutSemanticHelper` — not by `setLayout` calls in controllers
+- [ ] FCL column actions (full screen / exit full screen / close) are in the column title's `navigationActions`
+- [ ] App-level navigation goes through the router — not `App.to()` / `NavContainer.to()`
+- [ ] Exactly one root container (`sap.m.App`, FCL, `SplitApp`, or `ToolPage`) — no nested `sap.m.App`
+- [ ] Cross-app navigation uses semantic object / action intents — not raw URLs
+- [ ] Back navigation works with the browser back button and shell back arrow
+- [ ] `manifest.json` declares `crossNavigation.inbounds` and `outbounds`
+
+## Layout and Floorplan
+
+- [ ] Object detail pages use `sap.uxap.ObjectPageLayout` — not `sap.m.Page`
+- [ ] Pages with a collapsible header use `sap.f.DynamicPage` — not `sap.m.Page` with a hand-built header
+- [ ] `DynamicPage` `fitContent="true"` only when the content stretches in height (e.g. grid table with auto row count)
+- [ ] `DynamicPage` footer (`showFooter`) holds finalizing actions only (Save, Cancel, Submit)
+- [ ] List → detail split uses FCL — not nested routes with manual column CSS
+- [ ] Wizards use `sap.m.Wizard` — not a sequence of dialogs
+- [ ] Tab-based in-page navigation uses `sap.m.IconTabBar` — not `TabContainer`
+
+## Buttons and Actions
+
+- [ ] Exactly one emphasized / primary button per page or dialog
+- [ ] Destructive actions (Delete, Discard) are Default or Transparent — never emphasized
+- [ ] Header/footer toolbars: secondary `type="Ghost"`, negative path (Cancel) `type="Transparent"`. Content toolbars: most important button `Ghost` (or `Emphasized` if it is the page's only primary action), other secondary `Transparent`, no `Accept`/`Reject`
+- [ ] Icon-only buttons have a tooltip and an accessible name
+- [ ] Button text is an imperative verb (Save, Edit, Approve) — not "OK", "Yes", "Submit"
+- [ ] Page-level actions are in the toolbar or floating footer — not inline in content
+- [ ] Overflow actions use an overflow menu — button labels are not truncated
+
+## Forms and Inputs
+
+- [ ] Every input field has a visible label (not placeholder-only)
+- [ ] Required fields marked with `*`; convention explained once on the form
+- [ ] Date inputs use `sap.m.DatePicker` — not a plain `Input`
+- [ ] Short fixed lists (2–12 items) use `Select`; long/dynamic lists use `ComboBox` + value help
+- [ ] Immediate-effect toggles use `Switch`; save-confirmed selections use `CheckBox`
+- [ ] Form validation uses `valueState` on the control — not manual border color CSS
+- [ ] Error messages are associated with their field (`aria-describedby` or control API)
+
+## Tables and Lists
+
+- [ ] Responsive table (`sap.m.Table`) used only for ≤~200 loaded items; no group subtotals needed (footer totals are fine, but not in growing mode)
+- [ ] Large datasets use `sap.ui.table.Table` — not responsive table
+- [ ] Subtotals and totals use `sap.ui.table.AnalyticalTable` — not responsive table
+- [ ] Hierarchical data uses `sap.ui.table.TreeTable` — not grouped AnalyticalTable
+- [ ] Table type choice matches the data shape (see `references/ui-lists-tables.md`)
+- [ ] Empty table state uses `IllustratedMessage` — not a plain "No data" text
+
+## Messaging
+
+- [ ] Persistent page-level messages use `MessageStrip` — not a Dialog
+- [ ] One-time success confirmations use `MessageToast` — not a persistent strip
+- [ ] Multiple validation errors use `MessagePopover` — not stacked strips
+- [ ] Modal confirmations and errors use `MessageBox` — not a hand-built Dialog
+- [ ] MessageToast text fits within 3 seconds of reading (~80 chars)
+- [ ] Draft autosave feedback uses `sap.m.DraftIndicator` in the footer — not a MessageToast per save
+
+## Colors and Theming
+
+- [ ] No hard-coded hex colors — all colors use `--sap*` CSS tokens
+- [ ] Semantic colors used by meaning: error → `--sapNegativeColor`, warning → `--sapCriticalColor`, etc.
+- [ ] Embedded AI uses SAP blue (`--sapBrandColor`) — purple / `--sapAssistant_*` only for Joule
+- [ ] Form field validation uses `valueState` — not manual color overrides
+
+## Content Density
+
+- [ ] Density set once at the app root (Cozy / Compact / Condensed)
+- [ ] Cozy and Compact not mixed arbitrarily in the same app context
+- [ ] Condensed used only in table contexts within a Compact container
+
+## Accessibility
+
+- [ ] Every interactive element has an accessible name (label, `aria-label`, or tooltip)
+- [ ] Meaningful `sap.m.Image` controls set `decorative="false"` and `alt` — `alt` alone is ignored because `decorative` defaults to `true`
+- [ ] Form fields have an associated `<label>` — placeholder text not used as the only label
+- [ ] Heading hierarchy is sequential (H1 → H2 → H3) with no skipped levels
+- [ ] Focus indicator is visible on all interactive elements — `outline: none` not used without a replacement
+- [ ] Focus is trapped in modal dialogs; on close, focus returns to the trigger element
+- [ ] Dynamic content updates use `aria-live` regions
+- [ ] App tested with keyboard-only navigation
+
+## AI Features
+
+- [ ] AI Notice shown for every AI-generated output (required under EU AI Act Art. 50)
+- [ ] AI icon (`sap-icon://ai`) used on AI entry points — not on non-AI controls
+- [ ] No purple or Joule gradient (`--sapAssistant_*`) on embedded AI buttons, icons, or notices
+- [ ] At least Level 1 explanation indicator on all AI-generated results
+- [ ] Level 2 explanation available when Level 1 indicator is clickable
+- [ ] Level 3 explanation is role-gated (not accessible to general users by default)
+- [ ] Agentic AI workflows have cancel/pause controls and a human confirmation step before irreversible actions
+
+## Loading and Empty States
+
+- [ ] `BusyIndicator` shown for operations ≥ 1 second; minimum display time 500 ms
+- [ ] Placeholder loading (skeleton) used for initial page load of large datasets
+- [ ] Empty states use `sap.m.IllustratedMessage` / `sap.m.IllustratedMessage`
+- [ ] Empty state includes an actionable button when the user can create or reset
+
+## Fiori Elements (when applicable)
+
+- [ ] Column visibility, criticality, and actions configured via annotations — not controller code
+- [ ] Table columns defined in `UI.LineItem` annotation — not added programmatically
+- [ ] Field visibility controlled by `UI.Hidden` annotation — not `visible="{=...}"` in XML
+- [ ] Object page header facets in `UI.HeaderFacets` — not custom fragments in the header
+- [ ] Custom actions registered via `manifest.json` extensions — not added directly to controller
+
+## Data Formatting
+
+- [ ] Dates formatted via SAPUI5 `DateFormat` — not manual string formatting
+- [ ] Numbers formatted via SAPUI5 `NumberFormat` with locale-aware separators
+- [ ] Currency displayed with ISO code or symbol
+- [ ] Units of measurement abbreviated per SI standard with a space before the unit
+- [ ] Input values trimmed of leading/trailing whitespace before persistence
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/references/theming-tokens.md b/plugins/ui5/skills/ui5-fiori-guidelines/references/theming-tokens.md
new file mode 100644
index 0000000..52e603f
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/references/theming-tokens.md
@@ -0,0 +1,79 @@
+# Theming Tokens
+
+Use SAP theme parameters (CSS custom properties), never hard-coded hex. The theme (default:
+**Horizon**) resolves them, including High Contrast Black/White and dark variants. Values below are
+Horizon Morning (light); do not hard-code them — reference the token.
+
+Convention: `--sap<Category>_<Variant>` — e.g. `--sapButton_Emphasized_Background`,
+`--sapField_InvalidColor`. Full set: `github.com/SAP/theming-base-content`.
+
+## Base & brand
+
+| Token | Value | Use |
+|---|---|---|
+| `--sapBrandColor` | `#0070f2` | Primary brand accent |
+| `--sapHighlightColor` | `#0064d9` | Highlighted/active elements |
+| `--sapBaseColor` | `#fff` | Base background |
+| `--sapContent_Selected_TextColor` | `#0064d9` | Selected text |
+
+## Semantic status colors
+
+Map meaning → token. Don't pick colors by eye.
+
+| Meaning | Token | Value |
+|---|---|---|
+| Positive / success | `--sapPositiveColor` | `#256f3a` |
+| Critical / warning | `--sapCriticalColor` | `#e76500` |
+| Negative / error | `--sapNegativeColor` | `#aa0808` |
+| Informative | `--sapInformativeColor` | `#0070f2` |
+| Neutral | `--sapNeutralColor` | `#788fa6` |
+
+For form fields use the value-state tokens (`--sapField_InvalidColor`, `--sapField_WarningColor`,
+`--sapField_SuccessColor`, `--sapField_InformationColor`) via the control's `valueState`, not manual CSS.
+
+## Buttons & fields
+
+| Token | Value |
+|---|---|
+| `--sapButton_Emphasized_Background` | `#0070f2` |
+| `--sapButton_Emphasized_TextColor` | `#fff` |
+| `--sapField_BorderColor` | `#556b81` |
+
+## AI / Joule
+
+Embedded AI (AI buttons, icons, Local AI Notice) uses **SAP blue**, not purple. Purple is reserved for the Joule assistant. Don't introduce other colors for AI.
+
+| Use | Token | Value |
+|---|---|---|
+| Embedded AI buttons, icons, related UI | `--sapBrandColor` | `#0070f2` |
+| AI-populated fields / AI suggestions (attention) | `--sapInformationBackground` | `#e1f4ff` |
+| Joule header and Joule UI only | `--sapAccentColor5` / `--sapAssistant_Color1` | `#5d36ff` |
+| Joule gradient — brand/marketing moments only (welcome screens, banners) | `--sapAssistant_BackgroundGradient` | `linear-gradient(#5d36ff, #a100c2)` |
+
+## Typography
+
+| Token | Value |
+|---|---|
+| `--sapFontFamily` | `"72", "72full", Arial, Helvetica, sans-serif` |
+| `--sapFontSize` | `.875rem` (14px) |
+
+The SAP font is **72**. Condensed density uses `72-Condensed`. Don't set a custom font family.
+
+## Content density — three tiers
+
+Set once at the app root; controls inherit it.
+
+| Tier | Element height token | Value |
+|---|---|---|
+| Cozy (default) | `--sapElement_Height` | `2.25rem` |
+| Compact | `--sapElement_Compact_Height` | `1.625rem` |
+| Condensed | `--sapElement_Condensed_Height` | `1.375rem` |
+
+- OpenUI5 / SAPUI5: add the CSS class `sapUiSizeCozy` / `sapUiSizeCompact` / `sapUiSizeCondensed` on a container (cozy is the default).
+- Condensed is table-only and must sit inside a Compact container.
+
+## Rules
+
+- Reference tokens, never hex. A hard-coded `#aa0808` breaks in dark/HCB themes.
+- Semantic color = meaning, not decoration. Error is always the negative token.
+- One density per app context; don't mix cozy and compact arbitrarily.
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-actions.md b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-actions.md
new file mode 100644
index 0000000..e955415
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-actions.md
@@ -0,0 +1,132 @@
+# UI Actions
+
+## Contents
+- [Button](#button)
+- [Link](#link)
+- [Toggle Button](#toggle-button)
+- [Segmented Button](#segmented-button)
+- [Menu Button](#menu-button)
+- [Menu](#menu)
+- [Split Button](#split-button)
+- [Table Toolbar](#table-toolbar)
+
+---
+
+## Button
+
+- **OpenUI5 / SAPUI5:** `sap.m.Button`
+- **Use when:** The user needs to trigger an action — submit, save, create, delete, open a dialog.
+- **Do NOT use when:**
+  - Navigating to a page, object, or URL → `sap.m.Link`.
+  - General navigation → Home or `sap.m.Breadcrumbs`.
+  - Stepping through a multi-step process → `sap.m.Wizard`.
+  - Uploading files → `sap.m.plugins.UploadSetwithTable` (single file: `sap.ui.unified.FileUploader`). Not the deprecated `sap.m.upload.UploadSet`.
+  - Selecting from related options → `sap.m.RadioButtonGroup` / `sap.m.CheckBox`.
+- **Rules:**
+  - One `type="Emphasized"` button per page or dialog — the primary action only.
+  - Header/footer toolbars: secondary → `type="Ghost"` (renders the guideline's "default" style there); negative path (Cancel) → `type="Transparent"`; positive/negative semantic actions → `type="Accept"` / `type="Reject"`, text only.
+  - Content toolbars (table, form, chart): `Emphasized` only if the page's single primary action lives there, otherwise the most important button is `type="Ghost"` (the guideline's "default" style, as in header/footer toolbars); other secondary, negative path, menu and split buttons → `type="Transparent"`. No semantic types (`Accept`/`Reject`).
+  - Primary, secondary, semantic, and negative path actions are text buttons. Icon-only only for universally recognizable metaphors.
+  - Icon-only buttons need a `tooltip`; check the icon's default accessibility text and override it if wrong. Use the `icon` property — never an `sap.ui.core.Icon` as a button.
+  - Text: short imperative verb (Save, Edit, Cancel). Affected count in parentheses: "Edit (3)". Allow for 300% text growth in translation.
+  - Unavailable action → `enabled="false"`.
+  - Keyboard shortcut hint → `sap.ui.core.CommandExecution`, not the tooltip.
+- **Gotchas:**
+  - SAP S/4HANA: icon *or* text, not both. Fiori Elements supports only text buttons, except table inline actions (icon or text, not both).
+  - Changing text, icon, or tooltip after a press → announce it via `sap.ui.core.InvisibleMessage`.
+  - Badges: `sap.m.BadgeCustomData` + `badgeStyle` — `Default` (counter) or `Attention` (dot), never both on one button.
+  - Fixed `width` truncates the text; otherwise the button grows with it.
+
+---
+
+## Link / Hyperlink
+
+- **OpenUI5 / SAPUI5:** `sap.m.Link`
+- **Use when:** Navigating to another page, anchor, or external URL.
+- **Do NOT use when:** Triggering an action (submit, delete, open dialog) → use `sap.m.Button` instead.
+- **Rules:**
+  - Link text must describe the destination — never "Click here" or "Link".
+  - Use subtle emphasis only inside tables for secondary links in dense data.
+  - Do not use a link with no `href` and no press handler — that is decorative and invalid.
+- **Gotchas:** Icon-only links are not supported; always pair with text.
+
+---
+
+## Toggle Button
+
+- **OpenUI5 / SAPUI5:** `sap.m.ToggleButton`
+- **Use when:** Activating or deactivating a toolbar element (e.g. show/hide panel, toggle filter) — a two-state secondary action.
+- **Do NOT use when:** Triggering a one-shot action (Create, Save, Edit) → use `sap.m.Button`. Showing many options → use a menu.
+- **Rules:**
+  - Use `type="Default"` (standard) for secondary actions; `type="Transparent"` for tertiary.
+  - Icon-only toggle buttons must have a `tooltip`.
+  - Do not change the button text or icon between toggled and untoggled — the pressed state is communicated via ARIA, not text change.
+- **Gotchas:** `pressed` is the property to read/set the toggle state programmatically. Do not swap text to indicate state — screen readers will misread it.
+
+---
+
+## Segmented Button / View Switch
+
+- **OpenUI5 / SAPUI5:** `sap.m.SegmentedButton`
+- **Use when:** Choosing one option from a small, related set visible all at once (Year/Month/Day, Small/Medium/Large — 2–5 options).
+- **Do NOT use when:** More than ~5 options → use a Select or RadioButton group. Navigation between page sections → use IconTabBar.
+- **Rules:**
+  - Use child `sap.m.SegmentedButtonItem` elements in the `items` aggregation, not generic buttons.
+  - Icon-only segments must have a `tooltip` on each item.
+- **Gotchas:** Do not use as in-page navigation — that is `sap.m.IconTabBar`. `sap.m.SegmentedButton` is single-select only. The `buttons` aggregation is **deprecated since 1.28** — use `items` (`sap.m.SegmentedButtonItem`) instead.
+
+---
+
+## Menu Button
+
+- **OpenUI5 / SAPUI5:** `sap.m.MenuButton`
+- **Use when:** A button that opens a dropdown menu of actions (no default action — clicking always opens the menu).
+- **Do NOT use when:** You only have one action → use a plain button. You need a default action + overflow → use Split Button.
+- **Rules:**
+  - Use `type="Transparent"` for menu buttons in content toolbars.
+  - `buttonMode` picks the behavior: `Regular` (default) — the whole button opens the menu, no default action; `Split` — a default-action area plus an arrow that opens the menu (see Split Button below).
+  - On phones, menus render as a full-screen dialog automatically.
+- **Gotchas:** Do not build ad-hoc menu buttons from a plain `Button` + `Menu` unless you have a specific reason — `MenuButton` is the standard control. The two modes live on one class (`sap.m.MenuButtonMode.Regular` / `.Split`); there is no separate split-button class.
+
+---
+
+## Menu
+
+- **OpenUI5 / SAPUI5:** `sap.m.Menu` / `sap.m.MenuItem`
+- **Use when:** A context menu or a dropdown of actions opened from a control or a right-click — the standalone menu behind a `MenuButton`, a toolbar overflow, or a table row context menu.
+- **Do NOT use when:** A button should open the menu → wrap it in `sap.m.MenuButton` rather than wiring a plain `Button` to `openBy`. In-page section navigation → `sap.m.IconTabBar`. Picking one value from a list → `sap.m.Select`.
+- **Rules:**
+  - Put `sap.m.MenuItem` entries (nestable for submenus) in the `items` aggregation; handle `itemSelected` for the chosen action.
+  - Open it with `openBy(oControl)`; it is not placed in the view like a static control.
+  - Keep labels to short imperative verbs, same as button text.
+- **Gotchas:** On phones the menu renders full-screen automatically. `sap.m.Menu` (`sap.m` application menu) is not `sap.ui.unified.Menu` — prefer the `sap.m` one in responsive apps.
+
+---
+
+## Split Button / Default Action + Menu
+
+- **OpenUI5 / SAPUI5:** `sap.m.MenuButton` (with `buttonMode="Split"`)
+- **Use when:** One default action (left area) plus a menu of additional actions (arrow area), and the default is used most often.
+- **Do NOT use when:** All actions are equally weighted → use a Menu Button. Only one action exists → use a plain Button.
+- **Rules:**
+  - Default action uses the main button area; additional actions live in the menu.
+  - Both areas share the same button type — they cannot be styled independently.
+  - Use `type="Transparent"` in content toolbars.
+  - `useDefaultActionOnly="true"` → the button always fires the app-defined default (first item if none). `false` (default) → it fires the user's last chosen action and the text changes to match.
+  - If the default action is icon-only, every menu item needs an icon.
+- **Gotchas:** The split button is `sap.m.MenuButton` with `buttonMode` set to `sap.m.MenuButtonMode.Split` — it is not a separate class. Max width 12rem; longer text truncates.
+
+---
+
+## Table Toolbar
+
+- **OpenUI5 / SAPUI5:** `sap.m.OverflowToolbar` (in the table's `headerToolbar` / `extension`)
+- **Use when:** The table needs a title, actions, view controls, search, or variant management placed above it.
+- **Do NOT use when:** The table is used for selection only; all meaningful actions are row-level only.
+- **Rules:**
+  - Follow the predefined action group order: Finalizing → Business → Modification → Personalization → Share → Export → View → End slot.
+  - *Create*, *Delete*, *Add*, *Remove* must never move into the overflow menu.
+  - Do not show a Search field in the toolbar when a Filter Bar is present on the same page.
+  - Emphasize the finalizing action only if the page has no other primary action. Otherwise give the most important button `type="Ghost"`; use `type="Transparent"` for the rest.
+  - Variant Management replaces the title in most cases — do not show both unless necessary (insert a separator between them if you do).
+- **Gotchas:** `sap.m.OverflowToolbar` handles responsive overflow automatically. If you use a plain `sap.m.Toolbar`, items do not overflow — critical actions may become invisible on small screens.
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-ai.md b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-ai.md
new file mode 100644
index 0000000..31de7b8
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-ai.md
@@ -0,0 +1,136 @@
+# UI AI Components
+
+## Contents
+- [AI Button](#ai-button)
+- [AI Acknowledgment](#ai-acknowledgment)
+- [AI Writing Assistant](#ai-writing-assistant)
+- [Quick Prompts](#quick-prompts)
+- [Guided Prompts](#guided-prompts)
+- [Regenerate](#regenerate)
+- [Local AI Notice](#local-ai-notice)
+- [Home Page Banner](#home-page-banner)
+
+---
+
+## AI Button
+
+- **OpenUI5 / SAPUI5:** none (pattern built on `sap.m.Button` / `sap.m.MenuButton`, with `buttonMode="Split"` for the split variant)
+- **Use when:** Triggering one or more AI-powered actions from a toolbar, form, or detail area.
+- **Do NOT use when:** The action is not AI-powered → use a regular `sap.m.Button`.
+- **Rules:**
+ - Always use the sparkles icon (`sap-icon://ai`, no other icon); icon is leading only.
+ - Use `type="Default"` (secondary) by default; `type="Emphasized"` only when the AI action is the primary action of the page.
+ - Do not include "AI" in the button label (not "Generate with AI" — just "Generate").
+ - Three variants: simple button (single action), menu button (multiple actions via dropdown), split button (main action + dropdown alternatives).
+ - While generating: change button to "Stop Generating" to let users cancel at any time.
+- **Gotchas:** There is no dedicated `sap.m.AIButton` class — compose with `sap.m.Button` or `sap.m.MenuButton` following the AI button pattern guidelines (sparkles icon, standard button types). Embedded AI uses SAP blue — no purple or Joule gradient; that is reserved for Joule.
+
+---
+
+## AI Acknowledgment
+
+- **OpenUI5 / SAPUI5:** composed pattern — `sap.m.MessageBox` (dialog type)
+- **Use when:** Onboarding a user to an application that contains AI features for the first time — especially in high-stakes scenarios (financial forecasting, contract recommendations, HR insights, customer communications).
+- **Do NOT use when:** Notifying about failed/successful AI processes → use messaging patterns; sending marketing information about AI; displaying general system information.
+- **Rules:**
+ - Display on first launch of an AI-enabled application; re-display when significant new AI capabilities are added.
+ - Use the standard disclaimer text: "Artificial Intelligence (AI) generates results based on multiple sources. Outputs may contain errors and inaccuracies. Consider reviewing all generated results and adjust as necessary."
+ - Provide a "Don't show me again" checkbox to suppress future instances; always offer a way for users to retrieve the information again.
+ - Footer buttons: informational-only → "Close"; with opt-out → "OK" + checkbox; acknowledgment required → "Accept" + "Dismiss" + checkbox.
+ - Use clear plain language — no legal jargon.
+- **Gotchas:** This is a UX pattern, not a standalone control. Low-stakes scenarios (entertainment, generic greetings) may omit the acknowledgment entirely.
+
+---
+
+## AI Writing Assistant
+
+- **OpenUI5 / SAPUI5:** composed pattern
+- **Use when:** Adding AI-assisted text generation, rewriting, or refinement to an input field, text area, or rich text editor.
+- **Do NOT use when:** The task is not text editing; using alongside the standalone quick-prompts button/menu on the same field; pre-populated fields with confident AI recommendations; context or data is insufficient for quality results.
+- **Rules:**
+ - Embed the AI icon menu button within the input/textarea component — do not place it in a toolbar outside the field.
+ - Always include a "Stop Generating" control visible during generation.
+ - Versioning appears only when a prompt is applied to a populated field or more than one prompt is applied to the same field.
+ - Standard error message: "Something went wrong while generating your content. Please try again."
+ - Pair with the Local AI Notice (see below) to disclose AI involvement.
+ - Only enable on fields where AI adds measurable value — coordinate with the product team on prompt count limits (cost and sustainability).
+- **Gotchas:** There is no dedicated control. `Make Bulleted List` and `Adjust Length` prompts are not appropriate for single-line inputs.
+
+---
+
+## Quick Prompts
+
+- **OpenUI5 / SAPUI5:** composed pattern
+- **Use when:** Tasks are repetitive or common within a workflow; the system supports only a specific set of actions; consistent and predictable output is needed.
+- **Do NOT use when:** User intent is unpredictable; users need free-form control over the output; used alongside the AI writing assistant on the same field; applied to multiple fields in a form (use form-level actions instead).
+- **Rules:**
+ - Use a single `sap.m.Button` for one quick prompt; use a `sap.m.MenuButton` for multiple.
+ - Always identify quick prompts with the sparkles (AI) icon.
+ - Use standard action labels: Generate, Revise, Regenerate, Fix Spelling and Grammar, Summarize, Paraphrase, Make Bulleted List, Explain Content, Rewrite Text, Change Tone, Adjust Length, Translate.
+ - Ensure users can complete the task without quick prompts — AI must always be optional.
+ - Primary (Emphasized) button only when the quick prompt is the sole primary action on the page.
+- **Gotchas:** There is no dedicated control. During generation, primary actions should be temporarily disabled to prevent interaction with partially generated content.
+
+---
+
+## Guided Prompts
+
+- **OpenUI5 / SAPUI5:** composed pattern
+- **Use when:** Users need to specify parameters (language, tone, length, type) to guide AI output; users lack prompt-writing experience; consistent and controlled output is required.
+- **Do NOT use when:** Users need full free-form flexibility → use custom prompts; tasks are repetitive/single-action → use quick prompts; user intent is uncertain → use custom prompts.
+- **Rules:**
+ - Always use an explicit confirmation action (AI button) to trigger generation — never auto-trigger on input change.
+ - Always include a cancel option so users can exit without committing.
+ - Standard trigger labels: "Compose Text" (initial generation), "Revise" (editing).
+ - Choose input components suited to the parameter type (select for language, range slider for length) — don't default everything to dropdowns.
+ - Standard error message: "Something went wrong while generating your content. Please try again."
+- **Gotchas:** There is no dedicated control. This is a pattern assembled from existing components. The dialog must prevent automatic regeneration — user confirmation is always required to avoid unintended content replacement.
+
+---
+
+## Regenerate
+
+- **OpenUI5 / SAPUI5:** composed pattern
+- **Use when:** Re-running or refining a previously generated AI result for a specific content element.
+- **Do NOT use when:** The function is not AI-powered → use a regular button.
+- **Rules:**
+ - Always use buttons with both icon and label — never icon-only for Regenerate.
+ - Only use the sparkles icon — no alternative icons on the Regenerate button.
+ - Label "Regenerate" is the default; use more descriptive wording only when the outcome is not obvious from context.
+ - Warn users before overwriting existing content: "Regenerating will overwrite all fields with AI-generated content. Do you want to continue?"
+ - In mixed forms, regenerate only AI-generated fields — preserve user-entered content.
+ - In most cases, Regenerate replaces the Generate button in the same position once initial content exists.
+- **Gotchas:** There is no dedicated control. Versioning is only supported inside the AI writing assistant experience — outside it, always show the overwrite warning dialog. Do not place Regenerate as a primary action in page footer bars.
+
+---
+
+## Local AI Notice
+
+- **OpenUI5 / SAPUI5:** composed — `sap.m.Link` or `sap.m.Label` (freestyle) · **SAPUI5:** `sap.fe.macros.AINotice` building block (since 1.145; `sap.fe.macros.table.ColumnAINotice` for table columns) in SAP Fiori elements
+- **Use when:** Any UI surface displays AI-generated or AI-edited content — this pattern is mandatory.
+- **Do NOT use when:** Marking non-AI content; any purpose other than disclosing AI-generated content.
+- **Rules:**
+ - Mandatory per [EU AI Act Article 50](https://artificialintelligenceact.eu/article/50/) and SAP AI Ethics Policy — no exceptions for production UIs.
+ - Standard text: "Created with AI. Verify before use." (short form for limited space: "Created with AI.")
+ - Use the interactive variant (link → popover → SAP Help Portal) for high and very high impact scenarios.
+ - Use the read-only label variant only when no further AI result details can be provided.
+ - Limit to one AI notice label per screen; place it next to the lowest hierarchical title that contains all AI results.
+ - High-impact placement: above content area (between section header and content). Low-impact: footer of the AI results area.
+ - Never truncate the notice — always fully readable; use breakpoints to switch between standard and short variants.
+- **Gotchas:** There is no dedicated `sap.m` control. The guideline says the notice is not available in SAP Fiori elements, but SAPUI5 1.145+ ships `sap.fe.macros.AINotice` (renders a link when `popoverContent` is set, otherwise a label) — use it in Fiori elements V4 apps on 1.145+; compose Link/Label everywhere else. Use standard link/label styling (SAP blue) — not the `--sapAssistant_*` Joule colors; see `references/theming-tokens.md`.
+
+---
+
+## Home Page Banner
+
+- **OpenUI5 / SAPUI5:** `sap.f.HeroBanner` — experimental since 1.152 (wraps a Web Component); the guideline itself still calls the implementation "in progress"
+- **Use when:** Any product home page that is part of SAP Business Suite — will be mandatory for S/4HANA Cloud Public Edition ERP and SuccessFactors.
+- **Do NOT use when:** Not a SAP Business Suite home page context.
+- **Rules:**
+ - Mandatory elements: banner, personalized salutation ("Hello, \<First Name>"), background image (gradient, image, or none), background color.
+ - Optional: current date (full format: "Weekday, Month DD, YYYY", above the salutation), content area, action area.
+ - Banner must scroll out of view — never sticky.
+ - Action area: secondary buttons only (no Emphasized/Transparent primary); show/hide per role.
+ - Content area items must be enclosed in cards to ensure proper color contrast.
+ - Min height 5.75rem; max recommended height 24rem.
+- **Gotchas:** Implementation is still in progress upstream — do not treat this component as stable for general use. Check SAP Business Suite product team guidance before implementing. `sap.f.HeroBanner` is experimental — its API may change.
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-containers.md b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-containers.md
new file mode 100644
index 0000000..ed96fe3
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-containers.md
@@ -0,0 +1,215 @@
+# UI Containers
+
+## Contents
+- [Card (Basic)](#card-basic)
+- [Card (Integration)](#card-integration)
+- [Panel](#panel)
+- [Wizard](#wizard)
+- [Dialog](#dialog)
+- [Popover](#popover)
+- [ResponsivePopover](#responsivepopover)
+- [QuickView](#quickview)
+- [ColorPalettePopover](#colorpalettepopover)
+- [Filter Bar](#filter-bar)
+- [Notification Center](#notification-center)
+- [P13n Dialog Popup](#p13n-dialog-popup)
+- [VariantManagement](#variantmanagement)
+- [ValueHelpDialog](#valuehelpdiag)
+
+Shell Bar and User Menu live in `ui-navigation.md`; Table Toolbar lives in `ui-actions.md`; page and app layouts (Dynamic Page, Flexible Column Layout, App) live in `ui-layouts.md`.
+
+---
+
+## Card (Basic)
+
+- **OpenUI5 / SAPUI5:** `sap.f.Card`
+- **Use when:** Showing a self-contained unit of information (header + content) in a layout alongside other cards — dashboard widgets, KPI snapshots, previews.
+- **Do NOT use when:** Representing an app on the SAP Fiori launchpad home page → `sap.m.GenericTile`. You need a header toolbar → `sap.m.Panel` or a table. You need cross-host embedding or manifest-driven card types (List, Table, Analytical, Timeline, Calendar) → use Integration Card instead.
+- **Rules:**
+ - Always set a header (`sap.f.cards.Header`) with a `title` — it gives the card its accessible name.
+ - Put the title in the `header` aggregation; do not put it as plain text in `content`.
+ - Numeric KPIs belong in `sap.f.cards.NumericHeader`, not in the content area as plain text.
+ - Do not nest cards.
+- **Gotchas:** `sap.f.Card` is a simple container. Manifest-driven card types (List, Table, Analytical, Timeline, Calendar, Object, Component) use `sap.ui.integration.widgets.Card`. Annotation-based cards are Overview Page (OVP) cards in SAP Fiori elements — a different technology.
+
+---
+
+## Card (Integration)
+
+- **OpenUI5 / SAPUI5:** `sap.ui.integration.widgets.Card`
+- **Use when:** Embedding app content across host environments (SAP Fiori launchpad, third-party portals, mobile); need manifest-driven card types (List, Table, Analytical, Timeline, Calendar, Object, Component).
+- **Do NOT use when:** You just need a styled container with a header in a single app → use `sap.f.Card` (basic) instead.
+- **Rules:**
+ - Card manifest JSON drives the content type; do not hand-build card content as free HTML inside an integration card.
+ - The card header is clickable by default and navigates to the underlying source — always provide a meaningful navigation target.
+ - Numeric header: always supply `unitOfMeasurement` via the dedicated property, not free text in the subtitle.
+ - Counter in the header (e.g. "6 of 12") is automatic when the content contains multiple items — do not add a custom counter label.
+- **Gotchas:** Integration cards load via a card manifest (descriptor JSON), not via control properties. The host environment controls container sizing; the card adapts — do not set fixed widths on integration cards.
+
+---
+
+## Panel
+
+- **OpenUI5 / SAPUI5:** `sap.m.Panel`
+- **Use when:** Grouping related form fields or content in a section, optionally collapsible.
+- **Do NOT use when:** You need a compact preview in a card layout and no header toolbar → use `sap.f.Card`; you need a modal overlay → use Dialog; you are designing an Object Page — never use panels in the Object Page content area. Do not nest panels and avoid stacking many panels on one page.
+- **Rules:**
+ - `expandable="false"` (default) renders the panel always expanded — set `expandable="true"` to get the expand/collapse toggle.
+ - `headerToolbar` overrides `headerText` — use one or the other, not both.
+ - For non-form content, change `accessibleRole` from the default `Form` to `Region` or `Complementary`.
+ - `stickyHeader="true"` keeps the header visible while scrolling (forces a solid background).
+ - The `expand` event fires **before** the panel expands or collapses; use its `triggeredByInteraction` parameter to tell user interaction apart from a programmatic `setExpanded()` call.
+- **Gotchas:** A fixed `height` is kept even when the panel is collapsed, so a collapsed panel renders as an empty fixed-height box. Keep `height="auto"` (default) so the content area resizes.
+
+---
+
+## Wizard
+
+- **OpenUI5 / SAPUI5:** `sap.m.Wizard` / `sap.m.WizardStep`
+- **Use when:** Guiding users through a long or unfamiliar sequential process where each step must be completed before advancing — onboarding, guided configuration, complex object creation. Can also be placed in a modal dialog when the wizard is closely tied to the triggering page.
+- **Do NOT use when:** 2 or fewer steps → use a Dialog with Next/Back buttons; more than 8 steps → restructure the task; steps are independent and can be done in any order → use `sap.uxap.ObjectPageLayout` with sections; the task is routine or familiar to the user.
+- **Rules:**
+ - Use 3 to 8 steps — the control logs an error outside this range.
+ - For branching flows, set `enableBranching="true"` and call `WizardStep#setNextStep()`; changing `subsequentSteps` at runtime is **not supported**.
+ - Inserting steps at runtime is **not supported** — define all `sap.m.WizardStep` instances in the `steps` aggregation upfront.
+ - After the last step, lead users to a review/summary page before final submission; do not override `finishButtonText` without reason.
+ - Always offer Cancel in the footer, with a data-loss warning if fields were changed. For long forms, add "Save as Draft".
+ - Place it in a `sap.m.Page` with `enableScrolling="false"` — the Wizard handles its own scrolling.
+ - Inside `sap.f.DynamicPage`, pick one of two setups, never both: the guideline sets the Wizard to `height="auto"` (the default `100%` can cause a scrollbar issue) so the page scrolls; the `sap.m.Wizard` API keeps `height="100%"`, sets `fitContent="true"` on the DynamicPage so the Wizard handles scrolling, and adds the `sapUiNoContentPadding` CSS class to the DynamicPage.
+ - Use `renderMode="Page"` for mobile-optimized rendering that shows one step at a time.
+- **Gotchas:** Setting `currentStep` to step C in a path A → B → C → D activates A, B, and C; D stays unvisited. When a Wizard inside a Dialog is closed and reopened, it resets to the first step — call `setCurrentStep()` before reopening to restore the user's position.
+
+---
+
+## Dialog
+
+- **OpenUI5 / SAPUI5:** `sap.m.Dialog`
+- **Use when:** The action is modal — user must respond before continuing (confirmation, form requiring input, destructive action).
+- **Do NOT use when:** The message is informational only and non-blocking → use `sap.m.MessageStrip`; for a plain semantic error/warning/success/confirm dialog → use `sap.m.MessageBox`; for contextual detail beside an element → use Popover.
+- **Rules:**
+ - One emphasized button per dialog maximum; all other actions are Default/Transparent.
+ - Do not nest dialogs — each dialog must be a separate element in the markup.
+ - Use `state="Error"` / `state="Warning"` on a custom `sap.m.Dialog` that reports an error or warning; this sets `role="alertdialog"` automatically.
+ - On phone, set `stretch` to `true` for full-screen display.
+ - For plain semantic error/warning/confirm dialogs, prefer `sap.m.MessageBox` over a hand-built Dialog.
+- **Gotchas:** `sap.m.Dialog` is always modal. `draggable` and `resizable` only work on desktop. Setting `initialFocus` has no effect if the target element has `autofocus`.
+
+---
+
+## Popover
+
+- **OpenUI5 / SAPUI5:** `sap.m.Popover`
+- **Use when:** Non-modal contextual content anchored to a trigger — detail without leaving the page, lightweight preview, non-disruptive actions.
+- **Do NOT use when:** User input or confirmation is required (modal context) → use Dialog; content is an object preview following a standard structure → use QuickView; the content takes more than one-third of phone screen → use ResponsivePopover.
+- **Rules:**
+ - Popover is non-modal by default — background stays interactive; set `modal` only when click-outside-to-close must be suppressed.
+ - Closing must always be possible: click outside, re-click trigger, or an action inside.
+ - `sap.m.Popover` does not switch to full screen on phones — use `sap.m.ResponsivePopover` for phone support.
+- **Gotchas:** `resizable` only works on desktop.
+
+---
+
+## ResponsivePopover
+
+- **OpenUI5 / SAPUI5:** `sap.m.ResponsivePopover` — API-based, no guideline page
+- **Use when:** You need popover behavior on desktop/tablet but full-screen dialog on phone — i.e. when the content must be fully accessible on all device sizes.
+- **Do NOT use when:** Phone behavior is irrelevant (desktop-only app) → plain Popover suffices; content requires confirmed modal interaction → use Dialog.
+- **Rules:**
+ - Treat this as the default overlay choice for any content that must work across all breakpoints.
+ - All Dialog and Popover aggregation and property rules apply (`customHeader`, `beginButton` / `endButton`, `content`).
+- **Gotchas:** On phone it acts as a Dialog (modal, full screen); on tablet/desktop it acts as a Popover. The `modal` property only takes effect on tablet/desktop.
+
+---
+
+## QuickView
+
+- **OpenUI5 / SAPUI5:** `sap.m.QuickView`
+- **Use when:** Standardized object-preview card anchored to a trigger (contact details, business object summary) following the Fiori QuickView pattern.
+- **Do NOT use when:** The structure does not fit the QuickView pattern (groups of label/value pairs with optional navigation) → use a custom Popover; the content is object detail that should live in an Object Page → navigate there instead.
+- **Rules:**
+ - Use `sap.m.QuickViewGroup` / `sap.m.QuickViewGroupElement` for the content structure — do not put arbitrary layouts inside.
+ - QuickView supports back-navigation for multi-page scenarios; do not replicate this with manual Popover navigation flows.
+- **Gotchas:** Do not hand-build a custom popover layout when `sap.m.QuickView` fits — it encodes the standard object-preview structure (header, icons, links). `QuickViewPage.fallbackIcon` is deprecated since 1.92 — put an `sap.m.Avatar` in the `avatar` aggregation and set its `fallbackIcon`.
+
+---
+
+## ColorPalettePopover
+
+- **OpenUI5 / SAPUI5:** `sap.m.ColorPalettePopover` (since 1.54)
+- **Use when:** Letting the user pick one color from a small curated palette anchored to a trigger (e.g. a toolbar color button).
+- **Do NOT use when:** The user must enter an arbitrary color (hex/RGB/HSL) → use `sap.ui.unified.ColorPicker` (optionally via the popover's "Default Color" / "More Colors" entry); a full always-visible swatch grid is wanted inline → use `sap.m.ColorPalette`.
+- **Rules:**
+ - Open it from its trigger with `openBy(oControl)` — it is not placed in the view like a static control.
+ - Handle the `colorSelect` event to read the chosen color (`getParameter("value")`). Preselect a swatch with `selectedColor` (since 1.122); `defaultColor` is the value returned when the user presses the "Default Color" button — it does not preselect anything.
+ - Keep the palette to the curated set; `showMoreColorsButton` defaults to `true` — set it to `false` unless free color choice is genuinely needed.
+- **Gotchas:** `sap.m.ColorPalettePopover` is the popover wrapper; `sap.m.ColorPalette` is the embeddable grid. The popover has no `content` aggregation — you cannot put arbitrary controls inside it.
+
+---
+
+## Filter Bar
+
+- **OpenUI5 / SAPUI5:** `sap.ui.mdc.FilterBar` (V4/MDC) · **SAPUI5:** `sap.ui.comp.filterbar.FilterBar` (V2/SmartFilterBar)
+- **Use when:** Part of a List Report, Analytical List Page, or Overview Page floorplan to let users narrow data loaded into the main table.
+- **Do NOT use when:** Table is inside an Object Page section → use ViewSettings dialog; in a Wizard; in a simple list → use Search only.
+- **Rules:**
+ - Prefer **live update mode** unless data volume is very high or multiple filters must be set before any results are meaningful.
+ - Always define a *Basic* group of mandatory and frequently used filters to ship with the app.
+ - Mandatory filters (asterisk) must have values before search returns results — preset them to prevent errors on page load.
+ - Use the simplest selection control that fits: Select for short fixed lists, ComboBox for longer/type-ahead, DatePicker for dates, Value Help only as a last resort.
+ - Do not show a Search field in the Table Toolbar when a Filter Bar is present — the Filter Bar's basic search field covers this.
+- **Gotchas:** In Fiori Elements (V4), the Filter Bar is annotation-driven via `sap.ui.mdc.FilterBar` — do not hand-build it. The SmartFilterBar (`sap.ui.comp.filterbar.FilterBar`) is maintained but no longer enhanced; prefer MDC for new V4 apps.
+
+---
+
+## Notification Center
+
+- **OpenUI5 / SAPUI5:** `sap.m.NotificationListItem` / `sap.m.NotificationListGroup` / `sap.m.NotificationList` (within a `sap.m.Popover`) — **all deprecated since 1.153**, replaced by the UI5 Web Components notifications (integrate via `ui5-tooling-modules`). API-based; the guideline page lists no SAPUI5 implementation.
+- **Use when:** Surfacing real-time, event-driven alerts in the Shell Bar notification panel (bell icon).
+- **Do NOT use when:** Inline page feedback is needed → use MessageStrip; a brief confirmation is needed → use MessageToast; the message is part of the current flow → use MessagePopover.
+- **Rules:**
+ - Notifications are one-way and cannot be retracted — content must be accurate at creation time.
+ - Group similar event types to avoid flooding — individual low-priority notifications should be grouped.
+ - Each notification must be clear on purpose, brief, and action-oriented.
+ - Sort by date (default) or importance; do not add other sort options.
+ - The bell counter shows new notifications since last panel open; clicking the bell resets it to zero.
+- **Gotchas:** Notifications in the shell are typically hosted in a `sap.m.Popover` triggered from the ShellBar bell (`notificationsPressed`). The `sap.m` notification classes no longer follow design updates — for new UIs on 1.153+, use the Web Components notifications instead. Inside the SAP Fiori launchpad, the launchpad provides notifications.
+
+---
+
+## P13n Dialog Popup
+
+- **OpenUI5 / SAPUI5:** `sap.m.p13n.Popup`
+- **Use when:** Users need to personalize a table or Smart Chart with 20+ columns, or need multiple personalization dimensions simultaneously (Columns + Sort + Filter + Group).
+- **Do NOT use when:** Fewer than ~20 columns: sort/filter/group only → `sap.m.ViewSettingsDialog`; show/hide or rearrange columns → `sap.m.p13n.Popup` with only a `sap.m.p13n.SelectionPanel`, registered through `sap.m.p13n.Engine` (ViewSettingsDialog can't rearrange columns; the guideline's Table Personalization Dialog, `sap.m.TablePersoDialog`, is deprecated since 1.115). If a Filter Bar is present, disable the P13n Filter tab (use the Filter Bar instead).
+- **Rules:**
+ - Tabs can be shown in any combination (Sort, Filter, Columns, Group, Chart) — include only those relevant to the use case.
+ - Columns tab: only columns marked visible can be used for grouping.
+ - Sort tab: if column-header sort is also enabled, it replaces ALL sort options set in the dialog.
+ - New P13n panels from SmartTable (Columns, Sort, Group) are available for freestyle development.
+- **Gotchas:** `sap.m.p13n.Popup` is opened from toolbar actions — it is not self-opening. When falling back to `sap.m.ViewSettingsDialog` for simpler cases, read and write selected filters with `getSelectedFilterCompoundKeys` / `setSelectedFilterCompoundKeys` — `getSelectedFilterKeys` / `setSelectedFilterKeys` are **deprecated since 1.42** and cannot represent two filter items with the same key.
+
+---
+
+## VariantManagement
+
+- **OpenUI5 / SAPUI5:** `sap.m.VariantManagement` / `sap.ui.fl.variants.VariantManagement`
+- **Use when:** Users need to save, load, and switch between named sets of table/filter-bar settings (column layout, sort, filter, group).
+- **Do NOT use when:** No personalization persistence is needed; only a static title is required.
+- **Rules:**
+ - In tables: VariantManagement replaces the table title — do not show both unless unavoidable.
+ - In Filter Bars: VariantManagement stores filter values, visible filters, and filter order — this is the "Views" selector at the top of the Filter Bar.
+ - Use `sap.ui.fl.variants.VariantManagement` for SAPUI5 Flexibility-backed persistence (recommended for Fiori Elements and freestyle apps with key user adaptation support).
+- **Gotchas:** `sap.ui.fl.variants.VariantManagement` requires flexibility services — in pure OpenUI5 apps without flexibility, variant persistence must be custom-built or omitted. The guideline page still names `sap.ui.comp.variants.VariantManagement` — that class is **deprecated since 1.120** (SAPUI5-only); use `sap.m.VariantManagement`.
+
+---
+
+## ValueHelpDialog {#valuehelpdiag}
+
+- **SAPUI5:** `sap.ui.comp.valuehelpdialog.ValueHelpDialog` (V2) · **OpenUI5 / SAPUI5:** `sap.ui.mdc.ValueHelp` (V4)
+- **Use when:** Users need to select single or multiple values from a complex source (search + table + token management in one dialog) — especially for filter fields with large data sets.
+- **Do NOT use when:** The list is short and fixed → use Select or ComboBox; for date selection → use DatePicker; for free text → use Input with suggestions. Value Help is a last resort — choose simpler controls first.
+- **Rules:**
+ - In Fiori Elements (V4), Value Help is driven by `@sap.ui.mdc.ValueHelp` annotations — do not hand-build a ValueHelpDialog in Elements apps.
+ - Use `sap.ui.mdc.ValueHelp` for all new V4/MDC freestyle apps; `sap.ui.comp.valuehelpdialog.ValueHelpDialog` is V2/legacy.
+ - Always enable the search field inside the dialog when the data source is large.
+- **Gotchas:** The Value Help Dialog is also related to the Filter Bar's "Adapt Filters" flow when using SmartFilterBar — do not confuse the two entry points.
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-display.md b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-display.md
new file mode 100644
index 0000000..06f18c1
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-display.md
@@ -0,0 +1,208 @@
+# UI Display Components
+
+## Contents
+- [Avatar](#avatar)
+- [Avatar Group](#avatar-group)
+- [Progress Indicator](#progress-indicator)
+- [Busy Indicator](#busy-indicator)
+- [Illustrated Message](#illustrated-message)
+- [Carousel](#carousel)
+- [Tag / status chip](#tag--status-chip)
+- [Generic Tag](#generic-tag)
+- [Expandable Text](#expandable-text)
+- [Image](#image)
+- [Draft Indicator](#draft-indicator)
+- [Rating Indicator](#rating-indicator)
+- [Token / Tokenizer](#token--tokenizer)
+
+`sap.m.Text`, `sap.m.Title`, and `sap.m.Label` have no entries of their own: use Text for body text, Title for headings (including table and section titles — not Label), and pair every input with a Label.
+
+---
+
+## Avatar
+
+- **OpenUI5 / SAPUI5:** `sap.m.Avatar`
+- **Use when:** Representing a person (photo/initials/placeholder), a product, or a business object visually in a list, card, or header.
+- **Do NOT use when:** Displaying a sequence of images → use `sap.m.Carousel`; triggering an action on an icon → use `sap.m.Button` with an icon.
+- **Rules:**
+  - Circle shape for people; square shape for products/business objects.
+  - Use predefined sizes (XS/S/M/L/XL) — no ad-hoc pixel sizes.
+  - Interactive avatars require both a tooltip and accessible name.
+  - Decorative-only avatars: set decorative mode so they are ignored by assistive technology.
+  - Avoid badges on avatars smaller than size S.
+- **Gotchas:** An avatar becomes interactive only when a `press` handler is attached; `active` just shows the pressed state. `backgroundColor` defaults to `Accent6`, not a random color — set `Accent1`–`Accent10`, `Random`, or `Placeholder` explicitly when you need a specific look.
+
+---
+
+## Avatar Group
+
+- **OpenUI5 / SAPUI5:** `sap.f.AvatarGroup`
+- **Use when:** Showing 2+ people or entities that share something (team, project, assignment).
+- **Do NOT use when:** Displaying a single avatar, a gallery of unrelated images (use `sap.m.Carousel`), or non-avatar visual content.
+- **Rules:**
+  - Always display horizontally; minimum 2 avatars.
+  - `groupType="Group"` (default) — overlapping, one click target; use for large groups or when identity of individuals is secondary.
+  - `groupType="Individual"` — side-by-side, per-avatar click; use for small teams where users need to access individual profiles.
+  - Always provide an accessible name on the group.
+  - Overflow popover must show at minimum a full list of overflowed avatars; for >100 overflow navigate to a dedicated page.
+- **Gotchas:** Square-shaped child avatars create visual inconsistency because the built-in overflow button is always a circle — use circle avatars inside `sap.f.AvatarGroup`.
+
+---
+
+## Progress Indicator
+
+- **OpenUI5 / SAPUI5:** `sap.m.ProgressIndicator`
+- **Use when:** Showing an object's current status as a level of completion — a "meter" or micro chart (budget consumed, profile completeness) — or comparing a few such values at a glance.
+- **Do NOT use when:** Giving feedback on a running or ongoing operation (upload, save, processing) → `sap.m.BusyIndicator`; progress is unknown or can't be measured → `sap.m.BusyIndicator`; conveying status without a numeric value → use `sap.m.ObjectStatus`.
+- **Rules:**
+  - Set `percentValue` (0–100); values >100 are clamped to 100.
+  - Use `state` (`Success`, `Warning`, `Error`, `Information`, `None`) to convey meaning semantically, not just visually.
+  - Use `displayValue` to override the label text when showing something other than the raw percentage (e.g., "120 of 200 hours").
+  - Hide the display value only when the percentage is visually obvious from the surrounding context.
+  - Set `displayAnimation="false"` — the guideline says not to use the animation, but it defaults to `true`.
+- **Gotchas:** Size is controlled via CSS `width`/`height` — there are no predefined size props beyond the control API.
+
+---
+
+## Busy Indicator
+
+- **OpenUI5 / SAPUI5:** `sap.m.BusyIndicator`
+- **Use when:** An operation is in progress and duration is unknown; only part of the UI is affected and the user can still interact with the rest.
+- **Do NOT use when:** The operation takes less than 1 second (avoid flicker); users must not use the shell either, for example during a long-running process whose result they need before continuing → use `sap.m.BusyDialog` (blocks the entire screen, including the shell bar) or a modal `sap.m.Dialog` with busy state; loading an app or page → set `busy` at app level (for example on `sap.m.App` or `sap.f.FlexibleColumnLayout`), never `sap.m.BusyDialog`; multiple concurrent operations → show one indicator, not several.
+- **Rules:**
+  - Set the control's `busy` state on the affected container, or place a `BusyIndicator` inside the area being loaded.
+  - Use `busyIndicatorDelay` (default 1000ms) to prevent flicker on fast operations.
+  - Add busy text when the operation type is non-obvious.
+- **Gotchas:** Do not show multiple busy indicators for the same operation. The Busy Dialog page allows a busy dialog for page-to-page navigation, but Busy Handling forbids it for app or page loading because it also blocks the shell bar (Sign Out, Search) — follow Busy Handling. After the metadata loads, unblock areas step by step with separate busy states (for example list and detail).
+
+---
+
+## Illustrated Message
+
+- **OpenUI5 / SAPUI5:** `sap.m.IllustratedMessage`
+- **Use when:** Showing an empty state, no-data state, error state, or success state — anywhere plain text would leave the user without visual guidance.
+- **Do NOT use when:** The state needs only a one-line message with no illustration → use `sap.m.MessageStrip`. Never substitute plain `sap.m.Text` or `sap.m.Label` for empty states.
+- **Rules:**
+  - Always place inside a container (`sap.f.Card`, `sap.m.Dialog`, page content area) — the component does not size itself.
+  - Set `illustrationType` explicitly for the correct context (e.g., `sapIllus-NoData`, `sapIllus-UnableToLoad`, `sapIllus-UnableToUpload`). Several older types are deprecated since 1.135/1.136 — e.g. `ErrorScreen` → `UnableToUpload`, `Connection` → `UnableToLoad`, `EmptyList` → `NoEntries`.
+  - Provide `title` and `description` when context-specific wording is needed.
+- **Gotchas:** `illustrationSize` defaults to `Auto` (adapts to the container). Fixed sizes are `Base`, `ExtraSmall`, `Small`, `Medium`, `Large`; the old `Dot`, `Spot`, `Dialog`, `Scene` are deprecated since 1.135 (→ `ExtraSmall`, `Small`, `Medium`, `Large`). Do not use a large illustration inside a table cell.
+
+---
+
+## Carousel
+
+- **OpenUI5 / SAPUI5:** `sap.m.Carousel`
+- **Use when:** Users browse a set of items by paging/swiping back and forth — image galleries, sequential display, or several items shown side by side.
+- **Do NOT use when:** All items need to be visible at the same time → use a grid/list layout; the items are very similar and paging adds no value; displaying a single static image → use `sap.m.Image`.
+- **Rules:**
+  - Place navigation arrows either in the content area (appear on hover) or beside the page indicator — pick one; do not show both.
+  - On touch devices, users page by swiping or by tapping the arrow buttons, which are always visible there (tap is the accessible alternative to swipe). On non-touch devices, `arrowsPlacement` decides where the arrows go.
+  - Let the page indicator follow the default: dots for fewer than 9 pages, numeric ("2 of 4") for 9 or more. Only override with reason.
+  - Keep width/height at 100% (default) so the content area adapts to available space.
+  - Set `loop` only when wrap-around from last to first page is expected behavior.
+- **Gotchas:** Arrow direction and looping automatically flip in RTL; do not hardcode direction. The page indicator wraps to multiple lines if too long to fit.
+
+---
+
+## Tag / status chip
+
+- **OpenUI5 / SAPUI5:** `sap.m.ObjectStatus` (compact semantic status in lists/tables/forms) — API-based, no SAPUI5 Tag guideline page (the class is covered by Object Display Components)
+- **Use when:** Showing complementary information about an object — status, category, quantity, or condition — in a compact form, with optional icon and/or text.
+- **Do NOT use when:** Representing entered values in an input → use tokens on `sap.m.MultiInput` / `sap.m.MultiComboBox`; showing a count on a button → use a button badge; the label is a single letter or number → tags have a minimum width and are not meant for that; a KPI or situation in a page header → use [Generic Tag](#generic-tag).
+- **Rules:**
+  - Keep text short — tags are complementary, not primary content.
+  - Use semantic value states to color-code state; use custom colors only when no semantic meaning applies.
+  - Icon-only designs: use exactly one icon.
+  - Do not overuse tags on a page — too many dilute their attention-directing purpose.
+- **Gotchas:** The `ObjectStatus` active state is for progressive disclosure (e.g. opening a popover with more detail) — do not make a tag interactive for other actions.
+
+---
+
+## Generic Tag
+
+- **OpenUI5 / SAPUI5:** `sap.m.GenericTag`
+- **Use when:** Surfacing an app-specific, essential KPI or situation about the object in a page header — typically in the title area of `sap.f.DynamicPage` or `sap.uxap.ObjectPageLayout`, or in a toolbar (e.g. "Delivery delayed", "Budget 82%").
+- **Do NOT use when:** Showing a plain status in a table cell, list item, or form → use `sap.m.ObjectStatus`; representing entered values → use tokens; showing a number on its own without a status meaning → use `sap.m.ObjectNumber`.
+- **Rules:**
+  - `text` is required and short — it renders on one line and truncates automatically.
+  - Set `status` (`sap.ui.core.ValueState`) for the semantic color of the status bar and icon; use `design="StatusIconHidden"` only when the color alone is clear from context.
+  - The `value` aggregation accepts only `sap.m.ObjectNumber` — put the number and unit there, not into `text`.
+  - Use `press` only to open a popover (or similar) with details about the KPI or situation — progressive disclosure, not a general action.
+  - Set `valueState="Error"` when the value could not be determined; the control then shows a warning icon instead of the value.
+  - Provide `ariaLabelledBy` when the text alone does not explain what the tag measures.
+- **Gotchas:** Inside an `OverflowToolbar` the Generic Tag can move to the overflow area like other toolbar content — keep the most important tags first. The error state overrides the `value` aggregation; do not clear the value to signal an error.
+
+---
+
+## Expandable Text
+
+- **OpenUI5 / SAPUI5:** `sap.m.ExpandableText`
+- **Use when:** Long text or descriptions must fit a responsive table, list, or form without dominating the layout — show a truncated preview with a "Show More" link that expands inline or in a popover.
+- **Do NOT use when:** The text sits in a grid/tree/analytical table or Gantt chart → not supported there; a short, meaningful alternative exists → use that instead; the content is critical → use a short description that fits the available space rather than hiding it behind a link.
+- **Rules:**
+  - Tune the truncation length to the use case (default: 100 characters).
+  - Choose the display mode deliberately: inline expansion, or a popover for longer content.
+  - If using popover mode, size the popover to the text length so it neither overflows nor leaves large empty space.
+  - In tables, set minimal padding so expanded rows do not gain extra whitespace.
+- **Gotchas:** On size S (phones) popover mode covers the full screen instead of floating. The "Show More" link becomes "Show Less" when expanded; both flip to the reading-direction end (right for LTR, left for RTL) automatically — do not hardcode link position.
+
+---
+
+## Image
+
+- **OpenUI5 / SAPUI5:** `sap.m.Image`
+- **Use when:** Displaying a picture, illustration, or logo that is content in its own right — product photos, attachments preview, diagrams.
+- **Do NOT use when:** Showing a person or object thumbnail → use `sap.m.Avatar`; showing a UI icon → use `sap.ui.core.Icon` with an `sap-icon://` URI; showing several images to page through → use `sap.m.Carousel`; showing an empty or error state → use `sap.m.IllustratedMessage`.
+- **Rules:**
+  - Meaningful images: set `decorative="false"` **and** a descriptive `alt`. Purely decorative images keep the default `decorative="true"`.
+  - Set only `width` or only `height` to keep the aspect ratio; setting both can distort the image.
+  - `mode="Background"` requires both `width` and `height`, otherwise the image renders with zero size.
+  - Set `densityAware="true"` only when `@1.5` / `@2` image variants really exist on the server — otherwise it causes extra failing requests.
+  - Use `lazyLoading="true"` for images below the fold or in long lists.
+  - For "click to enlarge", use the `detailBox` aggregation (`sap.m.LightBox`) instead of a custom dialog; set `ariaHasPopup` only when a `press` handler opens something.
+- **Gotchas:** `decorative` defaults to `true`, so an `alt` text alone is **ignored** — screen readers skip the image until `decorative="false"` is set. The `tap` event is deprecated; use `press`.
+
+---
+
+## Draft Indicator
+
+- **OpenUI5 / SAPUI5:** `sap.m.DraftIndicator` — API-based, no guideline page (only Draft Handling mentions it)
+- **Use when:** An object in edit mode is saved automatically as a draft and users need feedback that the draft is being saved ("Saving draft...") and was saved ("Draft saved").
+- **Do NOT use when:** The app has no draft handling — confirm explicit saves with `sap.m.MessageToast`; the app is built with Fiori elements — the draft indicator is handled by the framework; showing the editing status of an object (Draft, Locked, Unsaved) → use `sap.m.ObjectMarker`; its lifecycle status → `sap.m.ObjectStatus`.
+- **Rules:**
+  - Place it in the footer toolbar of the object page / dynamic page in edit mode, to the left of the finalizing actions.
+  - Call `showDraftSaving()` when the draft request starts, `showDraftSaved()` when it succeeds, and `clearDraftState()` when leaving edit mode.
+  - Keep the default `minDisplayTime` (1500 ms) so the state does not flicker on fast saves.
+  - On save failure, clear the indicator and show the error through the message handling (`MessagePopover` / `MessageBox`) — the indicator has no error state.
+- **Gotchas:** State changes are queued and each is shown for at least `minDisplayTime`, so a quick Saving → Saved sequence still shows both texts. The texts are provided and translated by the control — do not set custom texts.
+
+---
+
+## Rating Indicator
+
+- **OpenUI5 / SAPUI5:** `sap.m.RatingIndicator`
+- **Use when:** Collecting or displaying a star-based rating — product reviews, quality assessments, feedback forms. Also suitable for displaying averaged ratings (e.g. 3.5 stars).
+- **Do NOT use when:** Showing an object's completion level → use `sap.m.ProgressIndicator`; entering a numeric value with precise increments → use `sap.m.StepInput`; collecting binary feedback → use `sap.m.CheckBox` or `sap.m.Switch`.
+- **Rules:**
+  - Keep `maxValue` between 5 (default) and 7.
+  - Use `displayOnly="true"` in review-mode forms — it removes the control from the tab chain.
+  - Use `editable="false"` when the control should stay focusable but not changeable (e.g. for screen-reader users).
+  - `visualMode="Half"` (default) displays half-star averages; users still cannot select half values interactively.
+  - Listen to `change` (fires on the final selection) for form submission; do not rely on `liveChange`, which fires continuously while dragging.
+  - Do not use the smallest icon size for editable indicators — it is too small as a touch target.
+- **Gotchas:** The default state is **editable** — always set `editable="false"` or `displayOnly="true"` explicitly for display-only use. The two are distinct: `displayOnly` removes the control from the tab chain; `editable="false"` keeps focus but blocks changes.
+
+---
+
+## Token / Tokenizer
+
+- **OpenUI5 / SAPUI5:** `sap.m.Token` / `sap.m.Tokenizer`
+- **Use when:** Visualizing selected values as dismissible chips. `sap.m.Tokenizer` can be used standalone as a display or form control; `sap.m.Token` is used only inside `sap.m.Tokenizer` or `sap.m.MultiInput`.
+- **Do NOT use when:** You need a standalone status tag or badge → use `sap.m.ObjectStatus` or `sap.m.GenericTag`; you need a non-dismissible label → use `sap.m.Label`; users type the values → use `sap.m.MultiInput` / `sap.m.MultiComboBox`, which manage tokens for you.
+- **Rules:**
+  - Always set both `key` (identifier) and `text` (display label) on `sap.m.Token` — the key is needed for deletion and restore logic.
+  - Listen to the Tokenizer's `tokenDelete` event and remove or destroy the token yourself — the Tokenizer does **not** remove tokens after the event fires.
+  - Do not use the deprecated `tokenChange` / `tokenUpdate` events on `sap.m.Tokenizer`; use `tokenDelete`.
+  - In review-mode forms, set `displayOnly="true"` on the Tokenizer — it implies non-editable and hides the delete icons.
+- **Gotchas:** In `renderMode="Narrow"` (default), overflowing tokens collapse into an "N more" indicator that opens a `ResponsivePopover` — this is expected behavior, not a bug.
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-inputs.md b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-inputs.md
new file mode 100644
index 0000000..1248940
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-inputs.md
@@ -0,0 +1,300 @@
+# UI Inputs
+
+## Contents
+- [Input](#input)
+- [TextArea](#textarea)
+- [Select](#select)
+- [ComboBox](#combobox)
+- [MultiComboBox](#multicombobox)
+- [MultiInput](#multiinput)
+- [RadioButton](#radiobutton)
+- [CheckBox](#checkbox)
+- [Switch](#switch)
+- [DatePicker](#datepicker)
+- [DateRangeSelection](#daterangeselection)
+- [DateTimePicker](#datetimepicker)
+- [TimePicker](#timepicker)
+- [StepInput](#stepinput)
+- [MaskInput](#maskinput)
+- [SearchField](#searchfield)
+- [Slider](#slider)
+- [RangeSlider](#rangeslider)
+- [Filter Bar](#filter-bar)
+- [FacetFilter](#facetfilter)
+- [ValueHelpDialog](#valuhelpdialog)
+
+---
+
+## Input / Text Field
+
+- **OpenUI5 / SAPUI5:** `sap.m.Input`
+- **Use when:** Single-line free text, numeric, email, URL, phone, or password entry; or selecting from a large dataset (>200 items) with suggestions + value help.
+- **Do NOT use when:** Entering a date → `sap.m.DatePicker`. Entering long text → `sap.m.TextArea`. Picking from a short fixed list → `sap.m.Select`. Picking one item from 13–200 options → `sap.m.ComboBox`. Multiple values → `sap.m.MultiInput`.
+- **Rules:**
+ - Always pair with a visible `Label` — do not rely on placeholder as the only label.
+ - Set `showSuggestion="true"` and populate the `suggestionItems` aggregation to enable type-ahead; suggestions are not automatic.
+ - Show the value help icon with `showValueHelp="true"`; handle the `valueHelpRequest` event to open the dialog.
+ - Do not use `sap.m.Input` as a search field — use `sap.m.SearchField` (search button, search event, clear affordance).
+- **Gotchas:** Tabular suggestions use `suggestionColumns` / `suggestionRows`. `sap.m.Input` does not auto-validate — apps must handle `valueState` themselves.
+
+---
+
+## TextArea / Multi-line Input
+
+- **OpenUI5 / SAPUI5:** `sap.m.TextArea`
+- **Use when:** Multi-line text input — descriptions, comments, notes.
+- **Do NOT use when:** Single-line entry → `sap.m.Input`. Structured data (date, number with step) → use the dedicated picker.
+- **Rules:**
+ - Set `growing` to let the field auto-expand with content; pair with `growingMaxLines` to cap height.
+ - Set `maxLength` + `showExceededText` to display a character counter and allow controlled overflow.
+ - Always use a `Label` above or beside the control — do not use placeholder alone.
+- **Gotchas:** `rows` defines initial height but CSS `height` overrides it. `growing` and a fixed CSS `height` conflict — pick one.
+
+---
+
+## Select / Dropdown
+
+- **OpenUI5 / SAPUI5:** `sap.m.Select`
+- **Use when:** User picks exactly one item from a short, fixed list (~2–12 options) that stays hidden until opened.
+- **Do NOT use when:** Only two binary options → `sap.m.Switch`. More than ~12 options or the list can be typed → `sap.m.ComboBox`. All options should be visible at once → RadioButton group. Multi-attribute search → Input + value help.
+- **Rules:**
+ - Always define a default selection; use "(Not Selected)" text — never a blank value — for the empty option.
+ - Use `sap.ui.core.Item` children inside `sap.m.Select`; use `sap.ui.core.ListItem` when an item needs an icon or additional text.
+ - Sort options logically — most common first; alphabetical for >8 options.
+ - Avoid icon-only options in the list; use icons only when they add recognition.
+- **Gotchas:** On smartphones `sap.m.Select` opens full-screen. The dropdown max width is 600px; use `wrapItemsText` to prevent truncation for long entries.
+
+---
+
+## ComboBox / Type-ahead Select
+
+- **OpenUI5 / SAPUI5:** `sap.m.ComboBox`
+- **Use when:** Picking one item from a long list (13–200 items) where type-ahead filtering speeds selection, or when free-text entry alongside suggestions is needed.
+- **Do NOT use when:** Short fixed list (~2–12) → `sap.m.Select`. Very large dataset (>200) or multi-attribute search → Input + value help. Multiple selections → `sap.m.MultiComboBox`.
+- **Rules:**
+ - Use `sap.ui.core.Item` children with a `key` on each item; read the selection via `selectedKey`.
+ - Default filtering matches the start of each word — use `setFilterFunction` for substring or custom matching.
+ - `showClearIcon` lets users reset the field without reopening the list.
+- **Gotchas:** `value` is the displayed / typed text; `selectedKey` is the key of the selected item. Typed text that matches no item leaves `selectedKey` empty — validate on `change`.
+
+---
+
+## MultiComboBox / Multi-select with Filtering
+
+- **OpenUI5 / SAPUI5:** `sap.m.MultiComboBox`
+- **Use when:** Selecting multiple items from a list (< ~200) where type-ahead filtering and tokenized selection are needed.
+- **Do NOT use when:** Single selection → `sap.m.ComboBox`. Tokens from a very large or complex dataset → `sap.m.MultiInput` + value help. No filtering needed and list is short → CheckBox group.
+- **Rules:**
+ - Use `sap.ui.core.Item` children with a `key` on each item; use `selectedKeys` to select items programmatically.
+ - `showSelectAll` adds a "Select All" checkbox at the top — use only when batch selection is a primary workflow.
+ - MultiComboBox only accepts values from its items — for free-text tokens use `sap.m.MultiInput`.
+- **Gotchas:** Bind either `selectedKeys` or `selectedItems`, not both — the two mechanisms conflict.
+
+---
+
+## MultiInput / Token Entry Field
+
+- **OpenUI5 / SAPUI5:** `sap.m.MultiInput`
+- **Use when:** Entering multiple free-text or suggestion-based values that appear as dismissible tokens; typically combined with a value help for large datasets (>200 items).
+- **Do NOT use when:** Picking multiple items from a managed list < ~200 → `sap.m.MultiComboBox`. Single value only → `sap.m.Input` or `sap.m.ComboBox`.
+- **Rules:**
+ - Tokens live in the `tokens` aggregation (`sap.m.Token` with `key` and `text`); listen to `tokenUpdate` to sync removed and added tokens with the model.
+ - Populate `suggestionItems` for type-ahead (`showSuggestion` is `true` by default on MultiInput); set `showValueHelp="true"` to show the value help icon.
+ - Handle `valueHelpRequest` to open the value help (`sap.ui.mdc.ValueHelp`, `sap.ui.comp.valuehelpdialog.ValueHelpDialog`, or `sap.m.SelectDialog`).
+- **Gotchas:** `sap.m.MultiInput` extends `sap.m.Input` — all Input properties apply. Typed text does not become a token on Enter unless a validator is registered with `addValidator()` (or the app creates the token in `submit`).
+
+---
+
+## RadioButton / Single Selection Visible
+
+- **OpenUI5 / SAPUI5:** `sap.m.RadioButton` / `sap.m.RadioButtonGroup`
+- **Use when:** User picks exactly one from a small set of options (≤ ~8) that should all be visible simultaneously without interaction.
+- **Do NOT use when:** More than ~8 options or options should stay hidden → `sap.m.Select` or `sap.m.ComboBox`. Multiple selections allowed → CheckBox group. Immediate on/off toggle → `sap.m.Switch`.
+- **Rules:**
+ - Prefer `sap.m.RadioButtonGroup` and read the choice via `selectedIndex`; for loose buttons, give them the same `groupName` — only one per group can be selected.
+ - Never use a standalone radio button; once selected, the user cannot deselect it.
+- **Gotchas:** A `sap.m.RadioButton` outside a group cannot be deselected once selected. `RadioButtonGroup` selects the first button by default — set `selectedIndex="-1"` only when "no selection" is a valid state.
+
+---
+
+## CheckBox / Confirmed Flag
+
+- **OpenUI5 / SAPUI5:** `sap.m.CheckBox`
+- **Use when:** A confirmed-on-save binary flag; selecting any combination from a group of independent options; a partially-selected (tri-state) parent is needed.
+- **Do NOT use when:** The change should take immediate effect → `sap.m.Switch`. Exactly one of several options must be chosen → RadioButton group.
+- **Rules:**
+ - A CheckBox change takes effect only after the user explicitly saves — this is the semantic contract that distinguishes it from Switch.
+ - Tri-state: set `partiallySelected="true"` together with `selected="true"` (there is no `indeterminate` property). It is visual only and set programmatically — users cannot reach it by clicking.
+ - Use the `text` property for the checkbox label; use an external `Label` for the group label.
+- **Gotchas:** `displayOnly="true"` makes the checkbox non-interactive and removes it from the tab chain — use for review-mode forms. Do not use `enabled="false"` when you mean read-only; use `editable="false"` or `displayOnly`.
+
+---
+
+## Switch / Immediate Toggle
+
+- **OpenUI5 / SAPUI5:** `sap.m.Switch`
+- **Use when:** A setting that takes effect immediately on toggle — no save required. Examples: enable notifications, activate dark mode.
+- **Do NOT use when:** The change requires confirmation or save → `sap.m.CheckBox`. Multiple simultaneous selections → CheckBox group. Ambiguous meaning of on/off → `sap.m.CheckBox` (clearer semantics).
+- **Rules:**
+ - Bind the boolean `state` property to the model (on/off); listen to `change` for the toggled value.
+ - Always add an external `Label` (`labelFor`) or set `ariaLabelledBy` — the switch alone conveys no context.
+ - `type="AcceptReject"` replaces text with icons (green check / red X) — use for semantic accept/reject states.
+ - Avoid text inside the switch (`customTextOn` / `customTextOff`) — it causes localization issues. If the label doesn't explain what on/off means, put a short `sap.m.Text` or `sap.m.ObjectStatus` next to the switch instead.
+- **Gotchas:** Hover states are not supported on touch devices. Provide a `tooltip` when no label is visible.
+
+---
+
+## DatePicker / Single Date
+
+- **OpenUI5 / SAPUI5:** `sap.m.DatePicker`
+- **Use when:** Selecting a single date via calendar popup or typed entry.
+- **Do NOT use when:** Date + time needed → DateTimePicker. Date range → DateRangeSelection. Always-visible calendar → `sap.ui.unified.Calendar`. Month or year only → set `displayFormat` (e.g. `MM/yyyy` or `yyyy`) so the picker opens in month or year mode.
+- **Rules:**
+ - Set `minDate` and `maxDate` (JavaScript `Date` objects) to restrict the selectable range at the source.
+ - Use `displayFormat` to set the display format and `valueFormat` to set the format of the bound `value`.
+ - On phones the picker opens full-screen automatically — do not override.
+- **Gotchas:** Special dates, custom initial focus, and footer OK/Cancel depend on the UI5 version — check the control API for your UI5 version. Always bind dates through the control API (`value` / binding) so parsing and validation stay locale-aware.
+
+---
+
+## DateRangeSelection / Date Range
+
+- **OpenUI5 / SAPUI5:** `sap.m.DateRangeSelection`
+- **Use when:** Selecting a start and end date in a single field.
+- **Do NOT use when:** Only a single date → `sap.m.DatePicker`. Start/end pickers must be independent (different pages/forms) → two separate DatePickers.
+- **Rules:**
+ - In SAPUI5, `sap.m.DateRangeSelection` extends `sap.m.DatePicker` — all DatePicker rules apply.
+ - Use `delimiter` property to configure the separator character displayed between dates.
+ - Access `dateValue` for start date and `secondDateValue` for end date.
+- **Gotchas:** Prefer `sap.m.DateRangeSelection` when a single control is needed; for independent start/end on separate forms, use two `sap.m.DatePicker` fields with cross-validation.
+
+---
+
+## DateTimePicker / Date and Time
+
+- **OpenUI5 / SAPUI5:** `sap.m.DateTimePicker`
+- **Use when:** Selecting both date and time in a single input field.
+- **Do NOT use when:** Date only → `sap.m.DatePicker`. Time only → `sap.m.TimePicker`.
+- **Rules:**
+ - In SAPUI5, popover always includes OK/Cancel buttons — the user must confirm.
+ - `minDate`/`maxDate` restrict both date and time range.
+ - Timezone display: configure via local or global timezone settings.
+- **Gotchas:** `sap.m.DateTimePicker` is **OpenUI5 / SAPUI5**. Timezone display, special dates, and minutes/seconds step configuration depend on the UI5 version — check the API reference.
+
+---
+
+## TimePicker / Time Only
+
+- **OpenUI5 / SAPUI5:** `sap.m.TimePicker`
+- **Use when:** Selecting a time (hours, minutes, seconds) without a date.
+- **Do NOT use when:** Date + time → DateTimePicker. Date only → `sap.m.DatePicker`.
+- **Rules:**
+ - Configure `displayFormat` (e.g. `HH:mm:ss`) to control display; set `valueFormat` for the bound value format.
+ - Use `minutesStep` / `secondsStep` to restrict selectable intervals.
+- **Gotchas:** The SAPUI5 `sap.m.TimePicker` opens a clock-based picker — not a scroll wheel — on desktop. On mobile it uses a touch-friendly clock.
+
+---
+
+## StepInput / Numeric with Increment/Decrement
+
+- **OpenUI5 / SAPUI5:** `sap.m.StepInput`
+- **Use when:** Adjusting a numeric quantity by a defined increment — quantities, counts, numeric settings.
+- **Do NOT use when:** Free numeric text entry without steps → plain `sap.m.Input` with `type="Number"`. Date/time input → use the dedicated pickers. Static identifier (ZIP code, phone) → `sap.m.Input`.
+- **Rules:**
+ - Set `min` and `max` to bound the range; the increment/decrement buttons auto-disable at bounds.
+ - Set `step` (default 1) and `displayValuePrecision` (decimal places) to match business requirements.
+ - Set `validationMode` (`sap.m.StepInputValidationMode`: `FocusOut` default, or `LiveChange`) to choose when the value is validated and the `change` event fires.
+ - Always label via an external `Label` — `StepInput` has no built-in label.
+- **Gotchas:** `displayValuePrecision` controls decimal display — if `step` is a float, ensure `displayValuePrecision` matches or the displayed value will be rounded unexpectedly.
+
+---
+
+## MaskInput / Fixed-format Entry
+
+- **OpenUI5 / SAPUI5:** `sap.m.MaskInput`
+- **Use when:** Entry must follow a fixed character pattern — license plate, serial number, IBAN block, product code — where each position accepts only certain characters.
+- **Do NOT use when:** Free text → `sap.m.Input`. Date/time → the dedicated pickers (they already mask and parse locale-aware). Numeric quantity with steps → `sap.m.StepInput`.
+- **Rules:**
+ - Define the pattern in `mask`: each mask character that matches a rule's symbol is an editable slot; characters with no matching rule are fixed literals. Built-in rules: `a` = letter `[A-Za-z]`, `9` = digit `[0-9]` (e.g. `"aa-9999"`); prepend the caret `^` to treat a rule symbol as a literal.
+ - Add other character classes with `sap.m.MaskInputRule` in the `rules` aggregation (each sets a `maskFormatSymbol` and a `regex`). A new rule without properties defaults to symbol `*` with `[a-zA-Z0-9]`.
+ - Set `placeholderSymbol` (single character, default `_`) to show the unfilled positions; do not add a rule for the placeholder symbol itself.
+ - Always pair with a `Label`; a mask is not a substitute for a label.
+- **Gotchas:** `sap.m.MaskInput` extends `sap.m.InputBase`, not `sap.m.Input` — it has no suggestions or value help. The `value` includes only the typed characters, not the placeholder symbols.
+
+---
+
+- **OpenUI5 / SAPUI5:** `sap.m.SearchField`
+- **Use when:** Filtering or searching a local list, table, or dataset on the current page. Cross-app / shell-level search belongs in the ShellBar.
+- **Do NOT use when:** Filtering a table with many attributes → Filter Bar. Product-wide search → `sap.f.ShellBar` with a `sap.f.SearchManager` in its `searchManager` aggregation.
+- **Rules:**
+ - Implement live search (`liveChange`) whenever possible. Use manual search (`search` event: Enter / search icon) only when the data volume would cause performance issues.
+ - Set `enableSuggestions="true"` and handle `suggest` only when suggestions add value.
+- **Gotchas:** Do not use a plain `sap.m.Input` with `type="Search"` as a drop-in for `sap.m.SearchField` — it lacks the search icon, clear affordance, and `search` event.
+
+---
+
+## Slider / Single Value Range
+
+- **OpenUI5 / SAPUI5:** `sap.m.Slider`
+- **Use when:** Selecting a single value along a continuous numeric range (volume, brightness, percentage).
+- **Do NOT use when:** Selecting a range (min + max) → `sap.m.RangeSlider`. Selecting from a fixed list of categories → RadioButton or Select. Space is very limited on mobile → prefer Input with stepper.
+- **Rules:**
+ - Set `min`, `max`, and `step` to define the range and snap intervals.
+ - Enable `showAdvancedTooltip` (with `inputsAsTooltips` for precise entry) to display the current value on the handle.
+ - Enable `enableTickmarks` and use a `sap.m.ResponsiveScale` in the `scale` aggregation to show step markers and labels.
+ - For non-numeric tick labels, provide a custom `scale` (`sap.m.IScale`).
+- **Gotchas:** Always label what the slider controls — the component has no built-in label area.
+
+---
+
+## RangeSlider / Min–Max Range
+
+- **OpenUI5 / SAPUI5:** `sap.m.RangeSlider`
+- **Use when:** Selecting a value range (start and end) — price filter, date window, size range.
+- **Do NOT use when:** Single value → `sap.m.Slider`. Exact numeric input preferred → two StepInput fields.
+- **Rules:**
+ - The `range` property (or `value` / `value2`) holds the two handle positions.
+ - Dragging the active track between handles moves the entire range at once.
+ - `showAdvancedTooltip` with `inputsAsTooltips` turns the value indicators into inline input fields for precise entry.
+ - Custom tick labels use the same `scale` aggregation as `sap.m.Slider`.
+- **Gotchas:** The two handles can swap positions when the user drags one past the other — this is intentional. Always account for `range[0] > range[1]` in your code or normalize after the `change` event.
+
+---
+
+## Filter Bar / Smart Filtering
+
+- **SAPUI5:** `sap.ui.comp.smartfilterbar.SmartFilterBar` (V2) · **OpenUI5 / SAPUI5:** `sap.ui.mdc.FilterBar` (V4)
+- **Use when:** The List Report, Analytical List Page, or Overview Page floorplan needs a collapsible filter area above a table or chart. The Filter Bar binds directly to OData metadata and manages filter state, "Go" / "Adapt Filters" buttons.
+- **Do NOT use when:** A table in an object page section → the filter in `sap.m.ViewSettingsDialog`. A wizard. A simple list → `sap.m.SearchField`. The data source is not OData or there are only 1–3 filters — use individual Input/Select/DatePicker controls.
+- **Rules:**
+ - In Fiori Elements, SmartFilterBar / FilterBar is annotation-driven (`@UI.SelectionFields`) — do not hand-code filter fields.
+ - Filter Bar manages its own state (Basic vs. All filters visibility) — do not re-implement the expand/collapse logic.
+ - Use live update mode (results refresh on every filter change, no Go button) whenever possible. Use manual mode (Go button) only when the unfiltered data volume would be excessive or users must enter several filter values before results are useful.
+ - In freestyle apps, use `sap.ui.mdc.FilterBar` for V4; do not combine SmartFilterBar with V4 services.
+- **Gotchas:** `sap.ui.comp.smartfilterbar.SmartFilterBar` is **SAPUI5**; `sap.ui.mdc.FilterBar` is **OpenUI5 / SAPUI5** (MDC). Both are wrappers — never hand-build their internal structure.
+
+---
+
+## FacetFilter / Faceted List Filtering
+
+- **OpenUI5 / SAPUI5:** `sap.m.FacetFilter` / `sap.m.FacetFilterList` — API-based, no guideline page
+- **Use when:** Filtering a result list by a few independent facets (category, status, region) where each facet offers a small-to-medium set of values — a lightweight alternative to a full Filter Bar.
+- **Do NOT use when:** A List Report / ALP / OVP floorplan with OData-bound filters → `sap.ui.mdc.FilterBar` / SmartFilterBar. Many attributes or complex value help → Filter Bar. A single search over the list → `sap.m.SearchField`.
+- **Rules:**
+ - Put one `sap.m.FacetFilterList` per facet in the `lists` aggregation; each list's `key`/`title` identify the facet and its items carry the filterable values.
+ - Set `type` (`sap.m.FacetFilterType`): `Simple` (default, facets shown as a bar; desktop and tablet only) or `Light` (compact summary bar that opens a dialog) — phones switch to `Light` automatically; set it on larger screens only when there are many facets.
+ - Set each list's selection behavior with `setMode(sap.m.ListMode.MultiSelect | SingleSelectMaster)`; handle `listClose` to apply the selected keys as model filters.
+- **Gotchas:** `sap.m.FacetFilterList.multiSelect` is **deprecated since 1.20** — call `setMode()` instead (it accepts only `MultiSelect` and `SingleSelectMaster`; other modes are ignored).
+
+---
+
+## ValueHelpDialog / Complex Value Selection
+
+- **SAPUI5:** `sap.ui.comp.valuehelpdialog.ValueHelpDialog` (V2) · **OpenUI5 / SAPUI5:** `sap.ui.mdc.ValueHelp` (V4)
+- **Use when:** More than 1,000 items, or the user must narrow the list down with conditions, ranges, or exclusions (any list size).
+- **Do NOT use when:** Up to 200 items → `sap.m.Select` / `sap.m.ComboBox`. 200–1,000 items → Input with suggestions + `sap.m.SelectDialog` (more than 4 attributes per item → `sap.m.TableSelectDialog`).
+- **Rules:**
+ - Trigger from an `Input` or `MultiInput` via the value-help icon; open on the `valueHelpRequest` event.
+ - `sap.ui.comp.valuehelpdialog.ValueHelpDialog` provides search, filter bar, and table — configure via its API; do not hand-build the dialog content.
+ - In V4 Fiori Elements apps, use `sap.ui.mdc.ValueHelp` tied to `FieldHelp` annotations instead.
+- **Gotchas:** The comp Value Help Dialog is not in OpenUI5 — use `sap.m.SelectDialog` / `sap.m.TableSelectDialog` for simple cases, or `sap.ui.mdc.ValueHelp` (**OpenUI5 / SAPUI5**) when MDC is available.
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-layouts.md b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-layouts.md
new file mode 100644
index 0000000..0122a86
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-layouts.md
@@ -0,0 +1,71 @@
+# UI Layouts (Page and App Shell)
+
+## Contents
+- [Dynamic Page](#dynamic-page)
+- [Flexible Column Layout](#flexible-column-layout)
+- [Side Panel](#side-panel)
+- [App / NavContainer](#app--navcontainer)
+
+---
+
+## Dynamic Page
+
+- **OpenUI5 / SAPUI5:** `sap.f.DynamicPage` (with `sap.f.DynamicPageTitle`, `sap.f.DynamicPageHeader`)
+- **Use when:** A page needs an always-visible title, a header that expands/collapses (snaps) on scroll, a content area, and an optional floating footer — the base layout for List Report, Worklist, Analytical List Page, and most freestyle full-screen pages.
+- **Do NOT use when:** You do not need the expand/snap header → use the lighter `sap.m.Page`; the page shows one business object split into sections → use `sap.uxap.ObjectPageLayout`; the page's actions follow the standard semantic set (Edit, Delete, Share, ...) → use `sap.f.semantic.SemanticPage`, which is built on Dynamic Page and positions actions for you.
+- **Rules:**
+  - Put the page title in `DynamicPageTitle` `heading` (or `expandedHeading` / `snappedHeading` when they differ); global page actions go in the title `actions` aggregation, not in the header content.
+  - FCL column actions (full screen, exit full screen, close) go in `DynamicPageTitle` `navigationActions` — never mixed into `actions`.
+  - Header content (`DynamicPageHeader`) holds key facts, KPIs, or the filter bar — keep it compact; long forms belong in the content area.
+  - Footer: set `showFooter="true"` only when finalizing actions exist (Save, Cancel, Submit, Approve); use an `sap.m.OverflowToolbar` with a `ToolbarSpacer` so actions sit on the right. Do not put non-finalizing actions in the footer.
+  - Set `fitContent="true"` only when the content stretches to fill height by itself (e.g. `sap.ui.table.Table` / `AnalyticalTable` with auto row count). Leave it `false` for content that does not stretch.
+  - Align `Form`, `Panel`, `sap.m.Table`, and `sap.m.List` in the content with the header by adding the `sapFDynamicPageAlignContent` class and `width="auto"`.
+  - Do not nest a Dynamic Page inside another Dynamic Page.
+- **Gotchas:** `preserveHeaderStateOnScroll` is ignored when title and header together exceed an internal height threshold — do not rely on it for tall headers. `headerPinned` only applies when the header is pinnable, expanded, and `preserveHeaderStateOnScroll` is effectively off. Snapping by scroll does not happen when the content is too short to scroll past the header. `sap.ui.table.Table` is not adaptive — on phones provide a responsive alternative.
+
+---
+
+## Flexible Column Layout
+
+- **OpenUI5 / SAPUI5:** `sap.f.FlexibleColumnLayout` (with `sap.f.FlexibleColumnLayoutSemanticHelper`, `sap.f.routing.Router`)
+- **Use when:** Showing up to three hierarchical levels side by side — list → detail → detail-of-detail (e.g. sales orders → order → line item) — with the option to focus one column or go full screen.
+- **Do NOT use when:** The columns show unrelated content (two independent apps side by side) — columns must be parent → child; a single object needs sectioned detail only → use `sap.uxap.ObjectPageLayout` in one column; new list-detail apps → do not use the older `sap.m.SplitApp` / `sap.m.SplitContainer`.
+- **Rules:**
+  - Drive the `layout` from the router, not from ad-hoc `setLayout` calls: include a `{layout}` parameter in route patterns so browser back, forward, and bookmarks restore the same columns.
+  - Use `routerClass: "sap.f.routing.Router"` in `manifest.json`; route targets use `controlAggregation` `beginColumnPages` / `midColumnPages` / `endColumnPages` with the FCL as `controlId`.
+  - Use `FlexibleColumnLayoutSemanticHelper`: `getNextUIState(level)` to pick the layout when navigating to a level, and `getCurrentUIState().actionButtonsInfo` to decide which column actions (full screen, exit full screen, close) to show.
+  - Set `maxColumnsCount` on the helper to match the app: `2` for list-detail only, `3` (default) for list-detail-detail. Levels beyond the max open full screen.
+  - Place column actions (full screen / exit full screen / close) in the `navigationActions` of the column's `DynamicPageTitle` or `ObjectPageDynamicHeaderTitle`, at the far right, separate from business actions.
+  - Pages in the columns are page-like controls: `sap.f.DynamicPage`, `sap.f.semantic.SemanticPage`, or `sap.uxap.ObjectPageLayout`. Do not put the FCL inside a Dynamic Page or another FCL.
+  - Keep the item open in the next column visibly selected in the list (`mode="SingleSelectMaster"` or `ListItem` `navigated="true"`) so users see what the detail belongs to.
+  - Choose the default emphasis deliberately: `TwoColumnsBeginExpanded` when users mostly scan the list, `TwoColumnsMidExpanded` when they mostly work on the detail (`defaultTwoColumnLayoutType` on the helper).
+  - In Fiori elements, enable FCL through the `manifest.json` routing / `flexibleColumnLayout` settings — do not hand-build it.
+- **Gotchas:** The control reduces columns by screen size on its own — desktop up to 3, tablet at most 2, phone 1 — so never compute layouts from device size. On phone, two-column layouts show only the Mid column and three-column layouts only the End column. Users can drag the column separators; their widths are saved per layout in browser local storage, so do not force fixed column widths. Each column is internally an `sap.m.NavContainer`; use the router, not `to()`, to navigate between pages in a column.
+
+---
+
+## Side Panel
+
+- **OpenUI5 / SAPUI5:** `sap.f.SidePanel` (since 1.107)
+- **Use when:** Attaching supplementary, context-related content beside the main content that the user toggles on demand — help, comments, filters, settings, a details inspector — with an action bar of icons on the edge, each opening its own panel.
+- **Do NOT use when:** Primary cross-app navigation → `sap.tnt.SideNavigation` in `sap.tnt.ToolPage`; hierarchical list → detail columns → `sap.f.FlexibleColumnLayout`; a modal overlay or confirmation → `sap.m.Dialog`; a transient contextual popup anchored to a control → `sap.m.Popover`.
+- **Rules:**
+  - Put the page content in the `mainContent` aggregation and one `sap.f.SidePanelItem` per action-bar entry (icon + text + its content) in the `items` aggregation.
+  - Toggle via the action-bar icons; react to the `toggle` event rather than showing/hiding the panel yourself.
+  - For a user-resizable panel set `sidePanelResizable="true"` and bound it with `sidePanelMinWidth` / `sidePanelMaxWidth`; use `sidePanelPosition` (`sap.f.SidePanelPosition`) for left vs. right placement.
+- **Gotchas:** It is `sap.f.SidePanel`, a content-area side panel — not `sap.tnt.SideNavigation` (app navigation) and not a page header. Below a width breakpoint the panel switches to an overlay over the main content; do not hard-code its open/closed width.
+
+---
+
+## App / NavContainer
+
+- **OpenUI5 / SAPUI5:** `sap.m.App` (root) / `sap.m.NavContainer` (nested page navigation) — API-based, no guideline page
+- **Use when:** `sap.m.App` — the single root container of a freestyle `sap.m` app that navigates between full pages (sets viewport, home icon, page transitions). `sap.m.NavContainer` — page-to-page navigation inside a bounded area, for example drill-down pages inside a `Popover` / `ResponsivePopover` or a `Dialog`.
+- **Do NOT use when:** Hierarchical list-detail columns → use `sap.f.FlexibleColumnLayout`; app with left navigation → use `sap.tnt.ToolPage` with `sap.tnt.SideNavigation`; switching sections of one page → use `sap.m.IconTabBar`; a guided multi-step process → use `sap.m.Wizard`; an object preview with back navigation → `sap.m.QuickView` already handles its own pages.
+- **Rules:**
+  - Exactly one root container per app — `sap.m.App`, `sap.f.FlexibleColumnLayout`, `sap.m.SplitApp`, or `sap.tnt.ToolPage`. Do not nest `sap.m.App` inside another `sap.m.App` or inside a column.
+  - Navigate through the router (`sap.m.routing.Router`, targets with `controlAggregation: "pages"` and the App as `controlId`) — do not call `app.to()` / `back()` directly for app-level navigation, or the URL hash, browser back, and bookmarks break.
+  - Direct `NavContainer.to()` / `back()` calls are fine for local, non-bookmarkable drill-down inside a popover or dialog.
+  - Child pages must be page-like controls (`sap.m.Page`, `sap.f.DynamicPage`, `sap.uxap.ObjectPageLayout`) that fill the container.
+  - Keep the default `slide` transition; do not introduce custom transitions.
+- **Gotchas:** Inside the SAP Fiori launchpad, the launchpad provides the shell — do not wrap the component in `sap.m.Shell`; control full-width vs. letterboxed display with `"sap.ui": { "fullWidth": true }` in `manifest.json`. `sap.m.Shell` is only for standalone apps. A `NavContainer` without a sized parent collapses to zero height — give it a height or place it in a container that has one.
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-lists-tables.md b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-lists-tables.md
new file mode 100644
index 0000000..845fc15
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-lists-tables.md
@@ -0,0 +1,164 @@
+# UI Lists and Tables
+
+## Contents
+- [Table Type Decision](#table-type-decision)
+- [Responsive Table](#responsive-table)
+- [Grid Table](#grid-table)
+- [Analytical Table](#analytical-table)
+- [Tree Table](#tree-table)
+- [Grid List](#grid-list)
+- [List](#list)
+- [Pull to Refresh](#pull-to-refresh)
+- [Upload Set with Table Plugin](#upload-set-with-table-plugin)
+
+---
+
+## Table Type Decision
+
+Choose by **data shape**, never by appearance.
+
+| Need | Control | Class (OpenUI5 / SAPUI5) |
+|---|---|---|
+| General-purpose, mobile + desktop, up to ~200 loaded items; simple column totals in the footer | Responsive Table | `sap.m.Table` |
+| Large data, desktop-first, cell comparison | Grid Table | `sap.ui.table.Table` |
+| Multilevel grouping with subtotals per group (OData V2 analytical binding) | Analytical Table | `sap.ui.table.AnalyticalTable` |
+| Deep or large (>~200 items) parent-child hierarchy with data per node (bill of materials, cost centers) | Tree Table | `sap.ui.table.TreeTable` |
+| Simple hierarchy, up to ~200 items, mainly to identify/select items; responsive | Tree | `sap.m.Tree` |
+| Card/tile visual layout with images, non-tabular | Grid List | `sap.f.GridList` |
+| Simple vertical item list, not columnar | List | `sap.m.List` |
+
+Decision order:
+1. **Hierarchy?** Two levels → grouped list/table. Simple, ≤~200 items → `sap.m.Tree`. Deep, large, or with many columns → Tree Table.
+2. **Multilevel grouping + subtotals?** → Analytical Table. A total for one column → Responsive Table footer.
+3. **More than ~200 items loaded at once, or desktop cell-comparison?** → Grid Table.
+4. **Visual cards/tiles, not columns?** → Grid List.
+5. **Otherwise** → Responsive Table (`sap.m.Table`).
+
+"~200" counts the items loaded into the front end, not database rows — with filters and growing, a Responsive Table can front a large database. Complex items lower the limit; simple items raise it.
+
+**OData V4:** `AnalyticalTable` and `TreeTable` work with OData V2 / JSON only. For V4, use `sap.ui.table.Table` with the `sap.ui.table.plugins.ODataV4Aggregation` (analytical) or `sap.ui.table.plugins.ODataV4Hierarchy` (tree) plugin (since 1.140).
+
+Smart/MDC tables: `sap.ui.comp.smarttable.SmartTable` (**SAPUI5**, OData V2) / `sap.ui.mdc.Table` (**OpenUI5 / SAPUI5**, OData V4) are annotation-driven wrappers. Do not hand-build these.
+
+Table personalization (columns, sort, filter, group) is not hand-built either: use the `sap.m.p13n` library (`sap.m.p13n.Engine` with `sap.m.p13n.Popup` and its panels) instead of custom dialogs.
+
+Common misuses:
+- **Responsive Table for large and complex data** → DOM bloat, single-column pop-in mush. Use Grid Table.
+- **Analytical Table with no aggregation** → adds cost, breaks mobile. Use Grid Table (without aggregation it looks the same as a grid table).
+- **Grouping an Analytical Table to fake a hierarchy** → grouping is not nodes. Use Tree Table.
+- **Using `sap.m.Table` as a drop-in for grid/analytical/tree tables** → responsive table has no group subtotals, freeze, or hierarchy (only footer totals).
+- **Analytical Table just for one column total** → use a Responsive Table with the total in the column `footer`.
+- **Grid List for text-heavy tabular data** because "cards look nice" → no column alignment or sort. Use Responsive Table.
+
+---
+
+## Responsive Table
+
+- **OpenUI5 / SAPUI5:** `sap.m.Table`
+- **Use when:** Up to ~200 loaded items; needs to work on mobile and desktop; content is line-item oriented; pop-in behavior for narrow screens is acceptable.
+- **Do NOT use when:** More than ~200 items must be loaded at once → use Grid Table; multilevel grouping with subtotals → use Analytical Table; true hierarchy → use Tree / Tree Table; cell-comparison across many columns on desktop → use Grid Table.
+- **Rules:**
+  - Use `sap.m.Column` + `sap.m.ColumnListItem` (or template items) — do not hand-build raw HTML table rows inside the control.
+  - Configure pop-in via column `demandPopin` / `minScreenWidth` for responsive column behavior.
+  - `rememberSelections` should be `false` when a Filter Bar triggers search — reset selections on each search.
+  - Show no more columns than fit ~80% of use cases; use pop-in / column hide for the rest.
+  - Totals go in the column `footer` (`sap.m.Column`). Don't show totals or a toolbar item count in growing mode — it's unclear what is aggregated.
+- **Gotchas:** `sap.m.Table` is not a drop-in replacement for `sap.ui.table.Table`, `AnalyticalTable`, or `TreeTable`.
+
+---
+
+## Grid Table
+
+- **OpenUI5 / SAPUI5:** `sap.ui.table.Table`
+- **Use when:** Large datasets (hundreds to thousands of rows), desktop-first, many columns requiring horizontal scroll and freeze, cell-level comparison.
+- **Do NOT use when:** Mobile is a requirement → use Responsive Table with an adaptive fallback; aggregation with OData analytical binding → use Analytical Table; hierarchy → use Tree Table.
+- **Rules:**
+  - Always pair with a toolbar (`sap.m.OverflowToolbar`) — the grid table does not have a built-in title area.
+  - For column personalization, use `sap.m.p13n.Popup` (P13n Dialog) via `sap.m.p13n.Engine` — with only a `SelectionPanel` for simple show/hide/reorder. Not `sap.m.ViewSettingsDialog` and not the deprecated `sap.m.TablePersoDialog` (since 1.115).
+  - Set the visible row count with the `rowMode` aggregation (`sap.ui.table.rowmodes.Auto` / `Fixed` / `Interactive`). `visibleRowCount`, `visibleRowCountMode`, and `minAutoRowCount` are deprecated since 1.119, even though the guideline still names them.
+  - Use the multi-selection plug-in (`sap.ui.table.plugins.MultiSelectionPlugin`) over `selectionMode="MultiToggle"` for reliable select-all behavior with server-side data.
+  - Set `selectionBehavior` explicitly: `RowSelector` when row-click is used for navigation; `Row` otherwise.
+  - Horizontal scroll appears automatically when column widths exceed the table width — do not use percentage widths for tables with many columns.
+- **Gotchas:** Not responsive on phones — provide a separate UI (e.g. Responsive Table or charts) for S screen sizes.
+
+---
+
+## Analytical Table
+
+- **OpenUI5 / SAPUI5:** `sap.ui.table.AnalyticalTable`
+- **Use when:** Aggregated data with OData V2 analytical binding — multilevel grouping with summed/subtotaled cells per group, financial analysis, waterfall views, >1,000 rows with aggregation.
+- **Do NOT use when:** No aggregation is needed → use Grid Table; only a total for one column → Responsive Table footer; OData V4 → `sap.ui.table.Table` + `ODataV4Aggregation`; hierarchy (bill of materials, org) → use Tree Table; mobile is required → Analytical Table is desktop/tablet only.
+- **Rules:**
+  - Use `sap.ui.table.AnalyticalColumn` with `summed` property for aggregation columns.
+  - Multi-selection: strongly prefer the `MultiSelectionPlugin` over `selectionMode="MultiToggle"` — it handles server-side data correctly.
+  - When setting a selection limit, enable `enableNotification` to show users when the limit is reached.
+  - Column freeze: set `enableColumnFreeze` on the table; freeze is triggered from the column header menu.
+  - Do not use grouping to simulate a hierarchy — use Tree Table for real parent-child nodes.
+- **Gotchas:** Not responsive — requires an adaptive approach (separate UI or chart fallback) for smartphones. `condensed` density must always be set together with `compact` — never use `condensed` alone or mix with `cozy`.
+
+---
+
+## Tree Table
+
+- **OpenUI5 / SAPUI5:** `sap.ui.table.TreeTable`
+- **Use when:** True parent-child hierarchy data — bill of materials, org charts, cost center hierarchies, any structure where nodes have real children.
+- **Do NOT use when:** Data is flat with value-based grouping only → use Analytical Table's group feature; only two levels → grouped list or Responsive Table; simple hierarchy with ≤~200 items → `sap.m.Tree` (responsive); OData V4 → `sap.ui.table.Table` + `ODataV4Hierarchy`.
+- **Rules:**
+  - Bind to a JSONModel or OData V2 model tree binding — do not simulate a tree by manual nesting. `sap.ui.model.odata.v2.ODataTreeBinding` is deprecated since 1.150 (moving to OData V4 recursive hierarchies).
+  - Expand/collapse controls are automatic — do not add custom chevrons. Set recursive collapse with the `collapseRecursive` binding parameter; the `TreeTable` property of the same name is deprecated since 1.76.
+  - For personalization with many columns, use `sap.m.p13n.Popup`.
+  - Column freeze, sort, and filter follow the same rules as Grid Table.
+- **Gotchas:** Desktop/tablet only — same adaptive requirement as Analytical and Grid tables. Do not use `sap.ui.table.AnalyticalTable` with grouping as a tree substitute — grouping clusters rows by value, it does not model parent-child nodes.
+
+---
+
+## Grid List
+
+- **OpenUI5 / SAPUI5:** `sap.f.GridList`
+- **Use when:** Visual card/tile layout with images or rich preview content, non-tabular; tile-grid patterns on dashboards or catalog pages.
+- **Do NOT use when:** Data is columnar and requires sorting/filtering per column → use Responsive Table; items are simple text lines → use List.
+- **Rules:**
+  - Use `sap.f.GridListItem` (or custom items) — do not place raw `<div>` tiles inside `GridList`.
+  - Grid List does not provide column headers, column sort, or pop-in — do not add them manually.
+  - For selection, use the built-in `mode` property (`SingleSelectMaster`, `MultiSelect`, `Delete`). `SingleSelect` is deprecated since 1.143; avoid `SingleSelectLeft` unless you need two separate click areas. In single-select modes, preselect one item.
+- **Gotchas:** `sap.f.GridList` uses CSS Grid layout via `sap.ui.layout.cssgrid.GridBoxLayout` — do not try to control tile sizing with external CSS without considering the grid layout API.
+
+---
+
+## List
+
+- **OpenUI5 / SAPUI5:** `sap.m.List` / `sap.m.StandardListItem` / `sap.m.CustomListItem`
+- **Use when:** Simple vertical item list — menus, settings lists, notification items, object lists without columnar data.
+- **Do NOT use when:** Data is columnar with headers → use Responsive Table; items need persistent left-nav selection and expand/collapse → use `sap.tnt.SideNavigation`; visual card layout → use Grid List.
+- **Rules:**
+  - Use typed list items (`StandardListItem`, `CustomListItem`, `GroupHeaderListItem`) — do not put unstructured HTML as the only content.
+  - Set `mode` explicitly: `None` (default), `SingleSelectMaster`, `MultiSelect`, `Delete`. Use `SingleSelectMaster` for list-detail selection (e.g. in FCL). `SingleSelect` is deprecated since 1.143; avoid `SingleSelectLeft` unless you need two separate click areas.
+  - Use `growing="true"` with `growingTriggerText` or scroll-based growing for large lists — do not load all items upfront when performance matters.
+  - Use `sticky` on the header when the list has a header and long scroll content.
+- **Gotchas:** `sap.m.List` has no nav semantics and no expand/collapse state — do not use it as application side navigation. `StandardListItem` with `type="Navigation"` supports list-to-detail patterns but does not replace `SideNavigation` for persistent app nav.
+
+---
+
+## Pull to Refresh
+
+- **OpenUI5 / SAPUI5:** `sap.m.PullToRefresh` — API-based, no guideline page
+- **Use when:** Users on touch devices need to reload a list or feed whose data changes on the server (inbox, notifications, task list) by pulling the list down.
+- **Do NOT use when:** The data does not change while the page is open; the page does not scroll (`enableScrolling="false"`) — the control does not work there; the content is a `sap.ui.table.*` grid table; desktop-only apps → offer a Refresh button in the toolbar instead.
+- **Rules:**
+  - Place it as the **first** control in the content of a scrollable `sap.m.Page` or `sap.m.ScrollContainer`, above the list.
+  - In the `refresh` handler, reload the data and call `hide()` when loading has finished — the control does not hide itself.
+  - Use `description` for context such as "Last updated 10:42".
+  - Show it on touch devices only if the app also runs on desktop: bind `visible` to `device>/support/touch`, and give desktop users a toolbar Refresh button.
+- **Gotchas:** On touch devices it is hidden until the user pulls; on non-touch devices it is always visible as a clickable area, which looks out of place in desktop layouts. Custom icons are scaled down to a maximum height of 50 px.
+
+---
+
+## Upload Set with Table Plugin
+
+- **OpenUI5 / SAPUI5:** `sap.m.plugins.UploadSetwithTable` (plugin on a Responsive, Grid, Tree, or MDC table)
+- **Use when:** Managed file upload with progress, status, retry, and remove — a list of files to be uploaded or already uploaded, with full lifecycle management. Also for download-only attachment lists (users may only download files others uploaded) — set `uploadEnabled="false"`.
+- **Do NOT use when:** Single-file pick with no lifecycle management → use `sap.ui.unified.FileUploader`.
+- **Rules:**
+  - `sap.m.UploadCollection` (deprecated since 1.88) and `sap.m.upload.UploadSet` (deprecated since 1.129) must not be used for new development. Use `sap.m.plugins.UploadSetwithTable` instead.
+  - On the plugin, set `uploadUrl` and handle `beforeUploadStarts` / `uploadCompleted` events — do not handle the HTTP upload manually outside the control.
+- **Gotchas:** See `ui-upload.md` for the full entry.
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-messages.md b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-messages.md
new file mode 100644
index 0000000..f8e790d
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-messages.md
@@ -0,0 +1,63 @@
+# UI Message Components
+
+## Contents
+- [Message Strip](#message-strip)
+- [Message Box](#message-box)
+- [Message Toast](#message-toast)
+- [Message Popover](#message-popover)
+
+---
+
+## Message Strip
+
+- **OpenUI5 / SAPUI5:** `sap.m.MessageStrip`
+- **Use when:** Displaying a persistent, non-blocking message scoped to a page, section, or single component (e.g., a table) that the user needs to see while working.
+- **Do NOT use when:** The message requires a decision or interruption → use `sap.m.MessageBox`; the message is a brief, transient success confirmation → use `sap.m.MessageToast`; there are many validation errors → use `sap.m.MessagePopover`.
+- **Rules:**
+ - Always set `type` explicitly: `Error`, `Warning`, `Success`, or `Information` (`sap/ui/core/message/MessageType`).
+ - Place the strip close to the content it describes — top of a section, not buried in a footer.
+ - Set `showCloseButton="true"` for temporary/informational messages; omit it for persistent system-state messages.
+ - Set `showIcon="true"` so the semantic icon is shown; use `customIcon` only to replace it.
+ - Keep text concise; use the `link` aggregation (`sap.m.Link`) only to point to related details, not as a primary action.
+- **Gotchas:** `colorSet="ColorSet1"` / `"ColorSet2"` (`colorSet` property, available since UI5 1.143) does not render a default icon — supply one via `customIcon`. The strip has no `valueState` property; semantic color comes from `type`.
+
+---
+
+## Message Box
+
+- **OpenUI5 / SAPUI5:** `sap.m.MessageBox`
+- **Use when:** A semantic error, warning, success, or confirmation dialog is needed that interrupts the user and requires an explicit response before continuing.
+- **Do NOT use when:** The message is informational and non-blocking → use `sap.m.MessageStrip`; the message is a brief success toast → use `sap.m.MessageToast`; building a fully custom dialog → compose `sap.m.Dialog` with an embedded `sap.m.MessageStrip` instead of inventing a new message-box control.
+- **Rules:**
+ - Use the semantic static methods: `MessageBox.error()`, `.warning()`, `.success()`, `.confirm()`, `.information()`, `.show()` — never hand-build a Dialog for these cases.
+ - Dialog title and button labels are auto-generated per type and locale — override only when semantics demand it.
+ - The `onClose` callback receives the button key pressed (`sap.m.MessageBox.Action.*`) — always handle all outcomes.
+ - One emphasized/primary button per dialog maximum.
+- **Gotchas:** `MessageBox` is a static utility class, not a control you instantiate — `new sap.m.MessageBox()` is wrong. It is part of `sap.m` and available in both OpenUI5 and SAPUI5.
+
+---
+
+## Message Toast
+
+- **OpenUI5 / SAPUI5:** `sap.m.MessageToast`
+- **Use when:** Confirming a successful, low-stakes operation (save, send, delete) with a brief message the user does not need to act on.
+- **Do NOT use when:** The message is an error or warning that the user must see → use `sap.m.MessageStrip` or `sap.m.MessageBox`; the user must be able to copy the message text; the user must read it before leaving the page.
+- **Rules:**
+ - Keep text to one short sentence — the toast auto-dismisses and cannot be recalled.
+ - Default `duration` is 3000 ms. Increase only for longer messages.
+ - Call `MessageToast.show(sText, mOptions)`; position with the `my` / `at` / `of` options (default: center bottom) only when the default is covered.
+- **Gotchas:** `MessageToast.show()` is a static call — it is not a declarative view control. The toast is not announced by screen readers as an alert by default — for critical notifications use a `MessageStrip` instead.
+
+---
+
+## Message Popover
+
+- **OpenUI5 / SAPUI5:** `sap.m.MessagePopover`
+- **Use when:** Aggregating multiple validation messages (from multiple fields or sections) into one accessible, grouped entry point — typically in a page footer toolbar.
+- **Do NOT use when:** There is only one message → use `sap.m.MessageStrip`; the message requires a modal response → use `sap.m.MessageBox`; the messages must be shown inside a dialog or page area instead of a popover → use `sap.m.MessageView`.
+- **Rules:**
+ - Populate via `sap.m.MessageItem` — set `type`, `title`, `subtitle`, and `description`. For deep linking, set `activeTitle="true"` and handle the popover's `activeTitlePress` event to focus the related field (`MessageItem` has no `target` property).
+ - Place the trigger button in the footer toolbar of the page or dialog, never inline in content.
+ - Display the count of messages on the trigger button; use the highest-severity icon.
+ - Do not use repeated `MessageStrip` instances to replace a `MessagePopover` — one strip per message creates visual clutter and is not navigable.
+- **Gotchas:** `sap.m.MessagePopover` is part of `sap.m` and available in both OpenUI5 and SAPUI5 — do not rebuild it from a `ResponsivePopover` and a custom list. Bind its `items` to the message model (`sap/ui/core/Messaging`) so validation messages appear automatically.
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-navigation.md b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-navigation.md
new file mode 100644
index 0000000..7a9237d
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-navigation.md
@@ -0,0 +1,138 @@
+# UI Navigation
+
+## Contents
+- [Shell Bar](#shell-bar)
+- [User Menu](#user-menu)
+- [Product Switch](#product-switch)
+- [Icon Tab Bar](#icon-tab-bar)
+- [Tab Container](#tab-container)
+- [Segmented Button (cross-ref)](#segmented-button-cross-ref)
+- [Side Navigation](#side-navigation)
+- [Shell Search](#shell-search)
+- [Breadcrumbs](#breadcrumbs)
+
+---
+
+## Shell Bar
+
+- **OpenUI5 / SAPUI5:** `sap.f.ShellBar`
+- **Use when:** Universal app header at the top of every screen — logo, product title, search, notifications, Joule (AI assistant), user profile, product switch.
+- **Do NOT use when:** You need a page-level or section-level toolbar → use `sap.m.Toolbar` / `sap.m.OverflowToolbar`; do not use `sap.m.Bar` as an app header. Inside the SAP Fiori launchpad the launchpad already renders the shell header — do not add a second one.
+- **Rules:**
+  - Branding element (SAP logo + product name) is mandatory.
+  - The profile (`profile` aggregation with a `sap.m.Avatar`) is mandatory; provide Help access.
+  - Only add actions to the Shell Bar if users need them **frequently** — do not replicate Shell Bar actions in the User Menu or side navigation.
+  - Avoid using the Shell Bar Back button (`showNavButton`); prefer the browser back button. Only show it when back navigation is technically impossible via the browser.
+  - In an app with side navigation, place the Shell Bar in the `header` of `sap.tnt.ToolPage`.
+- **Gotchas:** Use the ShellBar's built-in assistant entry point (`showCopilot` / `copilotPressed`) for Joule — do not add Joule as an unrelated item in `additionalContent`. The API notes that `sap.f.ShellBar` is not UXC-compliant and will no longer follow UXC design updates; for UXC-compliant apps, use the `ui5-shellbar` Web Component (integrate via `ui5-tooling-modules`).
+
+---
+
+## User Menu
+
+- **OpenUI5 / SAPUI5:** opened from the `sap.f.ShellBar` profile avatar (`avatarPressed` event) — API-based; the guideline page lists no SAPUI5 implementation (Web Component only)
+- **Use when:** User-specific settings, account switching, and sign-out — always accessed via the Shell Bar avatar/profile icon.
+- **Do NOT use when:** App-level navigation items belong here — they go in the side navigation or the app menu, not the User Menu.
+- **Rules:**
+  - Show *Manage Account* button only if a central profile management URL exists outside the product.
+  - Show *Other Accounts* panel only if the product supports multiple accounts.
+  - Standard items: Settings, Legal Information, About. Add product-specific user-related items only.
+  - On S (phone), the User Menu opens full screen.
+- **Gotchas:** The profile menu is opened from the ShellBar avatar — it is not a standalone page-level dropdown.
+
+---
+
+## Product Switch
+
+- **OpenUI5 / SAPUI5:** `sap.f.ProductSwitch` / `sap.f.ProductSwitchItem` — API-based, no guideline page (only mentioned in the Shell Bar anatomy)
+- **Use when:** Users move between related products or applications of a suite from the Shell Bar (the grid icon next to the profile).
+- **Do NOT use when:** Navigating inside the current app → use `sap.tnt.SideNavigation` or in-page navigation; launching many unrelated apps → that is the launchpad's job; offering a handful of in-app actions → use a `sap.m.Menu` / `MenuButton`.
+- **Rules:**
+  - Open it from the Shell Bar: set `showProductSwitcher="true"` and open a `sap.m.ResponsivePopover` containing the `ProductSwitch` in the `productSwitcherPressed` handler.
+  - Each `ProductSwitchItem` needs a `title` and an icon (`src`) or image (`imageSrc`); `subTitle` is optional — keep both to one short line.
+  - Set `targetSrc` (and `target` when it opens in a new tab) on each item, and redirect in the `ProductSwitch` `change` event — redirection is app logic, not automatic. Mark the current product with the `selectedItem` association.
+  - Keep the list to products the user can actually access; do not show disabled or unauthorized products.
+- **Gotchas:** The grid switches automatically from 3 columns (up to 6 items) to 4 columns (7+ items) — do not force a layout. On phones the `ResponsivePopover` opens full screen, which is expected.
+
+---
+
+## Icon Tab Bar / In-page Section Navigation
+
+- **OpenUI5 / SAPUI5:** `sap.m.IconTabBar`
+- **Use when:** Navigating between sections or facets of a single page; filtering a list by category; visualizing process steps.
+- **Do NOT use when:** Editable browser-tab-style multi-document workspace → use TabContainer (`sap.m.TabContainer`). Switching between 2–3 views in a toolbar → use Segmented Button. Left-hand app navigation → use Side Navigation.
+- **Rules:**
+ - Text-only tabs: set `headerMode="Inline"` so counters appear in parentheses, not above the label. Keep `upperCase="false"` (default); use title case.
+ - Icon-only tabs: use only when icons are universally recognizable; max 4–5 tabs.
+ - For process steps with fixed order, set `tabsOverflowMode="StartAndEnd"` so tabs don't reorder.
+ - Keep `expandable` at its default (`true`) when there is content below the tab bar; set `expandable="false"` only when nothing is below it.
+ - Do not use cross-navigation (clicking tab A to open tab B) — it breaks back navigation.
+ - Use `sap.m.IconTabFilter` and `sap.m.IconTabSeparator` as items of `sap.m.IconTabBar`.
+- **Gotchas:** `sap.m.IconTabBar` (in-page navigation) and `sap.m.TabContainer` (browser-tab-style editing) are separate controls with different APIs — pick by purpose, not by look. Do not hide tabs with no content unless users cannot create content in them; show empty tabs that allow creation.
+
+---
+
+## Tab Container / Editable Multi-document Tabs
+
+- **OpenUI5 / SAPUI5:** `sap.m.TabContainer`
+- **Use when:** The Multi-Instance Layout — users select several objects on another page (usually a list report, "Open in Tabs") and open and edit them simultaneously, one closeable tab per object.
+- **Do NOT use when:** Users need the objects side by side on the same page → comparison pattern. In-page section/facet navigation → use IconTabBar (`sap.m.IconTabBar`). Simple 2–3 view switch → Segmented Button.
+- **Rules:**
+ - Put one `sap.m.TabContainerItem` per open object in the `items` aggregation; track the active one via the `selectedItem` association.
+ - Each tab's content is an embedded Object Page; the tab title (`name`) is the same as the object page title.
+ - Set `modified="true"` on a tab with unsaved changes (shows an asterisk). Handle `itemClose` and warn before closing a tab with unsaved changes (`preventDefault()` to keep it open).
+ - Closing the last tab closes the page and returns to the page the objects were selected from.
+ - Show the Create button (`showAddNewButton`, `addNewButtonPress` → new tab with an empty object page) only if the app allows creating objects.
+- **Gotchas:** `sap.m.TabContainer` and `sap.m.IconTabBar` are separate classes with different APIs; the distinction is semantic and behavioral. Choosing the wrong one is a frequent mistake — see the wrong→right table in SKILL.md.
+
+---
+
+## Segmented Button (cross-ref)
+
+See [ui-actions.md — Segmented Button](ui-actions.md#segmented-button) for the full entry.
+
+- **Use for navigation when:** Switching between 2–3 closely related views in a toolbar (not in-page section tabs).
+- **Do NOT use for:** In-page sections (5+ options, or needs counters) → IconTabBar. Left nav → Side Navigation.
+
+---
+
+## Side Navigation / Left Menu
+
+- **OpenUI5 / SAPUI5:** `sap.tnt.SideNavigation`
+- **Use when:** Primary navigation across multiple application areas or modules — persistent left-hand menu with expandable groups.
+- **Do NOT use when:** Only a single navigation target exists. Structuring layout or implementing app-specific logic. On-page section switching → IconTabBar.
+- **Rules:**
+ - Place `sap.tnt.SideNavigation` in the `sideContent` of `sap.tnt.ToolPage` (with the Shell Bar in the ToolPage `header`) — standalone use breaks responsive behavior and misaligns ShellBar padding.
+ - First navigation item must be "Home" linking to the entry page.
+ - Keep navigation item labels short — wrapping is not supported in collapsed mode.
+ - Limit the fixed bottom area (`fixedItem`) to max 4 elements (1 action button + 3 nav items); phone-first: 1 element only. The `footer` aggregation is deprecated since 1.120 — use `fixedItem`.
+ - Do not mix embedded and overlay modes in the same app; choose one.
+ - Use `sap.tnt.NavigationListGroup` (since 1.121) for groups and `sap.tnt.NavigationListItem` for items and sub-items.
+- **Gotchas:** The namespace is `sap.tnt` — there is no `sap.f.SideNavigation`. The `sap.tnt` library ships with both OpenUI5 and SAPUI5. On size S the side nav switches to full-screen slide-in overlay — expected behavior. Using `sap.m.List` as side navigation is the most common wrong-component error: List has no nav semantics, expand/collapse, or selection state.
+
+---
+
+## Shell Search / Cross-app Search
+
+- **OpenUI5 / SAPUI5:** `sap.f.SearchManager` in the `searchManager` aggregation of `sap.f.ShellBar` — API-based; the guideline page lists no SAPUI5 implementation (experimental Web Component only)
+- **Use when:** Product-wide or cross-product search is required, surfacing results from across the entire application or suite, placed in the ShellBar.
+- **Do NOT use when:** Filtering a local list or table on the current page → use `sap.m.SearchField` in the page content. Filtering with multiple attributes → Filter Bar.
+- **Rules:**
+ - Add a `sap.f.SearchManager` to the ShellBar `searchManager` aggregation and handle its `search` (and `suggest`) events — do not place a `sap.m.SearchField` in `additionalContent`.
+ - Suggestions go in `suggestionItems`, which accepts only `sap.m.SuggestionItem` (`text`, `description`, `icon`, `key`) — `GroupHeaderListItem` and other list items are not allowed there.
+ - Placeholder format: start with "Search"; add scope(s) if space allows — "Search in Sales", "Search for Devices".
+ - Do not overlay or dim the page when the search is active — the suggestion dropdown already provides visual separation.
+- **Gotchas:** `sap.m.SearchField` serves local in-page search; shell-wide search goes through the ShellBar's `SearchManager`. Inside the SAP Fiori launchpad, the launchpad provides the shell search — do not add a second one. Autocomplete completes the first suggestion matching the input prefix — this may not be the topmost visual result depending on list ordering.
+
+---
+
+## Breadcrumbs / Navigation Trail
+
+- **OpenUI5 / SAPUI5:** `sap.m.Breadcrumbs`
+- **Use when:** Secondary navigation on an object page; drilldown through related object pages (parent → child → grandchild), tables, or charts.
+- **Do NOT use when:** The hierarchy has only one level. Linking to other floorplans (overview pages, list reports), to unrelated object pages in other apps, or to standalone object pages such as fact sheets — the global navigation concept covers those.
+- **Rules:**
+ - Put `sap.m.Link` controls in the `links` aggregation of `sap.m.Breadcrumbs`, one per ancestor page.
+ - Standard type: set `currentLocationText` for the current page — it renders as plain text, not a link. On an object page, use the type without the current page: omit `currentLocationText`, so all items are links. Place it in the `breadcrumbs` aggregation of `sap.f.DynamicPageTitle` / the object page header title.
+ - For in-app (router) navigation, handle each Link's `press` and call the router instead of hard-coding `href` URLs.
+- **Gotchas:** When space runs out, earlier links collapse into a dropdown. Do not put more than ~6–8 items in the trail — deep hierarchies become unusable. The anchor bar of `sap.uxap.ObjectPageLayout` navigates sections within one object; breadcrumbs navigate up the object hierarchy — use both where both apply.
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-upload.md b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-upload.md
new file mode 100644
index 0000000..4d4c895
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/references/ui-upload.md
@@ -0,0 +1,50 @@
+# UI Upload Components
+
+## Contents
+- [File Uploader](#file-uploader)
+- [Upload Collection (deprecated)](#upload-collection-deprecated)
+- [Upload Set with Table Plugin](#upload-set-with-table-plugin)
+
+---
+
+## File Uploader
+
+- **OpenUI5 / SAPUI5:** `sap.ui.unified.FileUploader`
+- **Use when:** The user needs to select and trigger upload of one (or a small number of) files with no requirement to manage, rename, reorder, or delete them after selection.
+- **Do NOT use when:** Users need to manage a list of uploads (rename, delete individual files, preview, track per-file status) → use `sap.m.plugins.UploadSetwithTable`; using the deprecated `sap.m.UploadCollection` → migrate to `UploadSetwithTable`.
+- **Rules:**
+ - Use the input-field variant by default — it shows selected file names inline; use the button-only variant (`buttonOnly="true"`) only when the surrounding layout provides visible file-name feedback.
+ - Restrict accepted file types via `fileType` (extensions) and/or `mimeType`; handle `typeMissmatch` to tell the user why a file was rejected.
+ - Set `maximumFileSize` (in MB) to enforce client-side size limits before upload; handle `fileSizeExceed`.
+ - Use `multiple` only when the user genuinely needs to select several files at once.
+ - Choose the upload trigger: `uploadOnChange="true"` uploads immediately on file selection; the default (`false`) requires an explicit `upload()` call (e.g. from a Save button).
+ - Prefer `sendXHR="true"` to send an XHR request instead of a form submit — this is what enables progress tracking and header control; set `httpRequestMethod` for the verb. With `useMultipart="false"` the body is the file only (single file, `sendXHR` required).
+ - Reflect upload errors via `valueState` on the FileUploader and a message (e.g. `sap.m.MessageStrip` or `MessageBox`) with details.
+- **Gotchas:** Clicking the browse button always replaces the current selection — there is no "add more" mode. A batch error (any single file fails) blocks the entire batch — no partial uploads. The `change` event fires in Chrome even when the user cancels the OS dialog; guard against empty `files`.
+
+---
+
+## Upload Collection (deprecated)
+
+- **OpenUI5 / SAPUI5:** `sap.m.UploadCollection` — **DEPRECATED, do not use in new code**
+- **Use when:** Never in new development.
+- **Do NOT use when:** Always — replace with `sap.m.plugins.UploadSetwithTable` or `sap.ui.unified.FileUploader` for simple cases.
+- **Rules:**
+ - Migrate existing `sap.m.UploadCollection` usage to `UploadSetwithTable`.
+ - `sap.m.UploadCollection` still exists for legacy apps but receives no new features.
+- **Gotchas:** `UploadCollection` is the classic control that preceded `UploadSet`. It lacks the table-based management model, plugin architecture, and modern rename/preview capabilities. Do not start new implementations with it.
+
+---
+
+## Upload Set with Table Plugin
+
+- **OpenUI5 / SAPUI5:** `sap.m.plugins.UploadSetwithTable`
+- **Use when:** Users need a managed upload list: upload multiple files, track per-file status, rename files, delete individual items, preview, or integrate upload into a table with custom columns.
+- **Do NOT use when:** Simple single-file upload with no management UI → use `sap.ui.unified.FileUploader`.
+- **Rules:**
+ - `UploadSetwithTable` is a plugin added to the `dependents` of a `sap.m.Table` — it is not a standalone control.
+ - Configure the upload endpoint via the `uploadUrl` property on the plugin; handle `beforeUploadStarts` and `uploadCompleted`.
+ - Each row maps to one file via `sap.m.upload.UploadItem`; bind file-level status (uploading, complete, error) to the item's `uploadState` property.
+ - For rename flows, handle `itemRenamed` / `itemRenameCanceled`.
+ - Enforce allowed file types and size limits on the plugin (`fileTypes`, `mediaTypes`, `maxFileSize`; handle `fileTypeMismatch` / `fileSizeExceeded`) and on the server.
+- **Gotchas:** `sap.m.plugins.UploadSetwithTable` ships with both OpenUI5 and SAPUI5 (`sap.m` library). `UploadSetwithTable` replaces `sap.m.upload.UploadSet` (deprecated since 1.129) as well as `sap.m.UploadCollection` (deprecated since 1.88).
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/tests/README.md b/plugins/ui5/skills/ui5-fiori-guidelines/tests/README.md
new file mode 100644
index 0000000..8027bf3
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/tests/README.md
@@ -0,0 +1,81 @@
+# Skill Evaluation Cases
+
+## What is this?
+
+An answer key for the skill. After you change the skill, ask it the questions below and check
+that it still gives the expected answers. If it does, your change did not break anything.
+
+- `eval.json` — the questions and the expected answers.
+- `fixtures/gap-*` — small UI5 files with mistakes planted on purpose. The skill must find them.
+- `fixtures/ok-*` — small UI5 files that are correct. The skill must not complain about them.
+
+This is only for people who maintain the skill. App developers never run it — they get a skill
+whose advice has been checked.
+
+## How do I use it?
+
+1. Open a new chat in your coding agent with the `ui5` plugin installed.
+2. Pick a case from the tables below and send it:
+   - **Question cases (`sel-`)** — paste the question.
+   - **Review cases (`rev-`)** — write "Review this view against the Fiori guidelines." and attach the fixture file.
+3. Compare the answer with the "Expected" column. Same answer → pass. Different → fix the skill and try again.
+
+Use a new chat for every case, so earlier answers do not influence the next one.
+There is no script — every case is run and checked by hand.
+
+## Details
+
+`eval.json` is the source of truth; the tables below summarize it. Each case in `eval.json` lists
+its exact checks (`assertions`), including which reference file the skill should open.
+
+## Select mode — control choice and reference dispatch
+
+| Case | Prompt topic | Expected |
+|---|---|---|
+| `sel-001` | `sap.m.Bar` as app header | `sap.f.ShellBar`, answered without opening a reference file |
+| `sel-002` | SideNavigation namespace / OpenUI5 | `sap.tnt.SideNavigation`, available in OpenUI5; never `sap.f.SideNavigation` |
+| `sel-003` | list → detail → detail | `sap.f.FlexibleColumnLayout` + semantic helper + router `{layout}`; reads `ui-layouts.md` |
+| `sel-004` | title + collapsing header + footer | `sap.f.DynamicPage`; reads `ui-layouts.md` |
+| `sel-005` | switch suite products | `sap.f.ProductSwitch` from the ShellBar; reads `ui-navigation.md` |
+| `sel-006` | draft autosave feedback | `sap.m.DraftIndicator`, not MessageToast |
+| `sel-007` | pull list down to refresh | `sap.m.PullToRefresh` |
+| `sel-008` | `Image` with only `alt` | set `decorative="false"` |
+| `sel-009` | KPI in object page title | `sap.m.GenericTag` with `ObjectNumber` value |
+| `sel-010` | sums and subtotals | `sap.ui.table.AnalyticalTable`, not `sap.m.Table` |
+| `sel-011` | container for ShellBar + left nav | `sap.tnt.ToolPage` |
+| `sel-012` | footer secondary action + Cancel | Save as Draft `type="Ghost"`, Cancel `type="Transparent"`; Ghost never called legacy |
+| `sel-013` | one column total in a responsive table | Total in the `sap.m.Column` footer; no AnalyticalTable |
+| `sel-014` | partially checked CheckBox | `partiallySelected`; never `indeterminate` |
+| `sel-015` | MessagePopover jump to field | `activeTitle` + `activeTitlePress`; never `MessageItem.target` |
+| `sel-016` | color of an embedded AI button | SAP blue; no purple / `--sapAssistant_*` |
+| `sel-017` | pick 1 of ~500 items, 2 attributes | Input with suggestions + `sap.m.SelectDialog`, not ValueHelpDialog |
+| `sel-018` | most important table-toolbar button, page already has a primary | `type="Ghost"`; not a second Emphasized, not Default |
+| `sel-019` | pick 1 of 15 items | `sap.m.ComboBox` (13–200 range) |
+| `sel-020` | BusyDialog while the app loads | busy state at app level; no BusyDialog |
+
+## Review mode — positive fixtures (skill MUST report these)
+
+| Fixture | Expected findings |
+|---|---|
+| `gap-shell.view.xml` | `Bar` as app header → ShellBar; `List` as side nav → SideNavigation; both → ToolPage |
+| `gap-sidenav-namespace.view.xml` | `f:SideNavigation` → `sap.tnt.SideNavigation` (only finding) |
+| `gap-tables.view.xml` | `selectionMode="MultiToggle"` → MultiSelectionPlugin; AnalyticalTable without aggregation → Grid Table |
+| `gap-messages.controller.js` | hand-built error Dialog → MessageBox; success MessageStrip → MessageToast |
+| `gap-inputs-actions.view.xml` | Input for date → DatePicker; two Emphasized buttons; footer Cancel `type="Ghost"` → Transparent (negative path) |
+| `gap-dynamicpage.view.xml` | `fitContent` with `sap.m.Table`; Export/Share in footer; Image `alt` ignored without `decorative="false"` |
+| `gap-fcl.controller.js` | `setLayout` / `addMidColumnPage` → router `{layout}` + FlexibleColumnLayoutSemanticHelper |
+
+Every review case also expects the agent to read `references/implementation-checklist.md`.
+
+## Review mode — negative fixtures (skill MUST NOT report false positives)
+
+| Fixture | Expected |
+|---|---|
+| `ok-toolpage.view.xml` | "No Fiori guideline violations found" |
+| `ok-dynamicpage.view.xml` | "No Fiori guideline violations found" |
+| `ok-fcl.controller.js` | "No Fiori guideline violations found" |
+
+## Adding cases
+
+Add a `Select` case for every new control or wrong→right row, and a `gap-` / `ok-` fixture
+pair for every new review checklist item.
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/tests/eval.json b/plugins/ui5/skills/ui5-fiori-guidelines/tests/eval.json
new file mode 100644
index 0000000..27c208a
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/tests/eval.json
@@ -0,0 +1,321 @@
+{
+  "version": "1.0",
+  "skill": "ui5-fiori-guidelines",
+  "skill_prompt_file": "../SKILL.md",
+  "modes": ["Select", "Review"],
+  "topics": [
+    "Shell and Navigation",
+    "Layout and Floorplan",
+    "Buttons and Actions",
+    "Forms and Inputs",
+    "Tables and Lists",
+    "Messaging",
+    "Accessibility"
+  ],
+  "assertion_types": {
+    "recommends": "The answer recommends a control whose name contains at least one string from `must_mention_any`. All matching is case-insensitive substring.",
+    "must_not_recommend": "None of the strings in `strings` is presented as the recommended control. Naming it as the wrong choice is allowed.",
+    "must_not_mention": "None of the strings in `strings` appear anywhere in the answer or report.",
+    "reads_reference": "The agent reads at least one of the files in `files` (checked in the tool-call transcript).",
+    "max_references_read": "The agent reads at most `max` files under `references/`. Catches over-reading that wastes tokens.",
+    "report_finding": "Review report contains a finding grouped under `topic` whose body mentions at least one string from `must_mention_any` AND at least one from `must_anchor_on`.",
+    "report_empty": "Review output is the negative response ('No Fiori guideline violations found') with zero findings.",
+    "finding_count_max": "Total findings under `topic` (or globally if `topic` is omitted) is <= `max`. Catches over-flagging."
+  },
+  "test_cases": [
+    {
+      "id": "sel-001",
+      "mode": "Select",
+      "prompt": "I'm using sap.m.Bar as the header of my app with the logo, notifications and user avatar. Is that right?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["sap.f.ShellBar", "ShellBar"], "description": "App header is ShellBar" },
+        { "id": "a2", "type": "must_not_recommend", "strings": ["sap.m.Bar"], "description": "Bar is not the app header" },
+        { "id": "a3", "type": "max_references_read", "max": 0, "description": "Answered from the SKILL.md tables" }
+      ]
+    },
+    {
+      "id": "sel-002",
+      "mode": "Select",
+      "prompt": "Which namespace do I import SideNavigation from, and does it work in OpenUI5?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["sap.tnt.SideNavigation", "sap/tnt/SideNavigation"], "description": "SideNavigation lives in sap.tnt" },
+        { "id": "a2", "type": "must_not_mention", "strings": ["sap.f.SideNavigation", "sap/f/SideNavigation"], "description": "The non-existent sap.f namespace is never suggested" },
+        { "id": "a3", "type": "must_not_mention", "strings": ["SAPUI5-only", "not available in OpenUI5", "not in OpenUI5"], "description": "sap.tnt ships with OpenUI5" }
+      ]
+    },
+    {
+      "id": "sel-003",
+      "mode": "Select",
+      "prompt": "I need a list of purchase orders, the order details next to it, and the line item details in a third column. How do I build the layout and handle navigation?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["sap.f.FlexibleColumnLayout", "FlexibleColumnLayout"], "description": "List-detail-detail is FCL" },
+        { "id": "a2", "type": "recommends", "must_mention_any": ["FlexibleColumnLayoutSemanticHelper", "getNextUIState"], "description": "Uses the semantic helper for layouts" },
+        { "id": "a3", "type": "recommends", "must_mention_any": ["{layout}", "layout parameter", "sap.f.routing.Router"], "description": "Layout driven by the router" },
+        { "id": "a4", "type": "must_not_recommend", "strings": ["sap.m.SplitApp", "SplitContainer"], "description": "No legacy split containers" },
+        { "id": "a5", "type": "reads_reference", "files": ["references/ui-layouts.md"], "description": "Dispatches to the layouts reference" }
+      ]
+    },
+    {
+      "id": "sel-004",
+      "mode": "Select",
+      "prompt": "I want a page with a title that always stays visible, a header with filters that collapses when the user scrolls, and a footer with Save and Cancel.",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["sap.f.DynamicPage", "DynamicPage"], "description": "Dynamic Page" },
+        { "id": "a2", "type": "must_not_recommend", "strings": ["sap.m.Page"], "description": "Not a plain Page with a hand-built header" },
+        { "id": "a3", "type": "reads_reference", "files": ["references/ui-layouts.md"], "description": "Dispatches to the layouts reference" }
+      ]
+    },
+    {
+      "id": "sel-005",
+      "mode": "Select",
+      "prompt": "Users should be able to jump between the products of our suite from the app header. What control do I use?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["sap.f.ProductSwitch", "ProductSwitch"], "description": "Product Switch" },
+        { "id": "a2", "type": "recommends", "must_mention_any": ["showProductSwitcher", "productSwitcherPressed"], "description": "Opened from the ShellBar" },
+        { "id": "a3", "type": "reads_reference", "files": ["references/ui-navigation.md"], "description": "Dispatches to the navigation reference" }
+      ]
+    },
+    {
+      "id": "sel-006",
+      "mode": "Select",
+      "prompt": "My object page saves a draft automatically while the user edits. How should I show that the draft is being saved?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["sap.m.DraftIndicator", "DraftIndicator"], "description": "Draft Indicator" },
+        { "id": "a2", "type": "must_not_recommend", "strings": ["MessageToast"], "description": "Not a toast per autosave" },
+        { "id": "a3", "type": "reads_reference", "files": ["references/ui-display.md", "references/component-selection.md"], "description": "Dispatches to a display reference" }
+      ]
+    },
+    {
+      "id": "sel-007",
+      "mode": "Select",
+      "prompt": "On phones, users should refresh their task list by pulling it down. Which control?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["sap.m.PullToRefresh", "PullToRefresh"], "description": "Pull to Refresh" },
+        { "id": "a2", "type": "recommends", "must_mention_any": ["hide()", "first control", "scrollable"], "description": "Mentions placement or hide() after loading" }
+      ]
+    },
+    {
+      "id": "sel-008",
+      "mode": "Select",
+      "prompt": "I show a product photo with <Image src=\"{PhotoUrl}\" alt=\"{ProductName}\" />. Is that accessible?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["decorative=\"false\"", "decorative to false", "decorative: false"], "description": "alt is ignored while decorative defaults to true" }
+      ]
+    },
+    {
+      "id": "sel-009",
+      "mode": "Select",
+      "prompt": "I want to show a KPI like 'Budget used 82%' with a warning color in the title area of my object page.",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["sap.m.GenericTag", "GenericTag"], "description": "Generic Tag for header KPIs" },
+        { "id": "a2", "type": "recommends", "must_mention_any": ["ObjectNumber"], "description": "Value goes into the ObjectNumber aggregation" }
+      ]
+    },
+    {
+      "id": "sel-010",
+      "mode": "Select",
+      "prompt": "Which table should I use when I need sums and subtotals per group?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["sap.ui.table.AnalyticalTable", "AnalyticalTable"], "description": "Analytical Table for aggregation" },
+        { "id": "a2", "type": "must_not_recommend", "strings": ["sap.m.Table"], "description": "Responsive table has no group subtotals (only footer totals)" }
+      ]
+    },
+    {
+      "id": "sel-011",
+      "mode": "Select",
+      "prompt": "My app has a ShellBar and a left navigation menu. What is the container for both?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["sap.tnt.ToolPage", "ToolPage"], "description": "ToolPage hosts ShellBar and SideNavigation" },
+        { "id": "a2", "type": "must_not_recommend", "strings": ["sap.f.DynamicPage"], "description": "SideNavigation is not wrapped in a DynamicPage" }
+      ]
+    },
+    {
+      "id": "sel-012",
+      "mode": "Select",
+      "prompt": "My page footer has Save as the primary action, plus Save as Draft and Cancel. Which button type do I use for Save as Draft and for Cancel?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["type=\"Ghost\"", "Ghost"], "description": "Secondary action in a footer toolbar is Ghost" },
+        { "id": "a2", "type": "recommends", "must_mention_any": ["Transparent"], "description": "Negative-path Cancel is Transparent" },
+        { "id": "a3", "type": "must_not_mention", "strings": ["Ghost is legacy", "Ghost is deprecated"], "description": "Ghost is a current, non-deprecated ButtonType" }
+      ]
+    },
+    {
+      "id": "sel-013",
+      "mode": "Select",
+      "prompt": "My responsive table of about 50 invoices needs a grand total of the Amount column. Do I have to switch to an AnalyticalTable?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["footer"], "description": "Single-column total goes in the sap.m.Column footer" },
+        { "id": "a2", "type": "must_not_recommend", "strings": ["AnalyticalTable"], "description": "Analytical Table is for multilevel grouping with subtotals, not one total" }
+      ]
+    },
+    {
+      "id": "sel-014",
+      "mode": "Select",
+      "prompt": "How do I show a 'select all' CheckBox as partially checked when only some child rows are selected?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["partiallySelected"], "description": "The property is partiallySelected" },
+        { "id": "a2", "type": "must_not_mention", "strings": ["indeterminate=\"true\"", "setIndeterminate"], "description": "sap.m.CheckBox has no indeterminate property" }
+      ]
+    },
+    {
+      "id": "sel-015",
+      "mode": "Select",
+      "prompt": "Users should click a message in my MessagePopover and jump to the field that has the error. How?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["activeTitlePress", "activeTitle"], "description": "Deep linking uses activeTitle + activeTitlePress" },
+        { "id": "a2", "type": "must_not_mention", "strings": ["target=\"", "setTarget("], "description": "sap.m.MessageItem has no target property" }
+      ]
+    },
+    {
+      "id": "sel-016",
+      "mode": "Select",
+      "prompt": "Which color should my embedded AI 'Generate' button use so users recognize it as AI?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["SAP blue", "sapBrandColor", "standard button"], "description": "Embedded AI uses SAP blue" },
+        { "id": "a2", "type": "must_not_recommend", "strings": ["sapAssistant", "purple", "gradient"], "description": "Purple / Joule gradient is reserved for Joule" }
+      ]
+    },
+    {
+      "id": "sel-017",
+      "mode": "Select",
+      "prompt": "Users pick one supplier from about 500 suppliers, identified by name and city. Which selection control?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["SelectDialog", "sap.m.SelectDialog"], "description": "200-1,000 items → Input with suggestions + SelectDialog" },
+        { "id": "a2", "type": "must_not_recommend", "strings": ["ValueHelpDialog"], "description": "ValueHelpDialog is for >1,000 items or conditions" }
+      ]
+    },
+    {
+      "id": "sel-018",
+      "mode": "Select",
+      "prompt": "My table toolbar has Edit, Copy and Delete. The page footer already has an emphasized Save. Which button type does Edit get?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["type=\"Ghost\"", "Ghost"], "description": "Most important content-toolbar button is Ghost when the page already has a primary action" },
+        { "id": "a2", "type": "must_not_recommend", "strings": ["type=\"Emphasized\"", "type=\"Default\""], "description": "Not a second Emphasized, and not Default" }
+      ]
+    },
+    {
+      "id": "sel-019",
+      "mode": "Select",
+      "prompt": "Users pick one of 15 plant locations in a form. Select or ComboBox?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["sap.m.ComboBox", "ComboBox"], "description": "13-200 items → ComboBox" },
+        { "id": "a2", "type": "must_not_mention", "strings": ["20-200", "20–200"], "description": "Lower bound is 13, not 20" }
+      ]
+    },
+    {
+      "id": "sel-020",
+      "mode": "Select",
+      "prompt": "While my app loads its initial data I want to block everything with sap.m.BusyDialog. Is that right?",
+      "assertions": [
+        { "id": "a1", "type": "recommends", "must_mention_any": ["busy state", "setBusy", "busy=\"true\"", "busy property"], "description": "App or page loading sets busy at app level" },
+        { "id": "a2", "type": "must_not_recommend", "strings": ["sap.m.BusyDialog", "BusyDialog"], "description": "Busy Handling: no busy dialog for app or page loading" }
+      ]
+    },
+    {
+      "id": "rev-001",
+      "mode": "Review",
+      "prompt": "Review this view against the Fiori guidelines.",
+      "fixture": "fixtures/gap-shell.view.xml",
+      "assertions": [
+        { "id": "a0", "type": "reads_reference", "files": ["references/implementation-checklist.md"], "description": "Review mode reads the checklist" },
+        { "id": "a1", "type": "report_finding", "topic": "Shell and Navigation", "must_mention_any": ["ShellBar"], "must_anchor_on": ["Bar", "appHeader"], "description": "sap.m.Bar used as app header" },
+        { "id": "a2", "type": "report_finding", "topic": "Shell and Navigation", "must_mention_any": ["SideNavigation"], "must_anchor_on": ["List", "sideMenu"], "description": "sap.m.List used as side navigation" },
+        { "id": "a3", "type": "report_finding", "topic": "Shell and Navigation", "must_mention_any": ["ToolPage"], "must_anchor_on": ["HBox", "sideMenu", "Page"], "description": "Header + side nav belong in a ToolPage" }
+      ]
+    },
+    {
+      "id": "rev-002",
+      "mode": "Review",
+      "prompt": "Review this view against the Fiori guidelines.",
+      "fixture": "fixtures/gap-sidenav-namespace.view.xml",
+      "assertions": [
+        { "id": "a1", "type": "report_finding", "topic": "Shell and Navigation", "must_mention_any": ["sap.tnt.SideNavigation", "tnt:SideNavigation"], "must_anchor_on": ["f:SideNavigation", "sap.f"], "description": "sap.f.SideNavigation does not exist" },
+        { "id": "a2", "type": "finding_count_max", "max": 1, "description": "ToolPage + ShellBar are correct and must not be flagged" }
+      ]
+    },
+    {
+      "id": "rev-003",
+      "mode": "Review",
+      "prompt": "Check this view for Fiori guideline issues.",
+      "fixture": "fixtures/gap-tables.view.xml",
+      "assertions": [
+        { "id": "a1", "type": "report_finding", "topic": "Tables and Lists", "must_mention_any": ["MultiSelectionPlugin"], "must_anchor_on": ["MultiToggle", "supplierTable"], "description": "MultiToggle instead of MultiSelectionPlugin" },
+        { "id": "a2", "type": "report_finding", "topic": "Tables and Lists", "must_mention_any": ["sap.ui.table.Table", "Grid Table"], "must_anchor_on": ["AnalyticalTable", "orderTable"], "description": "AnalyticalTable without aggregation" },
+        { "id": "a3", "type": "finding_count_max", "topic": "Tables and Lists", "max": 3, "description": "No over-flagging" }
+      ]
+    },
+    {
+      "id": "rev-004",
+      "mode": "Review",
+      "prompt": "Review this controller against the Fiori guidelines.",
+      "fixture": "fixtures/gap-messages.controller.js",
+      "assertions": [
+        { "id": "a1", "type": "report_finding", "topic": "Messaging", "must_mention_any": ["MessageBox"], "must_anchor_on": ["Dialog", "onSaveError"], "description": "Hand-built Dialog for a plain error" },
+        { "id": "a2", "type": "report_finding", "topic": "Messaging", "must_mention_any": ["MessageToast"], "must_anchor_on": ["MessageStrip", "onSaveSuccess"], "description": "Persistent strip for a brief success" }
+      ]
+    },
+    {
+      "id": "rev-005",
+      "mode": "Review",
+      "prompt": "Review this view against the Fiori guidelines.",
+      "fixture": "fixtures/gap-inputs-actions.view.xml",
+      "assertions": [
+        { "id": "a1", "type": "report_finding", "topic": "Forms and Inputs", "must_mention_any": ["DatePicker"], "must_anchor_on": ["Input", "deliveryDate", "Delivery Date"], "description": "Plain Input for a date" },
+        { "id": "a2", "type": "report_finding", "topic": "Buttons and Actions", "must_mention_any": ["one emphasized", "one Emphasized", "single emphasized", "only one"], "must_anchor_on": ["Save and New", "Emphasized"], "description": "Two emphasized buttons" },
+        { "id": "a3", "type": "report_finding", "topic": "Buttons and Actions", "must_mention_any": ["Transparent"], "must_anchor_on": ["Ghost", "Cancel"], "description": "Negative-path Cancel in the footer must be Transparent, not Ghost" }
+      ]
+    },
+    {
+      "id": "rev-006",
+      "mode": "Review",
+      "prompt": "Review this view against the Fiori guidelines.",
+      "fixture": "fixtures/gap-dynamicpage.view.xml",
+      "assertions": [
+        { "id": "a1", "type": "report_finding", "topic": "Layout and Floorplan", "must_mention_any": ["fitContent"], "must_anchor_on": ["sap.m.Table", "supplierList", "Table"], "description": "fitContent with non-stretching sap.m.Table" },
+        { "id": "a2", "type": "report_finding", "topic": "Layout and Floorplan", "must_mention_any": ["finalizing", "Save", "Submit"], "must_anchor_on": ["Export", "Share", "footer"], "description": "Non-finalizing actions in the footer" },
+        { "id": "a3", "type": "report_finding", "topic": "Accessibility", "must_mention_any": ["decorative"], "must_anchor_on": ["Image", "alt"], "description": "alt ignored because decorative defaults to true" },
+        { "id": "a4", "type": "finding_count_max", "max": 5, "description": "No over-flagging" }
+      ]
+    },
+    {
+      "id": "rev-007",
+      "mode": "Review",
+      "prompt": "Review this controller against the Fiori guidelines.",
+      "fixture": "fixtures/gap-fcl.controller.js",
+      "assertions": [
+        { "id": "a1", "type": "report_finding", "topic": "Shell and Navigation", "must_mention_any": ["router", "navTo", "{layout}"], "must_anchor_on": ["setLayout", "addMidColumnPage"], "description": "FCL layout set manually instead of via the router" },
+        { "id": "a2", "type": "report_finding", "topic": "Shell and Navigation", "must_mention_any": ["FlexibleColumnLayoutSemanticHelper", "getNextUIState"], "must_anchor_on": ["TwoColumnsMidExpanded", "setLayout"], "description": "Hard-coded layout instead of the semantic helper" }
+      ]
+    },
+    {
+      "id": "rev-008",
+      "mode": "Review",
+      "prompt": "Review this view against the Fiori guidelines.",
+      "fixture": "fixtures/ok-toolpage.view.xml",
+      "assertions": [
+        { "id": "a1", "type": "report_empty", "description": "ToolPage + ShellBar + sap.tnt.SideNavigation is correct" },
+        { "id": "a2", "type": "must_not_mention", "strings": ["sap.f.SideNavigation", "use sap.f.ShellBar instead"], "description": "No wrong namespace suggestion, no false ShellBar finding" }
+      ]
+    },
+    {
+      "id": "rev-009",
+      "mode": "Review",
+      "prompt": "Review this view against the Fiori guidelines.",
+      "fixture": "fixtures/ok-dynamicpage.view.xml",
+      "assertions": [
+        { "id": "a1", "type": "report_empty", "description": "Correct DynamicPage: fitContent with auto-row grid table, finalizing footer, GenericTag, meaningful Image" },
+        { "id": "a2", "type": "must_not_mention", "strings": ["MultiToggle", "set fitContent to false", "decorative=\"false\" is missing"], "description": "No false positives on the correctly configured parts" }
+      ]
+    },
+    {
+      "id": "rev-010",
+      "mode": "Review",
+      "prompt": "Review this controller against the Fiori guidelines.",
+      "fixture": "fixtures/ok-fcl.controller.js",
+      "assertions": [
+        { "id": "a1", "type": "report_empty", "description": "Router + semantic helper navigation is correct" },
+        { "id": "a2", "type": "must_not_mention", "strings": ["setLayout"], "description": "No manual-layout finding" }
+      ]
+    }
+  ]
+}
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-dynamicpage.view.xml b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-dynamicpage.view.xml
new file mode 100644
index 0000000..69b4eab
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-dynamicpage.view.xml
@@ -0,0 +1,43 @@
+<mvc:View
+	controllerName="my.procurement.controller.Suppliers"
+	xmlns:mvc="sap.ui.core.mvc"
+	xmlns="sap.m"
+	xmlns:f="sap.f">
+	<f:DynamicPage id="supplierPage" fitContent="true" showFooter="true">
+		<f:title>
+			<f:DynamicPageTitle>
+				<f:heading>
+					<Title text="Suppliers" />
+				</f:heading>
+			</f:DynamicPageTitle>
+		</f:title>
+		<f:header>
+			<f:DynamicPageHeader>
+				<HBox>
+					<Image src="img/supplier-map.png" alt="Map of supplier locations" width="20rem" />
+				</HBox>
+			</f:DynamicPageHeader>
+		</f:header>
+		<f:content>
+			<Table id="supplierList" items="{/Suppliers}">
+				<columns>
+					<Column><Text text="Supplier" /></Column>
+					<Column><Text text="Country" /></Column>
+				</columns>
+				<items>
+					<ColumnListItem>
+						<Text text="{Name}" />
+						<Text text="{Country}" />
+					</ColumnListItem>
+				</items>
+			</Table>
+		</f:content>
+		<f:footer>
+			<OverflowToolbar>
+				<ToolbarSpacer />
+				<Button text="Export" press=".onExport" />
+				<Button text="Share" press=".onShare" />
+			</OverflowToolbar>
+		</f:footer>
+	</f:DynamicPage>
+</mvc:View>
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-fcl.controller.js b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-fcl.controller.js
new file mode 100644
index 0000000..aba9f27
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-fcl.controller.js
@@ -0,0 +1,24 @@
+sap.ui.define([
+	"sap/ui/core/mvc/Controller",
+	"sap/ui/core/mvc/XMLView"
+], function (Controller, XMLView) {
+	"use strict";
+
+	return Controller.extend("my.procurement.controller.OrderList", {
+
+		onListItemPress: function (oEvent) {
+			var oFCL = this.getView().getParent().getParent();
+			var sPath = oEvent.getSource().getBindingContext().getPath();
+
+			XMLView.create({ viewName: "my.procurement.view.OrderDetail" }).then(function (oDetailView) {
+				oDetailView.bindElement(sPath);
+				oFCL.addMidColumnPage(oDetailView);
+				oFCL.setLayout("TwoColumnsMidExpanded");
+			});
+		},
+
+		onCloseDetail: function () {
+			this.getView().getParent().getParent().setLayout("OneColumn");
+		}
+	});
+});
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-inputs-actions.view.xml b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-inputs-actions.view.xml
new file mode 100644
index 0000000..d309f84
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-inputs-actions.view.xml
@@ -0,0 +1,22 @@
+<mvc:View
+	controllerName="my.procurement.controller.OrderCreate"
+	xmlns:mvc="sap.ui.core.mvc"
+	xmlns="sap.m"
+	xmlns:form="sap.ui.layout.form">
+	<Page id="createPage" title="Create Purchase Order">
+		<form:SimpleForm editable="true" layout="ColumnLayout">
+			<Label text="Supplier" />
+			<Input value="{/supplier}" />
+			<Label text="Delivery Date" />
+			<Input value="{/deliveryDate}" placeholder="YYYY-MM-DD" />
+		</form:SimpleForm>
+		<footer>
+			<OverflowToolbar>
+				<ToolbarSpacer />
+				<Button text="Save" type="Emphasized" press=".onSave" />
+				<Button text="Save and New" type="Emphasized" press=".onSaveAndNew" />
+				<Button text="Cancel" type="Ghost" press=".onCancel" />
+			</OverflowToolbar>
+		</footer>
+	</Page>
+</mvc:View>
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-messages.controller.js b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-messages.controller.js
new file mode 100644
index 0000000..198e6f5
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-messages.controller.js
@@ -0,0 +1,33 @@
+sap.ui.define([
+	"sap/ui/core/mvc/Controller",
+	"sap/m/Dialog",
+	"sap/m/Text",
+	"sap/m/Button",
+	"sap/m/MessageStrip"
+], function (Controller, Dialog, Text, Button, MessageStrip) {
+	"use strict";
+
+	return Controller.extend("my.procurement.controller.OrderEdit", {
+
+		onSaveError: function (oError) {
+			var oDialog = new Dialog({
+				title: "Error",
+				content: new Text({ text: oError.message }),
+				beginButton: new Button({
+					text: "OK",
+					press: function () {
+						oDialog.close();
+					}
+				})
+			});
+			oDialog.open();
+		},
+
+		onSaveSuccess: function () {
+			this.byId("messageArea").addContent(new MessageStrip({
+				text: "Purchase order saved",
+				type: "Success"
+			}));
+		}
+	});
+});
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-shell.view.xml b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-shell.view.xml
new file mode 100644
index 0000000..930ebe3
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-shell.view.xml
@@ -0,0 +1,30 @@
+<mvc:View
+	controllerName="my.procurement.controller.App"
+	xmlns:mvc="sap.ui.core.mvc"
+	xmlns="sap.m">
+	<App id="app">
+		<Page id="mainPage">
+			<customHeader>
+				<Bar id="appHeader">
+					<contentLeft>
+						<Image src="img/logo.png" height="2rem" />
+						<Title text="Procurement" />
+					</contentLeft>
+					<contentRight>
+						<Button icon="sap-icon://bell" tooltip="Notifications" press=".onNotifications" />
+						<Avatar initials="JD" displaySize="XS" press=".onProfile" />
+					</contentRight>
+				</Bar>
+			</customHeader>
+			<HBox>
+				<List id="sideMenu" width="15rem" mode="SingleSelectMaster" selectionChange=".onMenuSelect">
+					<StandardListItem title="Home" icon="sap-icon://home" />
+					<StandardListItem title="Purchase Orders" icon="sap-icon://sales-order" />
+					<StandardListItem title="Suppliers" icon="sap-icon://supplier" />
+					<StandardListItem title="Reports" icon="sap-icon://business-objects-experience" />
+				</List>
+				<NavContainer id="mainContent" width="100%" />
+			</HBox>
+		</Page>
+	</App>
+</mvc:View>
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-sidenav-namespace.view.xml b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-sidenav-namespace.view.xml
new file mode 100644
index 0000000..54219ba
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-sidenav-namespace.view.xml
@@ -0,0 +1,23 @@
+<mvc:View
+	controllerName="my.procurement.controller.App"
+	xmlns:mvc="sap.ui.core.mvc"
+	xmlns="sap.m"
+	xmlns:f="sap.f"
+	xmlns:tnt="sap.tnt">
+	<tnt:ToolPage id="toolPage">
+		<tnt:header>
+			<f:ShellBar title="Procurement" homeIcon="img/logo.png" showNotifications="true" />
+		</tnt:header>
+		<tnt:sideContent>
+			<f:SideNavigation id="sideNavigation" itemSelect=".onItemSelect">
+				<tnt:NavigationList>
+					<tnt:NavigationListItem text="Home" icon="sap-icon://home" key="home" />
+					<tnt:NavigationListItem text="Purchase Orders" icon="sap-icon://sales-order" key="orders" />
+				</tnt:NavigationList>
+			</f:SideNavigation>
+		</tnt:sideContent>
+		<tnt:mainContents>
+			<NavContainer id="mainContent" />
+		</tnt:mainContents>
+	</tnt:ToolPage>
+</mvc:View>
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-tables.view.xml b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-tables.view.xml
new file mode 100644
index 0000000..e69ddf8
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/gap-tables.view.xml
@@ -0,0 +1,30 @@
+<mvc:View
+	controllerName="my.procurement.controller.Analysis"
+	xmlns:mvc="sap.ui.core.mvc"
+	xmlns="sap.m"
+	xmlns:table="sap.ui.table">
+	<VBox>
+		<table:Table
+			id="supplierTable"
+			rows="{/Suppliers}"
+			selectionMode="MultiToggle">
+			<table:extension>
+				<OverflowToolbar>
+					<Title text="Suppliers" />
+				</OverflowToolbar>
+			</table:extension>
+			<table:columns>
+				<table:Column><Label text="Supplier" /><table:template><Text text="{Name}" /></table:template></table:Column>
+				<table:Column><Label text="Country" /><table:template><Text text="{Country}" /></table:template></table:Column>
+			</table:columns>
+		</table:Table>
+
+		<table:AnalyticalTable id="orderTable" rows="{/PurchaseOrders}">
+			<table:columns>
+				<table:AnalyticalColumn leadingProperty="OrderID"><Label text="Order" /><table:template><Text text="{OrderID}" /></table:template></table:AnalyticalColumn>
+				<table:AnalyticalColumn leadingProperty="Supplier"><Label text="Supplier" /><table:template><Text text="{Supplier}" /></table:template></table:AnalyticalColumn>
+				<table:AnalyticalColumn leadingProperty="Status"><Label text="Status" /><table:template><Text text="{Status}" /></table:template></table:AnalyticalColumn>
+			</table:columns>
+		</table:AnalyticalTable>
+	</VBox>
+</mvc:View>
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/ok-dynamicpage.view.xml b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/ok-dynamicpage.view.xml
new file mode 100644
index 0000000..6ba34cb
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/ok-dynamicpage.view.xml
@@ -0,0 +1,56 @@
+<mvc:View
+	controllerName="my.procurement.controller.SupplierEdit"
+	xmlns:mvc="sap.ui.core.mvc"
+	xmlns="sap.m"
+	xmlns:f="sap.f"
+	xmlns:table="sap.ui.table"
+	xmlns:plugins="sap.ui.table.plugins">
+	<f:DynamicPage id="supplierPage" fitContent="true" showFooter="{ui>/editMode}">
+		<f:title>
+			<f:DynamicPageTitle>
+				<f:heading>
+					<Title text="{Name}" />
+				</f:heading>
+				<f:expandedContent>
+					<GenericTag text="Open Orders" status="Warning">
+						<value>
+							<ObjectNumber number="{OpenOrders}" emphasized="false" />
+						</value>
+					</GenericTag>
+				</f:expandedContent>
+				<f:actions>
+					<Button text="Edit" type="Emphasized" press=".onEdit" visible="{= !${ui>/editMode} }" />
+				</f:actions>
+			</f:DynamicPageTitle>
+		</f:title>
+		<f:header>
+			<f:DynamicPageHeader>
+				<Image src="{LogoUrl}" decorative="false" alt="{Name} logo" height="3rem" />
+			</f:DynamicPageHeader>
+		</f:header>
+		<f:content>
+			<table:Table id="orderTable" rows="{Orders}" rowMode="Auto">
+				<table:extension>
+					<OverflowToolbar>
+						<Title text="Orders" />
+					</OverflowToolbar>
+				</table:extension>
+				<table:dependents>
+					<plugins:MultiSelectionPlugin />
+				</table:dependents>
+				<table:columns>
+					<table:Column><Label text="Order" /><table:template><Text text="{OrderID}" /></table:template></table:Column>
+					<table:Column><Label text="Status" /><table:template><ObjectStatus text="{Status}" state="{StatusState}" /></table:template></table:Column>
+				</table:columns>
+			</table:Table>
+		</f:content>
+		<f:footer>
+			<OverflowToolbar>
+				<DraftIndicator id="draftIndicator" />
+				<ToolbarSpacer />
+				<Button text="Save" type="Emphasized" press=".onSave" />
+				<Button text="Cancel" press=".onCancel" />
+			</OverflowToolbar>
+		</f:footer>
+	</f:DynamicPage>
+</mvc:View>
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/ok-fcl.controller.js b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/ok-fcl.controller.js
new file mode 100644
index 0000000..9847574
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/ok-fcl.controller.js
@@ -0,0 +1,28 @@
+sap.ui.define([
+	"sap/ui/core/mvc/Controller",
+	"sap/f/FlexibleColumnLayoutSemanticHelper"
+], function (Controller, FlexibleColumnLayoutSemanticHelper) {
+	"use strict";
+
+	return Controller.extend("my.procurement.controller.OrderList", {
+
+		onInit: function () {
+			this.oRouter = this.getOwnerComponent().getRouter();
+		},
+
+		_getHelper: function () {
+			var oFCL = this.getOwnerComponent().getRootControl().byId("fcl");
+			return FlexibleColumnLayoutSemanticHelper.getInstanceFor(oFCL, { maxColumnsCount: 2 });
+		},
+
+		onListItemPress: function (oEvent) {
+			var sOrderId = oEvent.getSource().getBindingContext().getProperty("OrderID");
+			var oNextUIState = this._getHelper().getNextUIState(1);
+
+			this.oRouter.navTo("detail", {
+				layout: oNextUIState.layout,
+				orderId: sOrderId
+			});
+		}
+	});
+});
diff --git a/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/ok-toolpage.view.xml b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/ok-toolpage.view.xml
new file mode 100644
index 0000000..6d85db9
--- /dev/null
+++ b/plugins/ui5/skills/ui5-fiori-guidelines/tests/fixtures/ok-toolpage.view.xml
@@ -0,0 +1,33 @@
+<mvc:View
+	controllerName="my.procurement.controller.App"
+	xmlns:mvc="sap.ui.core.mvc"
+	xmlns="sap.m"
+	xmlns:f="sap.f"
+	xmlns:tnt="sap.tnt">
+	<tnt:ToolPage id="toolPage">
+		<tnt:header>
+			<f:ShellBar
+				title="Procurement"
+				homeIcon="img/logo.png"
+				showNotifications="true"
+				showProductSwitcher="true"
+				productSwitcherPressed=".onProductSwitcher">
+				<f:profile>
+					<Avatar initials="JD" />
+				</f:profile>
+			</f:ShellBar>
+		</tnt:header>
+		<tnt:sideContent>
+			<tnt:SideNavigation id="sideNavigation" itemSelect=".onItemSelect">
+				<tnt:NavigationList>
+					<tnt:NavigationListItem text="Home" icon="sap-icon://home" key="home" />
+					<tnt:NavigationListItem text="Purchase Orders" icon="sap-icon://sales-order" key="orders" />
+					<tnt:NavigationListItem text="Suppliers" icon="sap-icon://supplier" key="suppliers" />
+				</tnt:NavigationList>
+			</tnt:SideNavigation>
+		</tnt:sideContent>
+		<tnt:mainContents>
+			<NavContainer id="mainContent" />
+		</tnt:mainContents>
+	</tnt:ToolPage>
+</mvc:View>