# mobile-principles

Набор правил для мобильного интерфейса: размеры тап-зон, отказ от hover, зоны большого пальца, safe area и жесты. Подключается, когда агент видит мобильную платформу.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 974 установки · ★ 677
- Автор: AThevon
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/AThevon/genjutsu/tree/HEAD/skills/_jutsu/mobile-principles/SKILL.md
- Обновлён: 2026-10-05
- HTML: https://affpapa.org/nevibecode/skills/mobile-principles

## Что делает

Скилл даёт агенту контекст по мобильному UX, чтобы тот не переносил десктопные привычки в телефон. Внутри — таблицы минимальных размеров тап-таргетов для iOS, watchOS, Android и веба, доктрина «no-hover» с примерами на CSS, SwiftUI и Compose, зоны большого пальца по Хуберу, работа с safe area и канонические жесты вроде свайпа назад и pull-to-refresh. Отдельный блок — reduced motion с готовыми сниппетами для SwiftUI, UIKit и Compose.

Правила краткие, глубокие разборы вынесены в `references/`. Есть оговорка про версионную чувствительность: имена API и утверждения о поддержке в браузерах сверялись с первоисточниками 2026-09-08, и если дата старая, автор советует перепроверить перед тем, как опираться на конкретную версию. Это стоит держать в голове, если проект живёт на свежих SDK.

Скилл ставится в Claude, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для Claude файл ложится в `~/.claude/skills/mobile-principles/SKILL.md`, для Cursor — в `.cursor/skills/mobile-principles/SKILL.md`. Ничего дополнительно настраивать не нужно.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill mobile-principles -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill mobile-principles -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill mobile-principles -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install AThevon/genjutsu mobile-principles
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill mobile-principles -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/AThevon/genjutsu --path skills/_jutsu/mobile-principles
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill mobile-principles -a opencode
```

### Claude.ai

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

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

## Когда брать
- проверить, что кнопки на экране не меньше платформенного минимума
- убрать интерфейс, который открывается только по наведению
- перенести главное действие в нижнюю половину экрана
- учесть вырез и домашний индикатор на iPhone
- сделать анимации отключаемыми для тех, кто просил reduced motion

## Примеры запросов агенту
- Проверь этот экран по mobile-principles: хватает ли тап-зонам размера?
- Перепиши hover-стили карточки так, чтобы на тач-устройствах они не были основным триггером
- Разложи кнопки по зонам большого пальца и скажи, что уехало наверх зря

## Похожие
- [Mobile App Design Standards](https://affpapa.org/nevibecode/skills/mobile-app-design-standards.md) — скилл · 906 установок
- [mobile-touch](https://affpapa.org/nevibecode/skills/mobile-touch.md) — скилл · 2400 установок
- [imagegen-frontend-mobile](https://affpapa.org/nevibecode/skills/imagegen-frontend-mobile.md) — скилл · 1700 установок
- [mobile-app-developer](https://affpapa.org/nevibecode/agents/mobile-app-developer.md) — субагент · 1552 установки
- [app-ui-design](https://affpapa.org/nevibecode/skills/app-ui-design.md) — скилл · 636 установок

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

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

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