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

@@ -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)