add-ui

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]

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).