From c86bf8779f44941eb091a4d6f937a935ff724527 Mon Sep 17 00:00:00 2001
From: Nick Shirokov <nick_4312@mail.ru>
Date: Wed, 18 Mar 2026 19:57:25 +0300
Subject: [PATCH] docs(web-test): document showImage and showTitleSlide speech
 in recording.md

- Add showImage/hideImage API docs with style presets and scaling behavior
- Add speech parameter to showTitleSlide docs
- Update example to include title speech and image slide

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .claude/skills/web-test/recording.md | 42 ++++++++++++++++++++++++++--
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/.claude/skills/web-test/recording.md b/.claude/skills/web-test/recording.md
index 60cdd5ab..c4763257 100644
--- a/.claude/skills/web-test/recording.md
+++ b/.claude/skills/web-test/recording.md
@@ -108,6 +108,7 @@ Display a full-screen title slide overlay (gradient background, centered text).
 | `opts.background` | string | dark gradient | CSS background |
 | `opts.color` | string | `'#fff'` | Text color |
 | `opts.fontSize` | number | 36 | Title font size in px |
+| `opts.speech` | string \| false | - | TTS narration text. String = custom text, `true` = use title text, omit/false = no narration |
 
 The overlay covers the entire viewport with `z-index: 999999` and `pointer-events: none`.
 
@@ -115,6 +116,30 @@ The overlay covers the entire viewport with `z-index: 999999` and `pointer-event
 
 Remove the title slide overlay.
 
+### `showImage(imagePath, opts?)`
+
+Display a full-screen image overlay (e.g. presentation slide screenshot). Reads the file, base64-encodes it, and renders as `<img>` in a fixed overlay — captured by CDP screencast automatically.
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `imagePath` | string | required | Path to image file (PNG, JPG, GIF, WebP, SVG) |
+| `opts.style` | `'blur'` \| `'dark'` \| `'light'` \| `'full'` | `'blur'` | Display style preset |
+| `opts.background` | string | - | Custom background (overrides preset) |
+| `opts.shadow` | boolean | preset | Show drop shadow on image |
+| `opts.speech` | string \| false | - | TTS narration text while image is shown |
+
+**Style presets:**
+- `blur` — blurred+dimmed copy of the image as background, centered image with shadow
+- `dark` — dark background (#2a2a2a) with shadow
+- `light` — white background with shadow
+- `full` — image fills entire screen (contain, no crop), black background, no shadow
+
+Images are auto-scaled: small images scale up (min 50% of viewport), large images scale down (max 92%).
+
+### `hideImage()`
+
+Remove the image overlay.
+
 ### `setHighlight(on)`
 
 Enable or disable auto-highlight mode. When enabled, action functions (`navigateSection`, `openCommand`, `clickElement`, `selectValue`, `fillFields`) automatically highlight the target element for 500ms before performing the action.
@@ -153,10 +178,21 @@ Remove the highlight overlay.
 ```js
 await startRecording('recordings/create-order.mp4');
 
-// Title slide — 4 seconds
-await showTitleSlide('Создание заказа клиента', { subtitle: 'Демонстрация' });
-await wait(4);
+// Title slide with narration
+await showTitleSlide('Создание заказа клиента', {
+  subtitle: 'Демонстрация',
+  speech: 'Создание заказа клиента. Демонстрация.'
+});
+await wait(1);
 await hideTitleSlide();
+
+// Presentation slide (optional)
+await showImage('slides/overview.png', {
+  speech: 'На этом слайде показана общая схема процесса'
+});
+await wait(1);
+await hideImage();
+
 setHighlight(true); // enable auto-highlight for all actions
 
 // Steps: caption → pause → action (highlight is automatic)