メニュー
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コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
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