web-haptics — скилл
Скилл для Claude Code, Cursor и Codex: ставит виброотклик в мобильный веб через библиотеку web-haptics по правилам Apple HIG
- 2 847 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл содержит инструкции и велит агенту поставить npm-пакет web-haptics, после чего агент правит код интерфейса
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/web-hapticsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл содержит инструкции и велит агенту поставить npm-пакет web-haptics, после чего агент правит код интерфейса
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл web-haptics лежит в корне репозитория lochie/web-haptics и обучает агента подключать виброотклик к мобильным веб-интерфейсам. Он велит поставить пакет командой `npm i web-haptics`: у него нет зависимостей, он работает через Web Vibration API, а на платформах без поддержки, например на десктопе, молча ничего не делает. В скилле перечислены типы отклика для вызова `trigger()`. Success, `warning` и `error` сообщают исход действия, `light`, `medium` и `heavy` передают силу удара, `selection` отмечает дискретные шаги. Есть еще пресеты `soft`, `rigid`, `nudge` и `buzz`, а объект `defaultPatterns` отдает их как значения. Примеры подключения даны для React, Vue, Svelte и чистого JavaScript, а в Next.js файл с `useWebHaptics()` помечают `"use client"`. Отдельный раздел переносит правила Apple Human Interface Guidelines. Вибрация дополняет визуальный отклик, и экран обязан работать без нее. Сила сигнала соответствует важности действия, а при асинхронной операции импульс идет в момент прихода результата. Таблица сопоставляет элементы с типами: основная кнопка получает `medium`, переключатель `light`, пикер `selection`, подтвержденный платеж `success`. Перед правкой агент спрашивает, на какие элементы ставить отклик и добавлять ли его в общий компонент или в отдельные места.
Для кого. Фронтенд-разработчикам мобильных веб-приложений, которые хотят, чтобы агент расставил виброотклик на кнопках, формах и переключателях по единым правилам.
Подходит, если
- Мобильная форма сообщает об успехе или ошибке только цветом, а нужен тактильный сигнал в момент ответа сервера
- В интерфейсе есть пикеры, табы и ползунки с шагами: на них агент поставит отклик `selection`
- Один и тот же отклик нужен в проектах на React, Vue и Svelte, и для каждого есть готовый пример подключения
- Перед удалением нужно предупреждение: на подтверждающую кнопку агент повесит `warning`
- Команде хочется правил, при которых вибрация не раздражает, и скилл перечисляет антипаттерны
Не подходит, если
- Приложение рассчитано только на десктоп: библиотека там молча ничего не делает
- Вибрация нужна в нативном iOS- или Android-приложении: скилл учит только веб-библиотеку
- Нужны длинные вибрационные узоры: библиотека рассчитана на короткие импульсы, а длинные скилл считает антипаттерном
- Интерфейс без визуального отклика: скилл требует, чтобы экран работал и без вибрации
Пример запроса к агенту
Добавь виброотклик в форму оплаты: `success` после подтверждения платежа, `error` при ошибке сети, `light` на переключатель сохранения картыОграничения
- Скилл описывает одну библиотеку, web-haptics. Она опирается на Web Vibration API: где его нет, вибрации не будет, и интерфейс обязан работать без нее.
- Команды установки самого скилла в README нет. Файл SKILL.md лежит в корне репозитория, его кладут в каталог навыков агента вручную.
- Перед правкой скилл требует уточнить у пользователя, на какие элементы ставить отклик, поэтому полностью автономно он не работает.
Как отключить. Удалите папку со скиллом из каталога навыков агента. Пакет из проекта убирает `npm uninstall web-haptics`, после этого вызовы `trigger()` придется удалить из кода.
Частые вопросы
Как подключить виброотклик в React с помощью скилла?
Агент выполняет `npm i web-haptics`, импортирует хук `useWebHaptics` из `web-haptics/react` и вызывает `trigger("success")` в обработчике клика. В Next.js файл с хуком помечают `"use client"`.
Какие типы отклика есть в web-haptics?
Для итогов действий служат `success`, `warning` и `error`, для ударов разной силы `light`, `medium` и `heavy`, для шагов выбора `selection`. Дополнительные пресеты называются `soft`, `rigid`, `nudge` и `buzz`.
Работает ли вибрация на десктопе?
Нет. Библиотека использует Web Vibration API и на неподдерживаемых платформах, включая десктоп, молча ничего не делает, поэтому отдельную проверку поддержки добавлять не нужно.
В каких случаях скилл запрещает вибрировать?
При загрузке страницы, при пассивной прокрутке и на каждом касании подряд. Не стоит ставить `error` на события без сбоя и `heavy` на мелкие действия.
Как выбрать тип отклика для кнопки?
Основной кнопке подходит `medium`, второстепенной и переключателю `light`, подтвержденному платежу `success`. Для пикеров, табов и ползунков берут `selection`, а перед удалением, до подтверждения, ставят `warning`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыДва навыка: промпты для продуктовой анимации и верстка сайта, который раскрывается при прокрутке, с шаблонами и чеклистом приемки
Скилл веб-дизайна в стиле Apple: светлый фон, единая белая панель вместо россыпи карточек, стекло только на перекрытиях.
Скиллы креативного кода для Claude Code: движение, микровзаимодействия и визуальные системы для веба, Android и Apple
Скилл запрещает агенту типовой интерфейс с плавающими карточками, градиентами и стеклом и задает обычные размеры, радиусы и тени как у Linear
Скилл оживляет любой рисунок кодом: персонажей, воду, дым, значки и целые сцены в React Native и SwiftUI без ощущения слайд-шоу
Скиллы против шаблонных интерфейсов: сетка, типографика, анимация и отступы, плюс генерация референсов для веба и мобильных
Коротко о README
README короткий: пример установки `npm i web-haptics`, хук для React и ссылка на README пакета с примерами для Vue, Svelte и чистого JavaScript. Дальше идут команды для разработки библиотеки (`pnpm install:all`, `pnpm dev`, `pnpm build`), ссылки на другие проекты автора и благодарности. Лицензия MIT.
Бейдж для README
Исходный SKILL.md
---
name: web-haptics
description: Add haptic feedback to web apps using the web-haptics library. Use when building mobile-facing UIs that need tactile feedback on buttons, toggles, forms, pickers, and other interactive elements.
license: MIT
metadata:
author: lochie
version: "1.0"
---
Install `web-haptics` (`npm i web-haptics`) and add haptic feedback to the app following these rules:
## Package: web-haptics
Repository: https://github.com/lochie/web-haptics | License: MIT | Zero dependencies
Uses the Web Vibration API. Silently no-ops on unsupported platforms (desktop). No error handling or feature detection needed.
## Trigger Types
`trigger()` accepts one of these strings (empty value defaults to a sensible "medium" impact):
Notification (task outcomes):
- "success" -- form saved, payment confirmed, upload complete
- "warning" -- destructive action ahead, approaching limit, irreversible step
- "error" -- validation failure, network error, permission denied
Impact (physical collisions):
- "light" -- small toggle, subtle tap, minor interaction
- "medium" -- button press, card snap-to-position, drop into place
- "heavy" -- major state change, heavy element landed, force press
Selection (discrete stepping):
- "selection" -- picker scroll, stepper increment, slider detent, segment switch
## Framework Imports
React:
```tsx
import { useWebHaptics } from "web-haptics/react";
const haptic = useWebHaptics();
<button onClick={() => haptic.trigger()}>Tap me</button>;
```
Vue: