Required reading
Before generating or modifying any code, read both:
../../references/display-guidelines.md../../references/performance-guidelines.md
These 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.
If these reference files are unavailable in an isolated eval, do not search /, home directories, or unrelated workspaces. Apply the requirements already present in this skill and continue.
Add UI Components to Meta Display Glasses WebApp
Add screens, buttons, lists, forms, and other interactive components to an existing webapp. This skill enforces the glasses design constraints and provides implementation patterns.
Prerequisites
- Existing webapp created via
/create-webapp
Design Rules
All components must follow these constraints regardless of framework:
Viewport & Layout
- 600x600 fixed viewport — all content must fit within this area
- Page background
#000000 (transparent on additive display — real world shows through). UI surfaces (cards, headers, nav) use dark grays so they remain visible. Light text (#e8e8e8).
- Use CSS variables from the theme:
--bg-primary, --bg-secondary, --bg-card, --text-primary, --text-secondary, --accent-primary, --danger, --success
D-pad Navigation
- All interactive elements must be focusable — keyboard-navigable via arrow keys
- Enter key activates the focused element
- Escape key navigates back
- Focus moves with wrap-around (last → first, first → last)
- Focused elements must scroll into view automatically
- Focus ring: cyan glow (
box-shadow: 0 0 20px rgba(0, 212, 255, 0.4))
Accessibility
- Non-button interactive elements need
tabindex="0"
- Scrollable containers use
overflow-y: auto with constrained max-height
- Text must be readable on dark background (minimum contrast)
Available Components
| 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 (see /add-text-input) |
| Toggle |
On/off setting |
Boolean settings |
| Counter |
+/- with value display |
Numeric adjustments |
Steps
1. Gather Information
Ask the user:
- What component? Screen, button, list, card, form, toggle, counter?
- Where? Which screen should it be added to (or is it a new screen)?
- Behavior? What happens on activation/interaction?
2. Add the Component
Use Vanilla JS patterns for HTML structure, event handling, and state management. Always apply the design rules above.
For text entry (forms, search boxes, notes), use /add-text-input — standard text fields open the on-glasses handwriting + voice composer on focus + tap, so you don't build a keyboard.
3. Verify
Related Skills
/create-webapp — Create a new webapp from scratch/connect-api — Add API-connected actions/add-text-input — Text fields, search boxes, and form inputs (on-glasses composer)/add-gestures — Pinch-to-activate and opt-in continuous drag/add-device-sensors — Add motion/orientation/GPS sensors
1---2name: add-ui3description: 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.4---56## Required reading78Before generating or modifying any code, read both:910- `../../references/display-guidelines.md`11- `../../references/performance-guidelines.md`1213These 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.1415If these reference files are unavailable in an isolated eval, do not search `/`, home directories, or unrelated workspaces. Apply the requirements already present in this skill and continue.1617# Add UI Components to Meta Display Glasses WebApp1819Add screens, buttons, lists, forms, and other interactive components to an existing webapp. This skill enforces the glasses design constraints and provides implementation patterns.2021## Prerequisites2223- Existing webapp created via `/create-webapp`2425## Design Rules2627All components must follow these constraints regardless of framework:2829### Viewport & Layout30- **600x600** fixed viewport — all content must fit within this area31- Page background `#000000` (transparent on additive display — real world shows through). UI surfaces (cards, headers, nav) use dark grays so they remain visible. Light text (`#e8e8e8`).32- Use CSS variables from the theme: `--bg-primary`, `--bg-secondary`, `--bg-card`, `--text-primary`, `--text-secondary`, `--accent-primary`, `--danger`, `--success`3334### D-pad Navigation35- All interactive elements must be **focusable** — keyboard-navigable via arrow keys36- Enter key activates the focused element37- Escape key navigates back38- Focus moves with **wrap-around** (last → first, first → last)39- Focused elements must scroll into view automatically40- Focus ring: cyan glow (`box-shadow: 0 0 20px rgba(0, 212, 255, 0.4)`)4142### Accessibility43- Non-button interactive elements need `tabindex="0"`44- Scrollable containers use `overflow-y: auto` with constrained `max-height`45- Text must be readable on dark background (minimum contrast)4647## Available Components4849| Component | Purpose | When to Use |50|-----------|---------|-------------|51| Screen | Full-page view with header + content | Adding a new page/destination |52| Button | Triggers an action | Any interactive action |53| Nav Bar | Row of action buttons at bottom | Screen-level actions |54| List | Scrollable list of items | Displaying collections |55| Card | Data display block | Showing stats, values |56| Form | Input fields with submit | Collecting user input (see `/add-text-input`) |57| Toggle | On/off setting | Boolean settings |58| Counter | +/- with value display | Numeric adjustments |5960## Steps6162### 1. Gather Information6364Ask the user:65- **What component?** Screen, button, list, card, form, toggle, counter?66- **Where?** Which screen should it be added to (or is it a new screen)?67- **Behavior?** What happens on activation/interaction?6869### 2. Add the Component7071Use [Vanilla JS patterns](references/vanilla-patterns.md) for HTML structure, event handling, and state management. Always apply the design rules above.7273For **text entry** (forms, search boxes, notes), use `/add-text-input` — standard text fields open the on-glasses handwriting + voice composer on focus + tap, so you don't build a keyboard.7475### 3. Verify7677- [ ] Component is focusable (D-pad navigable)78- [ ] Focus ring appears on the component (cyan glow)79- [ ] Enter key activates the component80- [ ] Escape key navigates back (if applicable)81- [ ] Content fits within 600x600 viewport82- [ ] Text is readable on dark background83- [ ] Scrollable content uses `overflow-y: auto` with `max-height`84- [ ] Focused elements scroll into view8586## Related Skills8788- `/create-webapp` — Create a new webapp from scratch89- `/connect-api` — Add API-connected actions90- `/add-text-input` — Text fields, search boxes, and form inputs (on-glasses composer)91- `/add-gestures` — Pinch-to-activate and opt-in continuous drag92- `/add-device-sensors` — Add motion/orientation/GPS sensors
facebook