# Device Frames

> CSS-рамки iOS, Android, окно macOS и браузера вокруг макета. Триггеры: «в iPhone», «iOS frame», «browser frame».

- Skill: `jhamidun/device-frames` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add jhamidun/device-frames`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jhamidun/device-frames/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: JHamidun (https://skillmd.com/u/jhamidun)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/jhamidun/device-frames

---


# Device frames

Чистые CSS+SVG рамки. Никаких внешних библиотек.

## Что есть в `templates/`

- `ios-frame.html` — iPhone-style рамка с Dynamic Island, статус-баром (время, сеть, батарея), home-indicator. Размер screen: 390×844 (iPhone 14).
- `android-frame.html` — Android-style рамка с notification bar и системными кнопками. Размер: 412×892.
- `macos-window.html` — окно macOS с traffic-lights (красный/жёлтый/зелёный) и заголовком.
- `browser-window.html` — окно браузера с табами, адресной строкой.

Каждый шаблон — одиночный HTML-файл, который можно либо открыть напрямую и заменить контент внутри `.frame-screen`, либо через iframe встроить в свой макет.

## Использование

Самый простой способ — копируй HTML рамки и заменяй её содержимое своим:

```html
<div class="ios-frame">
  <div class="ios-status-bar">...</div>
  <div class="ios-screen">
    <!-- ВОТ СЮДА твой макет -->
  </div>
  <div class="ios-home-indicator"></div>
</div>
```

## Важные размеры

- **iPhone safe-area:** статус-бар 47px сверху, home-indicator 34px снизу. Контент должен дышать в этих границах.
- **Android system bars:** 24px сверху, 48px снизу для жестовой навигации.
- **Хит-таргеты:** не меньше 44×44px (iOS) / 48×48dp (Android).

## Реалистичность

- В статус-баре пиши осмысленное время — не «9:41» (это шаблон Apple). Пиши «09:24» или другое произвольное.
- Уровень батареи — 60–90%. Не 100% (выглядит фейково) и не 5% (отвлекает).
- Сигнал/wifi — full bars.
- Динамический Island — оставь чёрным, если в твоём прототипе нет активного приложения, требующего его.

## Что НЕ нужно делать

- Не рисуй кнопку Home на новых iPhone — её нет с 2017.
- Не рисуй три точки в меню Android Material 3 в местах, где обычно гамбургер.
- Не используй iOS-рамку для Android-макета и наоборот.