// Add a 3-digit combination lock passcode screen to a Meta Display Glasses webapp to gate public access during testing. Offered as an opt-in step within /test-on-device since Vercel deployment protection is disabled for glasses browser compatibility.
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.
Add client-side data persistence to a Meta Display Glasses webapp using the W3C Web Storage API (localStorage and sessionStorage). Use when the user wants to save settings, cache data, persist state, or store user preferences.
Add UI components to a Meta Display Glasses webapp — screens, buttons, lists, cards, forms, toggles, counters, or nav bars. Works with vanilla JS and React apps. Use when the user wants to add any interactive UI element or new screen.
Connect a Meta Display Glasses webapp to REST APIs or WebSockets. Use when the user wants to fetch data from an API, add real-time updates, show loading/error states, or cache API responses.
Create a new webapp for Meta Display Glasses with D-pad navigation and 600x600 dark-theme display. Use when the user wants to build a new glasses app, start a project, or scaffold a webapp for smart glasses.
Publish a Meta Display Glasses webapp to Vercel for live HTTPS access on device. Use when the developer is ready to publish, host, ship, or release a webapp to a stable production URL for everyone. Handles server setup, Vercel project creation, and direct deploys without GitHub.
| name | passcode-for-testing |
| description | Add a 3-digit combination lock passcode screen to a Meta Display Glasses webapp to gate public access during testing. Offered as an opt-in step within /test-on-device since Vercel deployment protection is disabled for glasses browser compatibility. |
| argument-hint | [app-directory] |
Add a combination lock screen that gates access to your webapp during Vercel preview deployments. Since /test-on-device disables Vercel's deployment protection, this prevents the public from accessing your app.
This skill is offered as an opt-in by /test-on-device (Step 0.5) — it is not auto-invoked. /publish-to-vercel will not add a passcode, and if one already exists it will offer to disable the routing for production (the lock files stay on disk).
index.html (created via /create-webapp or manually)server.js and vercel.json (created by /create-webapp or /test-on-device)Ask the user:
lock.htmlRead templates/lock.html and write it to the app directory.
Replace the two placeholder values in the <script> block:
__DIGIT_0__, __DIGIT_1__, __DIGIT_2__ — the user's chosen passcode digits (as integers)__APP_NAME__ in the STORAGE_KEY — the project name from package.json with hyphens replaced by underscores (e.g. ipl-live-scores → ipl_live_scores)server.js — change the root path to serve lock.html:
// Find this:
var filePath = '.' + (req.url === '/' ? '/index.html' : req.url);
// Replace with:
var filePath = '.' + (req.url === '/' ? '/lock.html' : req.url);
vercel.json — add a rewrite rule before the catch-all:
{
"rewrites": [
{ "source": "/", "destination": "/lock.html" },
{ "source": "/(.*)", "destination": "/$1" }
]
}
index.htmlAdd this inline script in <head>, after <meta> tags and before any <link> or <script> tags:
<script>if(localStorage.getItem('<STORAGE_KEY>')!=='1')window.location.replace('lock.html');</script>
Replace <STORAGE_KEY> with the same key used in lock.html (e.g. ipl_live_scores_unlocked).
This prevents bypassing the lock by navigating directly to index.html.
lock.html exists in the app directorySTORAGE_KEY are set correctly in lock.htmlserver.js serves lock.html on root path /vercel.json has the / → /lock.html rewrite before the catch-allindex.html has the localStorage guard script in <head>/index.html redirects back to lock if not unlocked| Issue | Solution |
|---|---|
| Lock screen doesn't appear | Check server.js serves lock.html on / and vercel.json has the rewrite |
Can bypass lock via /index.html | Ensure the localStorage guard script is in index.html <head> |
| Wrong passcode unlocks | Verify PASSCODE array in lock.html matches the user's chosen digits |
| Unlock doesn't redirect | Ensure STORAGE_KEY is consistent between lock.html and index.html guard |
/test-on-device — Offers this skill as an opt-in (Step 0.5) before deploying/create-webapp — Create a new webapp before adding passcode protection/publish-to-vercel — Will not add a passcode; if one already exists, offers to disable the routing for production while leaving the lock files on disk