菜单
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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/facebook/meta-wearables-webapp --skill publish-to-vercel命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | publish-to-vercel |
| description | 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. |
| argument-hint | [app-directory] |
Publish a Meta Display Glasses webapp to Vercel for live HTTPS hosting at a stable production URL. This enables loading the webapp directly on Meta Display Glasses, which require HTTPS URLs.
Use this skill only when the webapp is ready to ship to everyone. For iterating on uncommitted changes during development, use /test-on-device instead — it deploys to a stage-<project-name> URL without affecting production.
No GitHub repo required — code is pushed directly from local to Vercel.
Meta Display Glasses load webapps via HTTPS URLs. Vercel provides instant static hosting with HTTPS out of the box, making it the fastest path from local development to on-device access.
The app directory must have these three files. If they don't exist, create them before proceeding.
package.json:
{
"name": "<app-name>",
"version":
server.js — lightweight static file server:
var http = require('http');
var fs = require('fs');
var path = require('path');
var PORT = process.env.PORT || 3000;
var mimeTypes = {
'.html': 'text/html',
'.css': 'text/css',
'.js': 'application/javascript',
'.json': 'application/json',
'.png': 'image/png',
'.jpg': 'image/jpeg',
'.svg': 'image/svg+xml',
};
var server = http.createServer(function(req, res) {
var filePath = '.' + (req.url === '/' ? '/index.html' : req.url);
var ext = path.extname(filePath);
var contentType = mimeTypes[ext] || 'application/octet-stream';
fs.readFile(filePath, function(err, content) {
if (err) {
res.writeHead(404, { 'Content-Type': 'text/html' });
res.end('<h1>404 Not Found</h1>');
return;
}
res.writeHead(200, { 'Content-Type': contentType });
res.end(content);
});
});
server.listen(PORT, function() {
console.log('Server running at http://localhost:' + PORT);
});
vercel.json:
{
"rewrites": [
{ "source": "/(.*)", "destination": "/$1" }
]
}
If a server already exists, verify Vercel compatibility:
process.env.PORT || 3000 (not hard-coded)vercel.json must exist with rewrites configpackage.json must have a start scriptindex.html (created via /create-webapp or manually)Run vercel whoami to detect the user's current state, then branch:
a. Authenticated — vercel whoami returns a username. Skip to Step 0.5.
b. CLI not installed — command returns vercel: command not found (or similar). Tell the user:
Publishing to Meta Display Glasses needs a public HTTPS URL. I can set this up for you via Vercel — it's free and takes a couple of minutes. You'll need to create a Vercel account at https://vercel.com/signup (free tier is fine), and then I'll handle installing the CLI and walking you through the rest.
If you'd rather host this yourself on any HTTPS server, you can skip this skill entirely.
Want me to proceed with Vercel?
If yes, wait for the user to confirm they've created the Vercel account, then run npm i -g vercel yourself. After install completes, proceed to the login branch below.
c. Not logged in — CLI is installed but vercel whoami returns an auth error. Tell the user:
Vercel CLI is installed but not logged in.
vercel loginis interactive and needs your input — please type! vercel loginin this prompt to run it in this session.
After they complete login, re-run vercel whoami to confirm. Only proceed once it returns a valid user.
If lock.html exists in the app directory, the app was previously gated by /test-on-device's passcode lock. Production releases shouldn't require visitors to enter a passcode, so ask the user:
This app has a passcode lock screen from
/test-on-device. For a public production release, do you want to disable it? (default: yes)I'll only disable the routing —
lock.html,lock.css, andlock.jswill stay in the directory in case you re-test later.
If yes, revert only the routing wiring (leave lock.html/lock.css/lock.js files in place):
server.js — change the root path back to serve index.html:
// Find this:
var filePath = '.' + (req.url === '/' ? '/lock.html' : req.url);
// Replace with:
var filePath = '.' + (req.url === '/' ? '/index.html' : req.url);
vercel.json — remove the { "source": "/", "destination": "/lock.html" } rewrite. Keep the catch-all.index.html — remove the inline localStorage guard <script> from <head> (the one that redirects to lock.html when the storage key is unset).If the user says no, leave everything in place — the production URL will continue to gate visitors with the passcode.
If lock.html does not exist, skip this step. Do not proactively add a passcode lock during publish.
This workflow pushes code directly from local to Vercel — no GitHub repo needed.
If a Vercel project was previously linked to GitHub, disconnect it:
vercel git disconnect --yes
For a first-time publish, run from the app directory:
vercel --yes --prod
This will:
The project will be linked locally via a .vercel/ directory (auto-added to .gitignore).
Immediately after the first deploy, disable Vercel Authentication so the glasses browser can access the URL without login:
PROJECT_ID=$(python3 -c "import json; print(json.load(open('.vercel/project.json'))['projectId'])")
echo '{"ssoProtection":null}' | vercel api "/v9/projects/$PROJECT_ID" -X PATCH --input - --silent
This is safe to run on every deploy — it's a no-op if already disabled.
After deploying, alias the deployment to a predictable <project-name> URL:
URL=$(vercel --prod)
vercel alias set "$URL" <project-name>.vercel.app
Replace <project-name> with the actual project name (from package.json or .vercel/project.json). For example, if the project is my-glasses-app, the stable URL becomes https://my-glasses-app.vercel.app.
This is the URL to share with everyone. It never changes between deploys.
Generate a QR code that users can scan from their phone to automatically add the webapp — no manual URL typing needed.
The QR code data must use this deep link format:
fb-viewapp://web_app_deep_link?appName=<app-name>&appUrl=<url-encoded-prod-url>
For example, if the app is called my-glasses-app and the stable URL is https://my-glasses-app.vercel.app:
fb-viewapp://web_app_deep_link?appName=my-glasses-app&appUrl=https%3A%2F%2Fmy-glasses-app.vercel.app
Use the /qr-code skill to generate the QR code:
python3 skills/qr-code/scripts/qr_generator.py --png <app-dir>/qr-publish.png "fb-viewapp://web_app_deep_link?appName=<app-name>&appUrl=<url-encoded-prod-url>"
The PNG is saved to the app directory. If your environment supports rendering images inline (e.g. Claude Code's Read tool), display the QR code directly. Otherwise, provide the file path and tell the user to open it and scan from their phone.
After deploy, alias, and QR generation, present the user with:
Stable URL:
https://<project-name>.vercel.app
Option A — Scan QR code (recommended): Scan the generated QR code with your phone camera. It will open the Meta AI app and automatically add the webapp.
Option B — Manual setup:
<app-name>https://<project-name>.vercel.appAfter making changes, republish, re-alias, and regenerate the QR code every time:
URL=$(vercel --prod)
vercel alias set "$URL" <project-name>.vercel.app
# Regenerate QR code
python3 skills/qr-code/scripts/qr_generator.py --png <app-dir>/qr-publish.png "fb-viewapp://web_app_deep_link?appName=<app-name>&appUrl=<url-encoded-prod-url>"
The stable URL automatically serves the latest version. No git push needed — Vercel receives the files directly.
After each republish, show the QR code and setup instructions (following Steps 5-6).
PS: If the user has already added this webapp to their glasses, no need to re-add — the stable URL automatically serves the latest deploy.
vercel whoami returns a user) before any deploylock.html existed, user was offered the option to disable the passcode routing for productionpackage.json, server.js, and vercel.json exist in app directoryserver.js uses process.env.PORTvercel --prod completes successfullyvercel alias set succeeds and maps to <project-name>.vercel.app| Issue | Solution |
|---|---|
vercel: command not found | Run npm i -g vercel |
| Auth error | Run vercel login |
| GitHub link error on deploy | Run vercel git disconnect --yes first |
| 404 on sub-pages | Check vercel.json rewrites config |
| Old version still showing | Run vercel --prod --force to skip cache, then re-alias |
| Alias name taken | The <project-name>.vercel.app subdomain may already be claimed. Try a more specific name like <project-name>-<team>.vercel.app |
Permission denied on gh config | Ignore — this workflow doesn't need GitHub |
| QR code won't scan | Ensure the deep link format is correct and the URL is properly percent-encoded. Try increasing --scale for a larger QR image |
| Skill | Purpose | When to Use |
|---|---|---|
/test-on-device | Preview uncommitted changes on glasses | Quick iteration without committing |
/create-webapp | Create a new webapp | Before first publish |
/add-ui | Add screens, buttons, components | Adding UI before republish |
/connect-api | Add API connections | Adding data sources before republish |
/qr-code | Generate QR codes | Used automatically by this skill for device setup |
/passcode-for-testing | Add passcode lock screen | Not added by this skill — if one already exists from /test-on-device, Step 0.5 offers to disable the routing for production |