// 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.
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.
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.
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.
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 | add-ui |
| description | 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. |
| argument-hint | [component-type] [name] |
Before generating or modifying any code, read both:
${CLAUDE_PLUGIN_ROOT}/references/display-guidelines.md${CLAUDE_PLUGIN_ROOT}/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.
Add screens, buttons, lists, forms, and other interactive components to an existing webapp. This skill enforces the glasses design constraints and provides implementation patterns.
/create-webappAll components must follow these constraints regardless of framework:
#000000 (transparent on additive display — real world shows through). UI surfaces (cards, headers, nav) use dark grays so they remain visible. Light text (#e8e8e8).--bg-primary, --bg-secondary, --bg-card, --text-primary, --text-secondary, --accent-primary, --danger, --successbox-shadow: 0 0 20px rgba(0, 212, 255, 0.4))tabindex="0"overflow-y: auto with constrained max-height| Component | Purpose | When to Use |
|---|---|---|
| Screen | Full-page view with header + content | Adding a new page/destination |
| Button | Triggers an action | Any interactive action |
| Nav Bar | Row of action buttons at bottom | Screen-level actions |
| List | Scrollable list of items | Displaying collections |
| Card | Data display block | Showing stats, values |
| Form | Input fields with submit | Collecting user input |
| Toggle | On/off setting | Boolean settings |
| Counter | +/- with value display | Numeric adjustments |
Ask the user:
Use Vanilla JS patterns for HTML structure, event handling, and state management. Always apply the design rules above.
overflow-y: auto with max-height/create-webapp — Create a new webapp from scratch/connect-api — Add API-connected actions/add-device-sensors — Add motion/orientation/GPS sensors