web-haptics skill
A skill for Claude Code, Cursor and Codex that adds vibration feedback to the mobile web with the web-haptics library, following Apple HIG
- 2,847 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill holds instructions and tells the agent to install the npm package web-haptics, after which the agent edits interface code
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/web-hapticsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill holds instructions and tells the agent to install the npm package web-haptics, after which the agent edits interface code
This is third-party code. Review the repository files before installing.
What it does
The web-haptics skill sits in the root of the lochie/web-haptics repository and teaches an agent to add vibration feedback to mobile web interfaces. It tells the agent to install the package with `npm i web-haptics`: the package has no dependencies, works through the Web Vibration API and silently does nothing on platforms without support, such as desktop. The skill lists the feedback types for the `trigger()` call. Success, warning and error report the outcome of an action, light, medium and heavy convey impact strength, and selection marks discrete steps. There are also soft, rigid, nudge and buzz presets, and the `defaultPatterns` object returns them as values. Setup examples cover React, Vue, Svelte and vanilla JavaScript, and in Next.js the file with `useWebHaptics()` gets `"use client"`. A separate section carries over Apple Human Interface Guidelines rules. Vibration supplements visual feedback, and the screen has to work without it. Strength matches the importance of the action, and for an async operation the pulse fires when the result arrives. A table maps elements to types: a primary button gets medium, a toggle light, a picker selection, a confirmed payment success. Before editing, the agent asks which elements to target and whether to add feedback in a shared component or at individual call sites.
Who it is for. Frontend developers of mobile web apps who want an agent to place vibration feedback on buttons, forms and toggles by one set of rules.
Good fit when
- A mobile form reports success or error only with color, and you want a tactile pulse the moment the server replies
- The interface has pickers, tabs and sliders with steps: the agent puts the selection feedback on them
- The same feedback is needed in React, Vue and Svelte projects, and each has a ready setup example
- A delete needs a warning: the agent attaches warning to the confirm button
- The team wants rules so vibration does not annoy, and the skill lists the anti-patterns
Not a fit when
- The app targets desktop only: the library silently does nothing there
- You need vibration in a native iOS or Android app: the skill covers only a web library
- You need long vibration patterns: the library is built for short pulses, and the skill lists long ones as an anti-pattern
- The interface has no visual feedback: the skill requires the screen to work without vibration too
Example request
Add vibration feedback to the checkout form: success after the payment is confirmed, error on a network failure, light on the save-card toggleLimitations
- The skill covers one library, web-haptics. It relies on the Web Vibration API: where that is missing there is no vibration, and the interface has to work without it.
- The README has no install command for the skill itself. SKILL.md sits in the repository root and is placed into the agent's skills directory by hand.
- Before editing, the skill requires asking the user which elements to target, so it does not run fully autonomously.
How to disable. Delete the skill folder from the agent's skills directory. `npm uninstall web-haptics` removes the package from the project, after which the `trigger()` calls have to be deleted from the code.
FAQ
How do I add vibration feedback in React with the skill?
The agent runs `npm i web-haptics`, imports the `useWebHaptics` hook from `web-haptics/react` and calls `trigger("success")` in a click handler. In Next.js the file with the hook gets `"use client"`.
Which feedback types does web-haptics have?
Success, warning and error report outcomes, light, medium and heavy convey impact strength, and selection marks selection steps. The extra presets are soft, rigid, nudge and buzz.
Does vibration work on desktop?
No. The library uses the Web Vibration API and silently does nothing on unsupported platforms, desktop included, so you do not need a separate support check.
When does the skill forbid vibrating?
On page load, on passive scrolling and on every single tap. It also advises against error for events that are not errors and heavy for minor actions.
How do I choose a feedback type for a button?
A primary button takes medium, a secondary button and a toggle take light, a confirmed payment takes success. Pickers, tabs and sliders use selection, and a delete before confirmation gets warning.
Discussion
No questions or reviews yet.
Related
SkillsTwo skills: prompts for product animation and a scroll-driven product website, with templates and an acceptance checklist
An Apple-style web design skill: a light ground, one white panel instead of scattered cards, glass only where layers overlap.
Creative coding skills for Claude Code: motion, micro-interactions and visual systems for web, Android and Apple
A skill that bans the stock AI interface with floating cards, gradients and glass and sets plain sizes, radii and shadows like Linear
A skill that animates anything drawn in code: characters, water, smoke, icons and scenes in React Native and SwiftUI
Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile
README in short
The README is short: an install example with `npm i web-haptics`, a React hook and a link to the package README with Vue, Svelte and vanilla JavaScript examples. Library development commands follow (`pnpm install:all`, `pnpm dev`, `pnpm build`), then links to the author's other projects and acknowledgements. MIT license.
README badge
Original 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: