gesture-patterns — скилл для Claude Code о жестах
Проектирует жесты для сенсорного и указательного ввода: свайпы, перетаскивание и долгое нажатие. Нужен при создании интерфейсов с жестовым управлением.
npx skills add Owl-Listener/designer-skills --skill gesture-patterns -a claude-codeЧто делает gesture-patterns
Скилл помогает спроектировать касания, двойные касания, долгое нажатие, свайпы, масштабирование, поворот, перетаскивание и жест обновления. Он связывает каждый жест с действием: выбором, навигацией, скрытием элемента, изменением значения или вызовом контекстного меню.
В рекомендациях есть видимые подсказки при первом использовании, мгновенный визуальный отклик, индикаторы хода жеста и подтверждение завершения. Для активации предлагается порог перемещения 10-15px, а для долгого нажатия типичный порог времени составляет 500ms. Скилл также разбирает конфликты прокрутки со свайпом, касания с долгим нажатием и масштабирования с перетаскиванием.
Для каждого жеста нужна альтернатива в кнопке или меню, анимации должны учитывать reduced-motion. Системные жесты имеют приоритет, поэтому это повод проверить, не перехватывает ли интерфейс жест возврата или вытягивание уведомлений. Для стандартных жестов iOS и Android автор советует использовать platform-conventions из ui-design.
Какие задачи решает
- спроектировать свайп для навигации или скрытия элемента
- развести прокрутку и горизонтальный свайп
- добавить видимые подсказки к скрытым жестам
- задать пороги для перетаскивания и долгого нажатия
- дать кнопку или меню вместо жестового действия
Примеры запросов агенту
- Спроектируй жесты для списка: свайп должен открывать действия, а прокрутка не должна с ним конфликтовать.
- Проверь доступность перетаскивания карточек и добавь альтернативу без жестов.
- Предложи обратную связь и пороги для масштабирования изображения касанием.
Как установить gesture-patterns
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill gesture-patterns -a claude-code2Вручную: положить файлы
~/.claude/skills/gesture-patterns/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/gesture-patterns/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill gesture-patterns -a codex2Вручную: положить файлы
.agents/skills/gesture-patterns/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill gesture-patterns -a cursor2Вручную: положить файлы
.cursor/skills/gesture-patterns/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills gesture-patterns2Вручную: положить файлы
.github/skills/gesture-patterns/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill gesture-patterns -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path interaction-design/skills/gesture-patternsВручную: положить файлы
.devin/skills/gesture-patterns/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill gesture-patterns -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о gesture-patterns
Как установить gesture-patterns в Claude Code?
Выполните npx skills add Owl-Listener/designer-skills --skill gesture-patterns -a claude-code, затем повторите npx skills add Owl-Listener/designer-skills --skill gesture-patterns -a claude-code. Файл скилла расположен в ~/.claude/skills/gesture-patterns/SKILL.md.
Что делает gesture-patterns?
Скилл помогает продумать поведение жестов на сенсорных экранах и с указателем. Он охватывает подсказки, визуальную обратную связь, пороги срабатывания, конфликты жестов и доступные альтернативы.
Как учесть доступность жестового интерфейса?
Для каждого жеста нужен вариант через кнопку или меню. Скилл также предлагает поддержать switch control и voice control, документировать нестандартные жесты и учитывать reduced-motion.
Исходный текст
SKILL.md · MIT
--- name: gesture-patterns description: Design gesture interactions for touch and pointer — swipe, drag, long-press, and their discoverability. Use when input is gestural. For OS-standard gestures on iOS and Android, use `platform-conventions` (ui-design). --- # Gesture Patterns You are an expert in designing intuitive gesture-based interactions. ## What You Do You design gesture interactions that feel natural and discoverable across touch and pointer devices. ## Core Gestures - **Tap**: Select, activate, toggle - **Double tap**: Zoom, like/favorite - **Long press**: Context menu, reorder mode, preview - **Swipe**: Navigate, dismiss, reveal actions - **Pinch**: Zoom in/out - **Rotate**: Rotate content (maps, images) - **Drag**: Move, reorder, adjust values - **Pull**: Refresh content (pull-to-refresh) ## Gesture Design Rules ### Discoverability - Pair gestures with visible affordances - Provide visual hints on first use - Always have a non-gesture alternative (button/menu) ### Feedback - Immediate visual response when gesture starts - Progress indication during gesture - Threshold indicators (snap points, rubber-banding) - Completion confirmation ### Thresholds - Minimum distance before gesture activates (10-15px) - Velocity thresholds for flick/swipe - Direction lock (horizontal vs vertical) - Cancel zone (return to start to abort) ## Conflict Resolution - Scroll vs swipe: direction lock after initial movement - Tap vs long press: time threshold (500ms typical) - Pinch vs drag: number of touch points - System gestures take priority (back swipe, notification pull) ## Accessibility - Every gesture must have a non-gesture alternative - Support switch control and voice control - Custom gestures should be documented - Respect reduced-motion preferences for gesture animations ## Best Practices - Follow platform conventions - Keep gestures simple (one or two fingers) - Provide undo for destructive gesture actions - Test with one-handed use - Don't require precision timing
© Owl-Listener · MIT · Owl-Listener/designer-skills
