[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-79893":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":13,"stars7d":15,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":17,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":20,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":14,"starSnapshotCount":14,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},79893,"meta-wearables-webapp","facebookincubator\u002Fmeta-wearables-webapp","facebookincubator","AI-assisted development toolkit for building web applications on Meta Ray-Ban Display glasses.",null,"Python",121,22,3,0,8,27,9,4.09,"Other",false,"main",[],"2026-06-12 02:03:55","# Meta Wearables Web App AI Toolkit\n\nAn AI toolkit that helps you build Web Apps for Meta Ray-Ban Display glasses. It contains plugins for Claude Code, Codex, Cursor, and GitHub Copilot.\n\n## What are Web Apps for Meta Ray-Ban Display glasses?\n\nWeb Apps are standard HTML\u002FCSS\u002FJavaScript applications rendered on Meta Ray-Ban Display (MRBD) glasses — an easy and familiar way to build experiences for the glasses, especially with AI-assisted coding tools. See the full [Web Apps developer documentation](https:\u002F\u002Fwearables.developer.meta.com\u002Fdocs\u002Fdevelop\u002Fwebapps) on the Wearables Developer Center for capabilities, design constraints, and best practices.\n\n## Quick Start\n\n### 1. Install AI Skills\n\n#### Option A — Plugin Marketplace (recommended for Claude Code and Codex)\n\n**Claude Code:**\n\n```bash\n# Add the marketplace (one-time)\n\u002Fplugin marketplace add https:\u002F\u002Fgithub.com\u002Ffacebookincubator\u002Fmeta-wearables-webapp\n\n# Install the plugin\n\u002Fplugin install meta-wearables-webapp@meta-wearables\n\n# Update plugin\n\u002Fplugin marketplace update meta-wearables && \u002Fplugin update meta-wearables-webapp@meta-wearables\n```\n\n**Codex CLI:**\n\n```bash\n# Add the marketplace (one-time, run in your terminal)\ncodex plugin marketplace add https:\u002F\u002Fgithub.com\u002Ffacebookincubator\u002Fmeta-wearables-webapp\n\n# Install the plugin (run in your terminal)\nStart Codex, and type `\u002Fplugins` → tab to **[Meta Wearables]** → install.\n\n# Update plugin\n\n# Refresh the marketplace source\ncodex plugin marketplace upgrade meta-wearables\n\nThen inside Codex: go to `\u002Fplugins` — if a newer version is available, select the option to update.\n```\n\n#### Option B — Install Script (all tools)\n\n```bash\n# Clone this repo and Install for your preferred tool\ngit clone https:\u002F\u002Fgithub.com\u002Ffacebookincubator\u002Fmeta-wearables-webapp.git\n.\u002Finstall-skills.sh claude    # Claude Code\n.\u002Finstall-skills.sh cursor    # Cursor\n.\u002Finstall-skills.sh copilot   # GitHub Copilot\n.\u002Finstall-skills.sh all       # All tools + AGENTS.md\n\n# Or remote install (no clone needed)\ncurl -sL https:\u002F\u002Fraw.githubusercontent.com\u002Ffacebookincubator\u002Fmeta-wearables-webapp\u002Fmain\u002Finstall-skills.sh | bash\n```\n\n### 2. Build a Web App\n\nOpen your project in an AI-assisted editor and describe what you want:\n\n> \"Create a weather app that shows the 5-day forecast with D-pad navigation\"\n\nThe AI will scaffold `index.html`, `styles.css`, and `app.js` following the display glasses design system.\n\n### 3. Test in Browser\n\nStart your web app locally however your project requires (e.g., open `index.html` directly, run a dev server, `npm run dev`, etc.) and open it in your desktop browser. Use arrow keys to simulate D-pad input.\n\nTo test sensor data like geolocation or IMU sensors:\n\n1. Open **Chrome DevTools** (F12)\n2. Click the **⋮** (three-dot menu) in the top-right of DevTools\n3. Go to **More tools** → **Sensors**\n4. Override **Location** with custom latitude\u002Flongitude and change **Orientation** as needed\n\n### 4. Deploy to Glasses\n\nYour web app must be hosted at a **publicly available HTTPS URL**. This plugin supports deploying to [Vercel](https:\u002F\u002Fvercel.com), but Vercel is just one option — you can use any hosting provider as long as the result is a publicly accessible HTTPS URL.\n\nOnce deployed, add the web app to your glasses:\n\n**Option A — QR code (recommended):**\n\nUse the plugin's publish skill to generate a QR code. Scan it with your phone to deep link directly into the Meta AI app and add the web app to your glasses.\n\n**Option B — Manual setup:**\n\n1. Open the **Meta AI app** on your phone\n2. Go to **Devices** → **Display Glasses settings**\n3. Navigate to **App connections** → **Web apps**\n4. Tap **Add a web app**\n5. Enter the app name and your deployed URL\n\n## Design Constraints\n\n| Constraint | Reason |\n|-----------|--------|\n| 600x600px viewport | Display size |\n| D-pad navigation only | EMG wristband translates gestures to arrow keys |\n| Dark backgrounds | Black is transparent on the additive display |\n| High contrast elements | Readability on a small transparent display |\n| `.focusable` class on interactive elements | D-pad focus management |\n\n## Skills Included\n\n| Skill | Description |\n|-------|-------------|\n| `create-webapp` | Scaffold a new web app from scratch |\n| `add-screen` | Add a new screen or view to an existing app |\n| `add-button` | Add buttons and action handlers |\n| `connect-api` | Connect to REST\u002FWebSocket APIs |\n| `add-sensors` | Accelerometer, gyroscope, compass |\n\n## Examples\n\nSee the `examples\u002F` directory for sample apps:\n\n- **Snake** — Classic snake game with D-pad controls and high scores\n\n## Multi-Tool Support\n\nSkills are authored once in `plugins\u002Fmeta-wearables-webapp\u002Fskills\u002F` and distributed via:\n\n- **Claude Code** — Plugin marketplace (recommended) or `install-skills.sh claude`\n- **Codex CLI** — Plugin marketplace (recommended) or `install-skills.sh agents`\n- **Cursor** — Cursor plugin via `install-skills.sh cursor` (installs to `~\u002F.cursor\u002Fplugins\u002Flocal\u002F`, single source of truth with Claude\u002FCodex)\n- **GitHub Copilot** — `.github\u002Fcopilot-instructions.md` via `install-skills.sh copilot`\n- **Gemini CLI \u002F Windsurf \u002F Devin** — `AGENTS.md` via `install-skills.sh agents`\n\n## License\n\nThis project is licensed under the BSD License — see [LICENSE](LICENSE) for details.\n","该项目是一个用于在Meta Ray-Ban Display眼镜上构建Web应用程序的AI辅助开发工具包。它支持Claude Code、Codex、Cursor和GitHub Copilot等插件，帮助开发者通过AI生成符合眼镜设计规范的HTML\u002FCSS\u002FJavaScript代码框架。该工具包特别适合希望快速创建适用于可穿戴设备的沉浸式体验的应用场景，如天气预报应用等，并且提供了从本地测试到部署至眼镜的全流程支持。通过集成多种流行的AI编码助手，显著提升了针对特定硬件限制进行开发时的效率与便捷性。",2,"2026-06-11 03:58:26","CREATED_QUERY"]