> ## Documentation Index
> Fetch the complete documentation index at: https://docs.handauncle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Screenshots and media

> Asset guidelines for Handa Uncle docs

## Storage + naming

* Place all static assets in `docs/images/`.
* Use kebab-case filenames that describe the content:
  `app-launch-sequence.png`, `otp-error-log.png`.
* Export at 2x resolution so text remains crisp on high-DPI screens.

## Embedding images

Wrap screenshots in `<Frame>` to keep rounded corners consistent with the site.

```mdx theme={null}
<Frame caption="Send OTP flow in staging">
  <img src="/images/otp-flow.png" alt="Send OTP request log" />
</Frame>
```

Always include descriptive `alt` text that explains what the reader should look
for (use “Screenshot of …” sparingly).

## Videos & demos

Prefer GIF/WebM for short loops (under 15s) and upload longer walkthroughs to an
internal drive, then embed with `<iframe>`:

```mdx theme={null}
<iframe
  className="w-full aspect-video rounded-xl"
  src="https://www.loom.com/embed/your-id"
  title="Langfuse trace triage demo"
  frameBorder="0"
  allow="autoplay; fullscreen"
></iframe>
```

## Redaction guidelines

* Blur customer PIIs (names, emails, phone numbers) unless you’re using test
  accounts documented in `GUEST_USER_CHAT_IMPLEMENTATION.md`.
* Highlight areas of interest with subtle rectangles or callouts—avoid bright
  arrows that clash with the docs theme.

## File size

* Keep images under 1.5 MB when possible. Use `pngquant`/`ImageOptim` before
  committing.
* For huge diagrams, prefer SVG exported from Figma; the docs site handles them
  well and they stay crisp at any zoom level.