菜单
Handle EMG pinch (tap-to-activate) and opt into continuous pinch-and-drag in a Meta Display Glasses webapp. Use when the user wants sliders, drawing, maps, drag interactions, or game-style continuous input.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/facebook/meta-wearables-webapp --skill add-gestures命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Add device sensor data to a Meta Display Glasses webapp — IMU (accelerometer, gyroscope, orientation) via DeviceMotionEvent/DeviceOrientationEvent, and GPS location via navigator.geolocation. Use when the user wants motion tracking, compass, level tool, step counter, shake detection, head tracking, or location.
Make a Meta Display Glasses webapp work offline with a Service Worker + Cache API (precache the app shell, cache-first fetch, online/offline UI). Use when the user wants offline support or resilience to flaky Wi-Fi.
Add text entry to a Meta Display Glasses webapp. Standard HTML inputs open the on-glasses composer (handwriting + voice) when focused and tapped. Use when the user wants a text field, search box, form input, or notes area.
正在显示 SKILL.md
| name | add-gestures |
| description | Handle EMG pinch (tap-to-activate) and opt into continuous pinch-and-drag in a Meta Display Glasses webapp. Use when the user wants sliders, drawing, maps, drag interactions, or game-style continuous input. |
| argument-hint | [interaction: tap|drag] |
Before generating or modifying any code, read both:
../../references/display-guidelines.md../../references/performance-guidelines.mdThese define the non-negotiable display physics, input model, and performance budgets for Meta Display Glasses webapps. Do not skip — generated UI that ignores these will fail on-device.
If these reference files are unavailable in an isolated eval, do not search /, home directories, or unrelated workspaces. Apply the requirements already present in this skill and continue.
The EMG wrist band gives the wearer two interactions: a pinch (discrete select) and a drag (continuous motion). Pinch works everywhere with no code. Drag is opt-in at the page level and is for things that need smooth, continuous control — sliders, maps, drawing, simple games.
/create-webappA pinch fires Enter / click on the focused element — it works like pressing Enter on the highlighted item. It is not a positioned click; it targets document.activeElement. So you don't write pinch code — you build focusable, keyboard-activatable UI and the pinch activates whatever has focus.
<button>, <a href>, or [tabindex="0"] with a key/click handler./add-text-input.Build these focusable elements (e.g. a <button class="focusable" data-action="confirm">) with /add-ui. That's all pinch needs — the rest of this skill is about drag.
Continuous drag is off by default. Without opting in, there is no free cursor and no drag — EMG is D-pad focus + pinch only. To receive the sliding motion, set touch-action: none on the <body> in your initial stylesheet, then listen to Pointer events.
touch-action is read on <body> only, once at page load. Per-element values and post-load JS changes to it are not honored. Put it in the initial CSS that ships with the page.requestPointerLock.movementX/movementY) are device-side. Verify on-device by logging pointermove before relying on specific fields; prefer clientX/clientY deltas you compute yourself./add-text-input) rather than producing a drag.In styles.css (shipped with the page — not injected later):
body { touch-action: none; }
var slider = document.getElementById('slider');
var dragging = false;
slider.addEventListener('pointerdown', function (e) {
dragging = true;
slider.setPointerCapture(e.pointerId);
});
slider.addEventListener('pointermove', function (e) {
if (!dragging) return;
update(e.clientX, e.clientY); // use client coords; verify deltas on-device
});
slider.addEventListener('pointerup', function () {
dragging = false;
});
Even with drag enabled, keep your focusable elements intact so pinch-to-activate still works for buttons and links. Drag is additive, not a replacement for focus navigation.
function update(x) {
var rect = slider.getBoundingClientRect();
var pct = Math.max(0, Math.min(1, (x - rect.left) / rect.width));
setValue(pct);
// Reflect `pct` in your slider fill — see /add-ui
}
var last = null;
canvas.addEventListener('pointerdown', function (e) { last = { x: e.clientX, y: e.clientY }; });
canvas.addEventListener('pointermove', function (e) {
if (!last) return;
drawLine(last.x, last.y, e.clientX, e.clientY);
last = { x: e.clientX, y: e.clientY };
});
canvas.addEventListener('pointerup', function () { last = null; });
body { touch-action: none; } is in the initial stylesheet (not injected later)pointerdown/move/up)requestPointerLock usedpointermove)/add-ui — Build the focusable elements pinch activates/add-text-input — Why a tap on a focused field opens the composer instead of dragging