p5-phone
Generate p5-phone sketches and answer API questions for mobile sensor/hardware integration.
Install
mkdir -p .claude/skills/p5-phone && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/10692" && unzip -o skill.zip -d .claude/skills/p5-phone && rm skill.zipInstalls to .claude/skills/p5-phone
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when generating p5-phone examples or answering questions about p5-phone APIs: mobile sensors, device orientation, accelerometer, gyroscope, touch, microphone, p5.sound, speech recognition, PhoneCamera, ML5 camera mapping, vibration, torch/flashlight, NFC, Bluetooth BLE, lockGestures, enablePermissionsTap, enableHardwareTap, arbitrary hardware combinations, mobile browser permissions, p5.js 2 compatibility.Key capabilities
- →Generate p5-phone examples
- →Mobile sensor access
- →Hardware permission management
- →Gesture locking
- →Camera/ML5 mapping
How it works
It provides helpers for mobile browser permissions and hardware access, mapping them to p5.js callbacks.
Inputs & outputs
When to use p5-phone
- →Generate p5.js mobile examples
- →Get help with device sensors
- →Debug mobile hardware permissions
About this skill
p5-phone: Mobile Hardware for p5.js
p5-phone is a single-file helper library that gives p5.js sketches access to mobile phone hardware — motion sensors, microphone, sound, speech, camera (with ML5 coordinate mapping), vibration, torch/flashlight, NFC, GPS/geolocation, and Bluetooth LE — plus mobile gesture locking, browser-permission activation UI, and an on-screen debug console. Current version: 1.13.0.
It works in both p5.js 1.x and 2.x (auto-detected at runtime). Every public function is attached to window (global mode) and mirrored on p5.prototype (instance mode), so you call them as bare globals like lockGestures() and enableSensorTap().
Pair this with the p5js-2x skill. p5-phone only unlocks the hardware and hands you p5's own globals and objects; the p5.js 2.x language patterns around them (async asset loading, the unified pointer/touch model, renamed APIs) live in the p5js-2x skill. Load both when writing phone sketches — and read the next section before writing any hardware code.
When to use this skill
Use it whenever the request involves a p5-phone sketch, mobile p5.js hardware interaction, or an explanation of how p5-phone works: device orientation / accelerometer / gyroscope, touch, microphone / p5.sound, speech recognition, PhoneCamera and ML5 mapping, vibration, torch/flashlight, NFC, GPS/geolocation (geoRead, geoDistance, geoInPolygon), Bluetooth BLE, lockGestures, enablePermissionsTap / enableHardwareTap, arbitrary hardware combinations, mobile browser permissions, or p5.js 2 compatibility.
Quick Start
For generated examples, produce a complete index.html and sketch.js unless the user asks for a single file or snippet.
HTML baseline (p5.js 2-compatible):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile p5.js App</title>
<style>
body { margin: 0; padding: 0; overflow: hidden; }
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/preload.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/p5-phone.min.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
Add p5.sound only when the sketch uses microphone levels, oscillators, audio input, sound output, or speech. Place it after p5 and before p5-phone/sketch.js:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/p5.sound.min.js"></script>
Minimal sketch (sketch.js):
function setup() {
createCanvas(windowWidth, windowHeight);
lockGestures();
enableSensorTap('Tap to enable motion sensors');
}
function draw() {
background(20);
if (!window.sensorsEnabled) {
fill(255);
textAlign(CENTER, CENTER);
text('Waiting for sensors', width / 2, height / 2);
return;
}
// rotationX / rotationY / rotationZ are p5.js built-ins, live once sensorsEnabled is true.
fill(0, 180, 255);
circle(width / 2 + rotationY * 4, height / 2 + rotationX * 4, 80);
}
function mousePressed() {
return false; // let p5-phone's gesture handling manage the touch
}
Golden Rules
- Call
lockGestures()in every mobile sketchsetup(). It blocks pull-to-refresh, swipe-back, pinch-zoom, double-tap zoom, long-press menus, and overscroll so the canvas behaves like an app. - Request every permission from a user gesture. iOS grants sensitive APIs only during transient user activation (a tap/click). Never auto-request on page load — use an
enable*activation UI. - Gate all hardware reads behind the matching
window.*Enabledflag (sensorsEnabled,micEnabled,bleConnected, etc.). Reading before permission returns stale/undefined data. - Use
mousePressed/mouseDragged/mouseReleased, not p5 1.xtouchStarted/touchMoved/touchEnded. The mouse callbacks fire for both mouse and touch in p5.js 1.x and 2.x; the touch callbacks are removed/no-ops in p5.js 2. - Serve over HTTPS (or
localhost). Sensors, mic, camera, NFC, BLE, GPS, and torch all require a secure context on mobile. - Need several hardware features from one tap? Use a single combined call —
enablePermissionsTap(['sensors', 'torch'])— not several single-permission binds on the same gesture. One call keeps iOS transient activation intact and firesuserSetupComplete()once. - Use exactly one activation style per permission need unless the user explicitly asks to compare styles.
Use p5.js built-ins — do not reimplement them
The most common failure mode is a model hand-rolling hardware plumbing (a raw DeviceOrientationEvent listener, a touchstart handler, a Web Audio graph, a manual asset loader) instead of reading the values p5-phone and p5.js already provide. p5-phone deliberately surfaces everything through p5's own globals and objects. For each concern below, use the p5 built-in — never a bespoke equivalent:
| p5-phone concern | Use these p5.js built-ins (not custom code) | Notes |
|---|---|---|
| Device orientation | rotationX, rotationY, rotationZ (+ pRotationX/Y/Z) | p5 globals; p5-phone only gates them via sensorsEnabled |
| Acceleration | accelerationX/Y/Z, pAccelerationX/Y/Z | p5 globals |
| Rotation rate | rotationRateAlpha, rotationRateBeta, rotationRateGamma | p5 globals |
| Motion events / thresholds | deviceMoved(), deviceShaken(), setMoveThreshold(), setShakeThreshold(), deviceOrientation | define the callbacks as globals |
| Touch / pointer input | mousePressed(), mouseDragged(), mouseReleased(), mouseX, mouseY, touches[] | p5.js 2 unifies mouse+touch under the pointer model; use touches[] for multitouch. Do not add your own addEventListener('touchstart', …) |
| Drawing the camera feed | image(cam, x, y, w, h) + cam.mapKeypoint()/mapBox() | PhoneCamera integrates with p5's image(); map ML5 results with its helpers, not manual video compositing |
| Microphone level / analysis | p5.AudioIn, p5.Amplitude, p5.FFT (p5.sound) | not a raw Web Audio graph |
| Generated sound | p5.Oscillator, p5.Envelope (p5.sound) | prefer over loadSound() for portability |
| Loading images/audio/JSON/font | await loadImage()/loadSound()/loadJSON()/loadFont() in async setup() | p5.js 2: load* return Promises — no preload(). See the p5js-2x skill |
| Mapping / ranges | map(), constrain(), lerp() | p5 math helpers |
Two specific traps worth calling out:
- Motion values are p5.js built-ins, not p5-phone APIs. p5-phone only requests the permission and sets
window.sensorsEnabled. The data (rotationX,accelerationX,deviceShaken(), …) comes straight from p5.js. Do not invent p5-phone getters for them. - There is no
bleValue()getter. Read incoming BLE data fromwindow.bleValues[name]or from thebleReceive(name, value)callback.bleValuesis an object keyed by characteristic name.
Permissions model
Every hardware family exposes the same five activation styles. Pick one:
- Tap —
enable<Feature>Tap(message)— full-screen tap overlay. - Button —
enable<Feature>Button(buttonText, statusText?)— auto-generated button. - Canvas —
enable<Feature>Canvas(message)— prompt drawn on the p5 canvas. - Banner —
enable<Feature>Banner(message, position?)— animated slide-in banner (position='top'/'bottom'). - On (custom element) —
enable<Feature>On(selector)— bind activation to any existing HTML element by CSS selector.
Full matrix:
| Feature | Tap | Button | Canvas | Banner | On (selector) |
|---|---|---|---|---|---|
| Motion sensors | enableSensorTap(msg) | enableSensorButton(text) | enableSensorCanvas(msg) | enableSensorBanner(msg) | enableSensorOn(sel) |
| Microphone | enableMicTap(msg) | enableMicButton(text) | enableMicCanvas(msg) | enableMicBanner(msg) | enableMicOn(sel) |
| Sound output | enableSoundTap(msg) | enableSoundButton(text) | enableSoundCanvas(msg) | enableSoundBanner(msg) | enableSoundOn(sel) |
| Speech | enableSpeechTap(msg) | enableSpeechButton(text) | enableSpeechCanvas(msg) | enableSpeechBanner(msg) | enableSpeechOn(sel) |
| Vibration | enableVibrationTap(msg) | enableVibrationButton(text) | enableVibrationCanvas(msg) | enableVibrationBanner(msg) | enableVibrationOn(sel) |
| Torch / flashlight | enableTorchTap(msg) | enableTorchButton(text) | enableTorchCanvas(msg) | enableTorchBanner(msg) | enableTorchOn(sel) |
| NFC | enableNfcTap(msg) | enableNfcButton(text) | enableNfcCanvas(msg) | enableNfcBanner(msg) | enableNfcOn(sel) |
| GPS / geolocation | enableGeoTap(msg) | enableGeoButton(text) | enableGeoCanvas(msg) | enableGeoBanner(msg) | enableGeoOn(sel) |
| Bluetooth (BLE) | enableBleTap(opts?) | enableBleButton(opts?) | enableBleCanvas(opts?) | enableBleBanner(opts?) | enableBleOn(sel) |
| Camera | enableCameraTap(msg) | enableCameraButton(text) | enableCameraCanvas(msg) | enableCameraBanner(msg) | enableCameraOn(sel) |
| Sensors + mic | enableAllTap(msg) | enableAllButton(text) | enableAllCanvas(msg) | enableAllBanner(msg) | enableAllOn(sel) |
| Any combination | enablePermissionsTap(list, msg) | enablePermissionsButton(list, text) | enablePermissionsCanvas(list, msg) | enablePermissionsBanner(list, msg) | enablePermissionsOn(sel, list) |
Notes:
enableBle*take an options object ({ label, message, statusText, position }), unlike the other families which take positional(message, position)/(buttonText, statusText).enableGyro*is a legacy alias forenableSensor*. PreferenableSensor*for new examples; useenableGyro*only to match older published sketches.enableAll*is shorthand for sensors + mic. For a
Content truncated.
When not to use it
- →Desktop-only p5.js sketches
Prerequisites
Limitations
- →Requires HTTPS
- →Browser-specific hardware support
How it compares
It simplifies complex mobile browser permission flows into simple tap-to-enable functions.
Compared to similar skills
p5-phone side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| p5-phone (this skill) | 0 | 2mo | No flags | Intermediate |
| flutter-development | 1,555 | 5mo | No flags | Intermediate |
| flutter-expert | 73 | 4mo | No flags | Advanced |
| react-native-architecture | 55 | 2mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
flutter-development
aj-geddes
Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.
flutter-expert
sickn33
Master Flutter development with Dart 3, advanced widgets, and multi-platform deployment. Handles state management, animations, testing, and performance optimization for mobile, web, desktop, and embedded platforms. Use PROACTIVELY for Flutter architecture, UI implementation, or cross-platform features.
react-native-architecture
wshobson
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.
react-native-design
wshobson
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.
flutter
alinaqi
Flutter development with Riverpod state management, Freezed, go_router, and mocktail testing
agent-spec-mobile-react-native
ruvnet
Agent skill for spec-mobile-react-native - invoke with $agent-spec-mobile-react-native