docs(cypress): add skill for Cypress tests

.claude/skills/cypress

@@ -0,0 +1 @@
+../../skills/cypress

.cursor/rules/cypress-skill.mdc

@@ -0,0 +1,22 @@
+---
+description: UI5 Web Components Cypress testing conventions. Consult before writing or editing a Cypress spec.
+globs:
+  - packages/**/cypress/specs/**/*.cy.tsx
+  - packages/**/cypress/support/**/*.ts
+alwaysApply: false
+---
+
+# UI5 Web Components — Cypress Skill
+
+Full testing conventions — mounting, selectors, real events, custom commands, assertions, i18n, and flaky-test recipes — live in the **Cypress skill** at `skills/cypress/SKILL.md`.
+
+Before writing or editing a Cypress spec, open `skills/cypress/SKILL.md`, find your task in the routing table at the top, and open the **one** reference file it names. Do not read every file.
+
+Non-negotiables:
+
+- Never run the full test suite. Run one spec: `yarn test:cypress:single cypress/specs/<Component>.cy.tsx`.
+- Select by attribute, never tag name: `[ui5-button]` not `ui5-button` — in selectors and `.find()`.
+- Use real events: `realClick()`, `realPress()`, `realType()` — never `.click()` or `.type()`.
+- `realPress` and `realType` take no subject — call them as separate statements after focusing.
+- Never use `cy.wait(<number>)` — assert the condition instead; use `cy.waitRenderFinished()` for render cycles.
+- `cy.ui5DOMRef()` is declared but unimplemented — do not call it.

.github/instructions/cypress-tests.instructions.md

@@ -0,0 +1,22 @@
+---
+applyTo: "packages/*/cypress/specs/**/*.cy.tsx,packages/*/cypress/support/commands/**/*.ts"
+---
+
+# Cypress Testing Instructions for UI5 Web Components
+
+When writing, modifying, or reviewing Cypress component tests (`*.cy.tsx`) or
+custom Cypress commands in this repository, follow the project's Cypress testing
+skill:
+
+- **Primary guidance:** [`skills/cypress/SKILL.md`](../../skills/cypress/SKILL.md)
+- **Custom commands:** [`skills/cypress/references/COMMANDS.md`](../../skills/cypress/references/COMMANDS.md)
+- **Reviewing existing specs:** [`skills/cypress/references/REVIEWING.md`](../../skills/cypress/references/REVIEWING.md)
+
+## Key rules (see the skill for full details)
+
+- Use **real events** (`cy.realClick()`, `cy.realPress()`, `cy.realType()`) instead of synthetic `.click()` / `.type()`.
+- Select components by **attribute notation** — `cy.get("[ui5-button]")`, never the tag name.
+- Type element boundaries with generics — `cy.get<Button>("[ui5-button]")`.
+- Await async base-API calls via `cy.wrap({ fn }).then(async ({ fn }) => { await fn(args); })` and reset global config (language, theme) in `afterEach`.
+- Assert on **public props** and **rendered shadow DOM**, not private internals — every test needs a meaningful assertion beyond `"exist"`.
+- Extract repeated interaction sequences into `ui5<Component><Action>` custom commands.

docs/06-Skills.md

@@ -14,6 +14,7 @@ UI5 Web Components ships [Agent Skills](https://agentskills.io) — portable, st
 |-------|-------------|
 | **styling** | How to customize and style UI5 Web Components — CSS shadow parts, custom states, CSS variables, and tag-level styling |
 | **accessibility** | How to make UI5 Web Components applications accessible — accessibility APIs, label-input relationships, invisible messaging, keyboard handling, and high contrast themes |
+| **cypress** | How to write and modify Cypress component tests for UI5 Web Components — mounting with JSX, real user events, attribute selectors, spying on events, async configuration, mobile simulation, and custom commands |
 
 ## Installation
 

packages/base/AGENTS.md

@@ -155,31 +155,11 @@ this.fireDecoratorEvent("change", { value: this.value });
 
 ## Testing with Cypress
 
-Tests use Cypress component testing with JSX mounting:
+All component tests are Cypress component tests written in TSX. The full testing conventions — mounting, selectors, real events, custom commands, assertions, i18n, and flaky-test recipes — live in the **Cypress skill** at [`skills/cypress/SKILL.md`](../../skills/cypress/SKILL.md).
 
-```typescript
-import MyButton from "../../src/MyButton.js";
-
-describe("MyButton", () => {
-  it("fires click event", () => {
-    cy.mount(<MyButton>Click me</MyButton>);
-
-    // Use attribute selector for scoping safety
-    cy.get("[my-button]").then(($btn) => {
-      $btn[0].addEventListener("click", cy.stub().as("clicked"));
-    });
-
-    // Use cypress-real-events for realistic interaction
-    cy.get("[my-button]").realClick();
-    cy.get("@clicked").should("have.been.called");
-  });
-});
-```
+**When to load it:** any time you are writing, modifying, or debugging a Cypress spec.
 
-**Key testing patterns:**
-- Use `cypress-real-events`: `realClick()`, `realPress()`, `realType()` instead of Cypress simulated events
-- Always use attribute selectors `[my-component]` not tag selectors `my-component`
-- Use `.only` to run a single test case when debugging, remove before committing
+**How to use it:** open `SKILL.md`, read the routing table at the top, then open **only** the one reference file it names for your task. Do not read every file.
 
 ## Summary of Rules