# mobile-ux-optimizer

Скилл помогает адаптировать веб-интерфейсы под смартфоны: настраивает safe area, переводит вёрстку на dvh и увеличивает области клика под тач-экраны.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 498 установок · ★ 254
- Автор: curiositech
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/curiositech/some_claude_skills/tree/HEAD/.claude/skills/mobile-ux-optimizer/SKILL.md
- Обновлён: 2026-09-06
- HTML: https://affpapa.org/nevibecode/skills/mobile-ux-optimizer

## Что делает

Скилл учит агента верстать интерфейсы по принципу mobile-first: от базовой мобильной разметки вверх к экранам от 768px. Он подставляет единицы `100dvh` вместо `100vh`. Так адресная строка мобильного браузера перестаёт обрезать контент страницы. Для экранов с вырезами добавляется метатег `viewport-fit=cover` и безопасные отступы `env(safe-area-inset-*)` под чёлку и системную полосу навигации.

Внутри заложены стандарты кликабельных зон: минимум 44×44 точки по рекомендациям Apple и 48×48dp по правилам Material Design. Скилл генерирует готовые React-компоненты мобильной навигации. Среди них нижняя панель со служебными классами вроде `.pb-safe` и выдвижная шторка с блокировкой скролла страницы. Для жестов предусмотрены хуки `useSwipe` и `usePullToRefresh`.

Скилл бесполезен для нативных приложений на Swift или React Native, потому что он заточен исключительно под веб в браузере. Вопросы общего синтаксиса Tailwind или настройки service worker для PWA автор также выносит в отдельные навыки.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill mobile-ux-optimizer -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/mobile-ux-optimizer/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/mobile-ux-optimizer/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill mobile-ux-optimizer -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/mobile-ux-optimizer/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill mobile-ux-optimizer -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/mobile-ux-optimizer/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install curiositech/some_claude_skills mobile-ux-optimizer
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/mobile-ux-optimizer/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill mobile-ux-optimizer -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/curiositech/some_claude_skills --path .claude/skills/mobile-ux-optimizer
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/mobile-ux-optimizer/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill mobile-ux-optimizer -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/curiositech/some_claude_skills/tree/HEAD/.claude/skills/mobile-ux-optimizer/SKILL.md

## Когда брать
- адаптировать высоту экранов под плавающие панели браузера через `100dvh`
- настроить отступы `safe-area-inset` под чёлки и домашний индикатор
- увеличить размеры тач-таргетов до стандартов 44–48 пикселей
- собрать адаптивную нижнюю навигацию или шторку меню на React
- привязать обработку свайпов и pull-to-refresh на тач-экранах

## Примеры запросов агенту
- Исправь мобильное меню: добавь отступы под safe area и сделай кнопки высотой от 44px
- Экран обрезается мобильным браузером, переведи вёрстку с 100vh на 100dvh
- Сделай нижнюю панель навигации для смартфона на Tailwind с классом pb-safe

## Похожие
- [mobile-design](https://affpapa.org/nevibecode/skills/manutej-mobile-design.md) — скилл · 545 установок
- [mobile-native](https://affpapa.org/nevibecode/skills/mobile-native.md) — скилл · 86600 установок
- [build-mobile-threejs-games](https://affpapa.org/nevibecode/skills/build-mobile-threejs-games.md) — скилл · 1300 установок
- [godot-platform-mobile](https://affpapa.org/nevibecode/skills/godot-platform-mobile.md) — скилл · 421 установка
- [mobile-principles](https://affpapa.org/nevibecode/skills/mobile-principles.md) — скилл · 974 установки
- [tailwindcss-mobile-first](https://affpapa.org/nevibecode/skills/tailwindcss-mobile-first.md) — скилл · 2100 установок

Из того же набора: [curiositech/some_claude_skills](https://affpapa.org/nevibecode/by/curiositech/some_claude_skills.md) — 20 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md