Build display experiences for Meta Ray-Ban Display, choosing between native DAT display integration and standalone Wearables Web Apps. Do not use for Ray-Ban Meta models without a display.
Installs into .claude/skills of the current project.
Are you the author of Display Webapps?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/alexishida-display-webapps)
---
name: display-webapps
description: Build display experiences for Meta Ray-Ban Display, choosing between native DAT display integration and standalone Wearables Web Apps. Do not use for Ray-Ban Meta models without a display.
---
# Meta Ray-Ban Display — Native DAT or Web App
This skill is only for display-capable glasses.
## Choose the path
Use **DAT display** when:
- The experience is an extension of an existing iOS/Android app.
- Native mobile state, authentication, background services, or camera integration is central.
- The user specifically wants Kotlin/Swift.
Use **Web Apps** when:
- The experience should run as a standalone display surface.
- HTML/CSS/JavaScript is sufficient.
- Fast iteration/deployment by URL is desirable.
- The feature can live within the documented Web App browser capabilities.
## Web App constraints from the official toolkit snapshot
The official Meta Web App toolkit documents these design constraints:
- 600 × 600 px display viewport.
- Directional/D-pad style navigation through the supported wearable input path.
- Dark/black backgrounds are important for an additive transparent display.
- High contrast is important for readability.
- Interactive elements must be focusable and keyboard-navigation friendly.
- Deployment requires a publicly available HTTPS URL for on-device use.
Always verify current constraints with `search_webapps_docs` before final implementation.
## Web App implementation defaults
- Start with semantic HTML and a small dependency footprint.
- Support Arrow keys + Enter in desktop testing.
- Make focus visible and deterministic.
- Keep text large and concise.
- Avoid layouts that require precise pointer input.
- Avoid dense dashboards and long scrolling screens.
- Prefer one primary task per screen.
- Use platform sensors only through capabilities confirmed in current docs.
## Native display implementation
When using DAT display:
- Confirm display-capable device selection.
- Keep the phone app as the control/data layer where appropriate.
- Use only currently documented display UI primitives.
- Design for glanceability and low interaction cost.
- Handle the case where a connected device does not expose the display capability.
## Never do this
Do not add display code to Ray-Ban Meta Gen 1/2 unless the user has explicitly identified a display-capable device and current docs confirm it.
