# ui-mobile

Задаёт агенту правила мобильного интерфейса: минимальный размер нажатия 44×44, контраст по WCAG 2.1 AA, видимые границы кнопок.

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

## Что делает

Скилл включается, когда агент правит файлы `**/*.tsx`, `**/*.jsx`, `ios/**`, `android/**` или `**/*.dart`. Внутри — набор обязательных проверок для React Native: размер интерактивных элементов не меньше 44×44 points, контраст текста 4.5:1, у каждой кнопки видимая граница или фон, у иконок и картинок — `accessibilityLabel`, у `Pressable` — состояние нажатия.

Кроме правил доступности в скилле есть справочники: различия iOS и Android через `Platform.select`, отступы по сетке 4px, безопасные зоны через `useSafeAreaInsets`, шкала типографики от 34pt для крупных заголовков до 12pt для подписей и семантические цвета с вариантами для тёмной темы.

Правила в разделе доступности помечены как необсуждаемые, поэтому агент будет переписывать уже существующую вёрстку под них. Если в вашем проекте свои дизайн-токены и своя шкала отступов, это повод проверить, не начнёт ли он подменять их значениями из скилла.

## Установка

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

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

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add alinaqi/maggy --skill ui-mobile -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add alinaqi/maggy --skill ui-mobile -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install alinaqi/maggy ui-mobile
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add alinaqi/maggy --skill ui-mobile -a opencode
```

### Claude.ai

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

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

## Когда брать
- проверить размеры кнопок и иконок перед релизом
- подобрать контрастные цвета текста для светлой и тёмной темы
- добавить подписи доступности иконкам без текста
- развести стили под iOS и Android в одном компоненте
- учесть вырезы и системные панели через safe area

## Примеры запросов агенту
- проверь мои кнопки в `src/screens/Checkout.tsx` на минимальный размер нажатия
- добавь accessibilityLabel ко всем иконкам в этом компоненте
- перепиши стили карточки под тёмную тему с контрастом не ниже 4.5:1

## Похожие
- [Mobile App Design Standards](https://affpapa.org/nevibecode/skills/mobile-app-design-standards.md) — скилл · 906 установок
- [frontend-mobile-development-mobile-developer](https://affpapa.org/nevibecode/agents/frontend-mobile-development-mobile-developer.md) — субагент · ★ 41729
- [mobile-app-debugging](https://affpapa.org/nevibecode/skills/secondsky-mobile-app-debugging.md) — скилл · 428 установок
- [senior-mobile](https://affpapa.org/nevibecode/skills/senior-mobile.md) — скилл · 310 установок
- [mobile-touch](https://affpapa.org/nevibecode/skills/mobile-touch.md) — скилл · 2400 установок

Из того же набора: [alinaqi/maggy](https://affpapa.org/nevibecode/by/alinaqi/maggy.md) — 32 карточки

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

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