[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-meta-add-ui":3,"mdc--ka4i9y-key":37,"related-org-meta-add-ui":791,"related-repo-meta-add-ui":979},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":35,"mdContent":36},"add-ui","add UI components to webapps","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.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"meta","Meta Open Source","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmeta.png","facebook",[13,17,20,23],{"name":14,"slug":15,"type":16},"React","react","tag",{"name":18,"slug":19,"type":16},"JavaScript","javascript",{"name":21,"slug":22,"type":16},"UI Components","ui-components",{"name":24,"slug":25,"type":16},"Frontend","frontend",189,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-webapp","2026-09-01T08:30:27.477785",null,33,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":34},[],"AI-assisted development toolkit for building web applications on Meta Ray-Ban Display glasses.","https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-webapp\u002Ftree\u002FHEAD\u002Fplugins\u002Fmeta-wearables-webapp\u002Fskills\u002Fadd-ui","---\nname: add-ui\ndescription: >-\n  Add UI components to a Meta Display Glasses webapp — screens, buttons,\n  lists, cards, forms, toggles, counters, or nav bars. Works with vanilla\n  JS and React apps. Use when the user wants to add any interactive UI\n  element or new screen.\nargument-hint: \"[component-type] [name]\"\n---\n\n## Required reading\n\nBefore generating or modifying any code, read both:\n\n- `..\u002F..\u002Freferences\u002Fdisplay-guidelines.md`\n- `..\u002F..\u002Freferences\u002Fperformance-guidelines.md`\n\nThese 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.\n\nIf these reference files are unavailable in an isolated eval, do not search `\u002F`, home directories, or unrelated workspaces. Apply the requirements already present in this skill and continue.\n\n# Add UI Components to Meta Display Glasses WebApp\n\nAdd screens, buttons, lists, forms, and other interactive components to an existing webapp. This skill enforces the glasses design constraints and provides implementation patterns.\n\n## Prerequisites\n\n- Existing webapp created via `\u002Fcreate-webapp`\n\n## Design Rules\n\nAll components must follow these constraints regardless of framework:\n\n### Viewport & Layout\n- **600x600** fixed viewport — all content must fit within this area\n- 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`).\n- Use CSS variables from the theme: `--bg-primary`, `--bg-secondary`, `--bg-card`, `--text-primary`, `--text-secondary`, `--accent-primary`, `--danger`, `--success`\n\n### D-pad Navigation\n- All interactive elements must be **focusable** — keyboard-navigable via arrow keys\n- Enter key activates the focused element\n- Escape key navigates back\n- Focus moves with **wrap-around** (last → first, first → last)\n- Focused elements must scroll into view automatically\n- Focus ring: cyan glow (`box-shadow: 0 0 20px rgba(0, 212, 255, 0.4)`)\n\n### Accessibility\n- Non-button interactive elements need `tabindex=\"0\"`\n- Scrollable containers use `overflow-y: auto` with constrained `max-height`\n- Text must be readable on dark background (minimum contrast)\n\n## Available Components\n\n| Component | Purpose | When to Use |\n|-----------|---------|-------------|\n| Screen | Full-page view with header + content | Adding a new page\u002Fdestination |\n| Button | Triggers an action | Any interactive action |\n| Nav Bar | Row of action buttons at bottom | Screen-level actions |\n| List | Scrollable list of items | Displaying collections |\n| Card | Data display block | Showing stats, values |\n| Form | Input fields with submit | Collecting user input (see `\u002Fadd-text-input`) |\n| Toggle | On\u002Foff setting | Boolean settings |\n| Counter | +\u002F- with value display | Numeric adjustments |\n\n## Steps\n\n### 1. Gather Information\n\nAsk the user:\n- **What component?** Screen, button, list, card, form, toggle, counter?\n- **Where?** Which screen should it be added to (or is it a new screen)?\n- **Behavior?** What happens on activation\u002Finteraction?\n\n### 2. Add the Component\n\nUse [Vanilla JS patterns](references\u002Fvanilla-patterns.md) for HTML structure, event handling, and state management. Always apply the design rules above.\n\nFor **text entry** (forms, search boxes, notes), use `\u002Fadd-text-input` — standard text fields open the on-glasses handwriting + voice composer on focus + tap, so you don't build a keyboard.\n\n### 3. Verify\n\n- [ ] Component is focusable (D-pad navigable)\n- [ ] Focus ring appears on the component (cyan glow)\n- [ ] Enter key activates the component\n- [ ] Escape key navigates back (if applicable)\n- [ ] Content fits within 600x600 viewport\n- [ ] Text is readable on dark background\n- [ ] Scrollable content uses `overflow-y: auto` with `max-height`\n- [ ] Focused elements scroll into view\n\n## Related Skills\n\n- `\u002Fcreate-webapp` — Create a new webapp from scratch\n- `\u002Fconnect-api` — Add API-connected actions\n- `\u002Fadd-text-input` — Text fields, search boxes, and form inputs (on-glasses composer)\n- `\u002Fadd-gestures` — Pinch-to-activate and opt-in continuous drag\n- `\u002Fadd-device-sensors` — Add motion\u002Forientation\u002FGPS sensors\n",{"data":38,"body":40},{"name":4,"description":6,"argument-hint":39},"[component-type] [name]",{"type":41,"children":42},"root",[43,52,58,82,87,100,107,112,118,132,138,143,150,246,252,307,313,351,357,541,547,553,558,591,597,611,630,636,729,735],{"type":44,"tag":45,"props":46,"children":48},"element","h2",{"id":47},"required-reading",[49],{"type":50,"value":51},"text","Required reading",{"type":44,"tag":53,"props":54,"children":55},"p",{},[56],{"type":50,"value":57},"Before generating or modifying any code, read both:",{"type":44,"tag":59,"props":60,"children":61},"ul",{},[62,73],{"type":44,"tag":63,"props":64,"children":65},"li",{},[66],{"type":44,"tag":67,"props":68,"children":70},"code",{"className":69},[],[71],{"type":50,"value":72},"..\u002F..\u002Freferences\u002Fdisplay-guidelines.md",{"type":44,"tag":63,"props":74,"children":75},{},[76],{"type":44,"tag":67,"props":77,"children":79},{"className":78},[],[80],{"type":50,"value":81},"..\u002F..\u002Freferences\u002Fperformance-guidelines.md",{"type":44,"tag":53,"props":83,"children":84},{},[85],{"type":50,"value":86},"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.",{"type":44,"tag":53,"props":88,"children":89},{},[90,92,98],{"type":50,"value":91},"If these reference files are unavailable in an isolated eval, do not search ",{"type":44,"tag":67,"props":93,"children":95},{"className":94},[],[96],{"type":50,"value":97},"\u002F",{"type":50,"value":99},", home directories, or unrelated workspaces. Apply the requirements already present in this skill and continue.",{"type":44,"tag":101,"props":102,"children":104},"h1",{"id":103},"add-ui-components-to-meta-display-glasses-webapp",[105],{"type":50,"value":106},"Add UI Components to Meta Display Glasses WebApp",{"type":44,"tag":53,"props":108,"children":109},{},[110],{"type":50,"value":111},"Add screens, buttons, lists, forms, and other interactive components to an existing webapp. This skill enforces the glasses design constraints and provides implementation patterns.",{"type":44,"tag":45,"props":113,"children":115},{"id":114},"prerequisites",[116],{"type":50,"value":117},"Prerequisites",{"type":44,"tag":59,"props":119,"children":120},{},[121],{"type":44,"tag":63,"props":122,"children":123},{},[124,126],{"type":50,"value":125},"Existing webapp created via ",{"type":44,"tag":67,"props":127,"children":129},{"className":128},[],[130],{"type":50,"value":131},"\u002Fcreate-webapp",{"type":44,"tag":45,"props":133,"children":135},{"id":134},"design-rules",[136],{"type":50,"value":137},"Design Rules",{"type":44,"tag":53,"props":139,"children":140},{},[141],{"type":50,"value":142},"All components must follow these constraints regardless of framework:",{"type":44,"tag":144,"props":145,"children":147},"h3",{"id":146},"viewport-layout",[148],{"type":50,"value":149},"Viewport & Layout",{"type":44,"tag":59,"props":151,"children":152},{},[153,164,185],{"type":44,"tag":63,"props":154,"children":155},{},[156,162],{"type":44,"tag":157,"props":158,"children":159},"strong",{},[160],{"type":50,"value":161},"600x600",{"type":50,"value":163}," fixed viewport — all content must fit within this area",{"type":44,"tag":63,"props":165,"children":166},{},[167,169,175,177,183],{"type":50,"value":168},"Page background ",{"type":44,"tag":67,"props":170,"children":172},{"className":171},[],[173],{"type":50,"value":174},"#000000",{"type":50,"value":176}," (transparent on additive display — real world shows through). UI surfaces (cards, headers, nav) use dark grays so they remain visible. Light text (",{"type":44,"tag":67,"props":178,"children":180},{"className":179},[],[181],{"type":50,"value":182},"#e8e8e8",{"type":50,"value":184},").",{"type":44,"tag":63,"props":186,"children":187},{},[188,190,196,198,204,205,211,212,218,219,225,226,232,233,239,240],{"type":50,"value":189},"Use CSS variables from the theme: ",{"type":44,"tag":67,"props":191,"children":193},{"className":192},[],[194],{"type":50,"value":195},"--bg-primary",{"type":50,"value":197},", ",{"type":44,"tag":67,"props":199,"children":201},{"className":200},[],[202],{"type":50,"value":203},"--bg-secondary",{"type":50,"value":197},{"type":44,"tag":67,"props":206,"children":208},{"className":207},[],[209],{"type":50,"value":210},"--bg-card",{"type":50,"value":197},{"type":44,"tag":67,"props":213,"children":215},{"className":214},[],[216],{"type":50,"value":217},"--text-primary",{"type":50,"value":197},{"type":44,"tag":67,"props":220,"children":222},{"className":221},[],[223],{"type":50,"value":224},"--text-secondary",{"type":50,"value":197},{"type":44,"tag":67,"props":227,"children":229},{"className":228},[],[230],{"type":50,"value":231},"--accent-primary",{"type":50,"value":197},{"type":44,"tag":67,"props":234,"children":236},{"className":235},[],[237],{"type":50,"value":238},"--danger",{"type":50,"value":197},{"type":44,"tag":67,"props":241,"children":243},{"className":242},[],[244],{"type":50,"value":245},"--success",{"type":44,"tag":144,"props":247,"children":249},{"id":248},"d-pad-navigation",[250],{"type":50,"value":251},"D-pad Navigation",{"type":44,"tag":59,"props":253,"children":254},{},[255,267,272,277,289,294],{"type":44,"tag":63,"props":256,"children":257},{},[258,260,265],{"type":50,"value":259},"All interactive elements must be ",{"type":44,"tag":157,"props":261,"children":262},{},[263],{"type":50,"value":264},"focusable",{"type":50,"value":266}," — keyboard-navigable via arrow keys",{"type":44,"tag":63,"props":268,"children":269},{},[270],{"type":50,"value":271},"Enter key activates the focused element",{"type":44,"tag":63,"props":273,"children":274},{},[275],{"type":50,"value":276},"Escape key navigates back",{"type":44,"tag":63,"props":278,"children":279},{},[280,282,287],{"type":50,"value":281},"Focus moves with ",{"type":44,"tag":157,"props":283,"children":284},{},[285],{"type":50,"value":286},"wrap-around",{"type":50,"value":288}," (last → first, first → last)",{"type":44,"tag":63,"props":290,"children":291},{},[292],{"type":50,"value":293},"Focused elements must scroll into view automatically",{"type":44,"tag":63,"props":295,"children":296},{},[297,299,305],{"type":50,"value":298},"Focus ring: cyan glow (",{"type":44,"tag":67,"props":300,"children":302},{"className":301},[],[303],{"type":50,"value":304},"box-shadow: 0 0 20px rgba(0, 212, 255, 0.4)",{"type":50,"value":306},")",{"type":44,"tag":144,"props":308,"children":310},{"id":309},"accessibility",[311],{"type":50,"value":312},"Accessibility",{"type":44,"tag":59,"props":314,"children":315},{},[316,327,346],{"type":44,"tag":63,"props":317,"children":318},{},[319,321],{"type":50,"value":320},"Non-button interactive elements need ",{"type":44,"tag":67,"props":322,"children":324},{"className":323},[],[325],{"type":50,"value":326},"tabindex=\"0\"",{"type":44,"tag":63,"props":328,"children":329},{},[330,332,338,340],{"type":50,"value":331},"Scrollable containers use ",{"type":44,"tag":67,"props":333,"children":335},{"className":334},[],[336],{"type":50,"value":337},"overflow-y: auto",{"type":50,"value":339}," with constrained ",{"type":44,"tag":67,"props":341,"children":343},{"className":342},[],[344],{"type":50,"value":345},"max-height",{"type":44,"tag":63,"props":347,"children":348},{},[349],{"type":50,"value":350},"Text must be readable on dark background (minimum contrast)",{"type":44,"tag":45,"props":352,"children":354},{"id":353},"available-components",[355],{"type":50,"value":356},"Available Components",{"type":44,"tag":358,"props":359,"children":360},"table",{},[361,385],{"type":44,"tag":362,"props":363,"children":364},"thead",{},[365],{"type":44,"tag":366,"props":367,"children":368},"tr",{},[369,375,380],{"type":44,"tag":370,"props":371,"children":372},"th",{},[373],{"type":50,"value":374},"Component",{"type":44,"tag":370,"props":376,"children":377},{},[378],{"type":50,"value":379},"Purpose",{"type":44,"tag":370,"props":381,"children":382},{},[383],{"type":50,"value":384},"When to Use",{"type":44,"tag":386,"props":387,"children":388},"tbody",{},[389,408,426,444,462,480,505,523],{"type":44,"tag":366,"props":390,"children":391},{},[392,398,403],{"type":44,"tag":393,"props":394,"children":395},"td",{},[396],{"type":50,"value":397},"Screen",{"type":44,"tag":393,"props":399,"children":400},{},[401],{"type":50,"value":402},"Full-page view with header + content",{"type":44,"tag":393,"props":404,"children":405},{},[406],{"type":50,"value":407},"Adding a new page\u002Fdestination",{"type":44,"tag":366,"props":409,"children":410},{},[411,416,421],{"type":44,"tag":393,"props":412,"children":413},{},[414],{"type":50,"value":415},"Button",{"type":44,"tag":393,"props":417,"children":418},{},[419],{"type":50,"value":420},"Triggers an action",{"type":44,"tag":393,"props":422,"children":423},{},[424],{"type":50,"value":425},"Any interactive action",{"type":44,"tag":366,"props":427,"children":428},{},[429,434,439],{"type":44,"tag":393,"props":430,"children":431},{},[432],{"type":50,"value":433},"Nav Bar",{"type":44,"tag":393,"props":435,"children":436},{},[437],{"type":50,"value":438},"Row of action buttons at bottom",{"type":44,"tag":393,"props":440,"children":441},{},[442],{"type":50,"value":443},"Screen-level actions",{"type":44,"tag":366,"props":445,"children":446},{},[447,452,457],{"type":44,"tag":393,"props":448,"children":449},{},[450],{"type":50,"value":451},"List",{"type":44,"tag":393,"props":453,"children":454},{},[455],{"type":50,"value":456},"Scrollable list of items",{"type":44,"tag":393,"props":458,"children":459},{},[460],{"type":50,"value":461},"Displaying collections",{"type":44,"tag":366,"props":463,"children":464},{},[465,470,475],{"type":44,"tag":393,"props":466,"children":467},{},[468],{"type":50,"value":469},"Card",{"type":44,"tag":393,"props":471,"children":472},{},[473],{"type":50,"value":474},"Data display block",{"type":44,"tag":393,"props":476,"children":477},{},[478],{"type":50,"value":479},"Showing stats, values",{"type":44,"tag":366,"props":481,"children":482},{},[483,488,493],{"type":44,"tag":393,"props":484,"children":485},{},[486],{"type":50,"value":487},"Form",{"type":44,"tag":393,"props":489,"children":490},{},[491],{"type":50,"value":492},"Input fields with submit",{"type":44,"tag":393,"props":494,"children":495},{},[496,498,504],{"type":50,"value":497},"Collecting user input (see ",{"type":44,"tag":67,"props":499,"children":501},{"className":500},[],[502],{"type":50,"value":503},"\u002Fadd-text-input",{"type":50,"value":306},{"type":44,"tag":366,"props":506,"children":507},{},[508,513,518],{"type":44,"tag":393,"props":509,"children":510},{},[511],{"type":50,"value":512},"Toggle",{"type":44,"tag":393,"props":514,"children":515},{},[516],{"type":50,"value":517},"On\u002Foff setting",{"type":44,"tag":393,"props":519,"children":520},{},[521],{"type":50,"value":522},"Boolean settings",{"type":44,"tag":366,"props":524,"children":525},{},[526,531,536],{"type":44,"tag":393,"props":527,"children":528},{},[529],{"type":50,"value":530},"Counter",{"type":44,"tag":393,"props":532,"children":533},{},[534],{"type":50,"value":535},"+\u002F- with value display",{"type":44,"tag":393,"props":537,"children":538},{},[539],{"type":50,"value":540},"Numeric adjustments",{"type":44,"tag":45,"props":542,"children":544},{"id":543},"steps",[545],{"type":50,"value":546},"Steps",{"type":44,"tag":144,"props":548,"children":550},{"id":549},"_1-gather-information",[551],{"type":50,"value":552},"1. Gather Information",{"type":44,"tag":53,"props":554,"children":555},{},[556],{"type":50,"value":557},"Ask the user:",{"type":44,"tag":59,"props":559,"children":560},{},[561,571,581],{"type":44,"tag":63,"props":562,"children":563},{},[564,569],{"type":44,"tag":157,"props":565,"children":566},{},[567],{"type":50,"value":568},"What component?",{"type":50,"value":570}," Screen, button, list, card, form, toggle, counter?",{"type":44,"tag":63,"props":572,"children":573},{},[574,579],{"type":44,"tag":157,"props":575,"children":576},{},[577],{"type":50,"value":578},"Where?",{"type":50,"value":580}," Which screen should it be added to (or is it a new screen)?",{"type":44,"tag":63,"props":582,"children":583},{},[584,589],{"type":44,"tag":157,"props":585,"children":586},{},[587],{"type":50,"value":588},"Behavior?",{"type":50,"value":590}," What happens on activation\u002Finteraction?",{"type":44,"tag":144,"props":592,"children":594},{"id":593},"_2-add-the-component",[595],{"type":50,"value":596},"2. Add the Component",{"type":44,"tag":53,"props":598,"children":599},{},[600,602,609],{"type":50,"value":601},"Use ",{"type":44,"tag":603,"props":604,"children":606},"a",{"href":605},"references\u002Fvanilla-patterns.md",[607],{"type":50,"value":608},"Vanilla JS patterns",{"type":50,"value":610}," for HTML structure, event handling, and state management. Always apply the design rules above.",{"type":44,"tag":53,"props":612,"children":613},{},[614,616,621,623,628],{"type":50,"value":615},"For ",{"type":44,"tag":157,"props":617,"children":618},{},[619],{"type":50,"value":620},"text entry",{"type":50,"value":622}," (forms, search boxes, notes), use ",{"type":44,"tag":67,"props":624,"children":626},{"className":625},[],[627],{"type":50,"value":503},{"type":50,"value":629}," — standard text fields open the on-glasses handwriting + voice composer on focus + tap, so you don't build a keyboard.",{"type":44,"tag":144,"props":631,"children":633},{"id":632},"_3-verify",[634],{"type":50,"value":635},"3. Verify",{"type":44,"tag":59,"props":637,"children":640},{"className":638},[639],"contains-task-list",[641,654,663,672,681,690,699,720],{"type":44,"tag":63,"props":642,"children":645},{"className":643},[644],"task-list-item",[646,652],{"type":44,"tag":647,"props":648,"children":651},"input",{"disabled":649,"type":650},true,"checkbox",[],{"type":50,"value":653}," Component is focusable (D-pad navigable)",{"type":44,"tag":63,"props":655,"children":657},{"className":656},[644],[658,661],{"type":44,"tag":647,"props":659,"children":660},{"disabled":649,"type":650},[],{"type":50,"value":662}," Focus ring appears on the component (cyan glow)",{"type":44,"tag":63,"props":664,"children":666},{"className":665},[644],[667,670],{"type":44,"tag":647,"props":668,"children":669},{"disabled":649,"type":650},[],{"type":50,"value":671}," Enter key activates the component",{"type":44,"tag":63,"props":673,"children":675},{"className":674},[644],[676,679],{"type":44,"tag":647,"props":677,"children":678},{"disabled":649,"type":650},[],{"type":50,"value":680}," Escape key navigates back (if applicable)",{"type":44,"tag":63,"props":682,"children":684},{"className":683},[644],[685,688],{"type":44,"tag":647,"props":686,"children":687},{"disabled":649,"type":650},[],{"type":50,"value":689}," Content fits within 600x600 viewport",{"type":44,"tag":63,"props":691,"children":693},{"className":692},[644],[694,697],{"type":44,"tag":647,"props":695,"children":696},{"disabled":649,"type":650},[],{"type":50,"value":698}," Text is readable on dark background",{"type":44,"tag":63,"props":700,"children":702},{"className":701},[644],[703,706,708,713,715],{"type":44,"tag":647,"props":704,"children":705},{"disabled":649,"type":650},[],{"type":50,"value":707}," Scrollable content uses ",{"type":44,"tag":67,"props":709,"children":711},{"className":710},[],[712],{"type":50,"value":337},{"type":50,"value":714}," with ",{"type":44,"tag":67,"props":716,"children":718},{"className":717},[],[719],{"type":50,"value":345},{"type":44,"tag":63,"props":721,"children":723},{"className":722},[644],[724,727],{"type":44,"tag":647,"props":725,"children":726},{"disabled":649,"type":650},[],{"type":50,"value":728}," Focused elements scroll into view",{"type":44,"tag":45,"props":730,"children":732},{"id":731},"related-skills",[733],{"type":50,"value":734},"Related Skills",{"type":44,"tag":59,"props":736,"children":737},{},[738,748,759,769,780],{"type":44,"tag":63,"props":739,"children":740},{},[741,746],{"type":44,"tag":67,"props":742,"children":744},{"className":743},[],[745],{"type":50,"value":131},{"type":50,"value":747}," — Create a new webapp from scratch",{"type":44,"tag":63,"props":749,"children":750},{},[751,757],{"type":44,"tag":67,"props":752,"children":754},{"className":753},[],[755],{"type":50,"value":756},"\u002Fconnect-api",{"type":50,"value":758}," — Add API-connected actions",{"type":44,"tag":63,"props":760,"children":761},{},[762,767],{"type":44,"tag":67,"props":763,"children":765},{"className":764},[],[766],{"type":50,"value":503},{"type":50,"value":768}," — Text fields, search boxes, and form inputs (on-glasses composer)",{"type":44,"tag":63,"props":770,"children":771},{},[772,778],{"type":44,"tag":67,"props":773,"children":775},{"className":774},[],[776],{"type":50,"value":777},"\u002Fadd-gestures",{"type":50,"value":779}," — Pinch-to-activate and opt-in continuous drag",{"type":44,"tag":63,"props":781,"children":782},{},[783,789],{"type":44,"tag":67,"props":784,"children":786},{"className":785},[],[787],{"type":50,"value":788},"\u002Fadd-device-sensors",{"type":50,"value":790}," — Add motion\u002Forientation\u002FGPS sensors",{"items":792,"total":978},[793,813,827,848,869,886,897,915,928,941,956,968],{"slug":794,"name":794,"fn":795,"description":796,"org":797,"tags":798,"stars":810,"repoUrl":811,"updatedAt":812},"relay-best-practices","write idiomatic Relay code","Best practices for writing idiomatic Relay code. ALWAYS use this skill when writing or modifying React components that use Relay for data fetching. Covers fragments, queries, mutations, pagination, and common anti-patterns. Use when you see `useFragment`, `useLazyLoadQuery`, `usePreloadedQuery`, `useMutation`, `usePaginationFragment`, `graphql` template literals, `react-relay` imports, or `__generated__\u002F*.graphql` files. Also use when asked to explain Relay concepts, debug Relay issues, or review Relay code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[799,802,803,806,807],{"name":800,"slug":801,"type":16},"Engineering","engineering",{"name":24,"slug":25,"type":16},{"name":804,"slug":805,"type":16},"GraphQL","graphql",{"name":14,"slug":15,"type":16},{"name":808,"slug":809,"type":16},"Relay","relay",18950,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Frelay","2026-04-22T04:58:15.370563",{"slug":814,"name":814,"fn":815,"description":816,"org":817,"tags":818,"stars":810,"repoUrl":811,"updatedAt":826},"relay-performance","optimize Relay application performance","Performance best practices for Relay applications. Use when optimizing data fetching, reducing re-renders, configuring caching, or improving time to first meaningful paint. Covers query placement, @defer, pagination, fetch policies, garbage collection, fragment granularity, and server-side filtering. Companion to the relay-best-practices skill which covers correctness and architecture.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[819,820,821,824,825],{"name":24,"slug":25,"type":16},{"name":804,"slug":805,"type":16},{"name":822,"slug":823,"type":16},"Performance","performance",{"name":14,"slug":15,"type":16},{"name":808,"slug":809,"type":16},"2026-06-10T07:30:28.726513",{"slug":828,"name":828,"fn":829,"description":830,"org":831,"tags":832,"stars":845,"repoUrl":846,"updatedAt":847},"add-shape-types-to-torch-model","annotate PyTorch models with tensor shapes","Port a PyTorch model to use pyrefly's tensor shape type system (Tensor[[B, C, H, W]], Int[T]). Use this skill whenever the user wants to add shape annotations to a PyTorch model, type a model with tensor dimensions, port a model to use shape tracking, or annotate model forward methods with tensor shapes. Also use when the user mentions tensor shape ports, Int types for PyTorch, or pyrefly shape checking on a model file. Invoke BEFORE starting any model port — the skill's gated workflow prevents common failure modes.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[833,836,839,842],{"name":834,"slug":835,"type":16},"Data Modeling","data-modeling",{"name":837,"slug":838,"type":16},"Deep Learning","deep-learning",{"name":840,"slug":841,"type":16},"Python","python",{"name":843,"slug":844,"type":16},"PyTorch","pytorch",6833,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fpyrefly","2026-07-18T05:12:08.515952",{"slug":849,"name":849,"fn":850,"description":851,"org":852,"tags":853,"stars":866,"repoUrl":867,"updatedAt":868},"camera-streaming","configure camera streaming and photo capture","Stream, video frames, photo capture, resolution\u002Fframe rate configuration",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[854,857,860,863],{"name":855,"slug":856,"type":16},"Camera","camera",{"name":858,"slug":859,"type":16},"Hardware","hardware",{"name":861,"slug":862,"type":16},"iOS","ios",{"name":864,"slug":865,"type":16},"Video","video",488,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-dat-ios","2026-08-06T05:38:47.523424",{"slug":870,"name":870,"fn":871,"description":872,"org":873,"tags":874,"stars":866,"repoUrl":867,"updatedAt":885},"dat-conventions","develop iOS applications with DAT SDK","Swift patterns, async\u002Fawait, naming conventions, key types for DAT SDK iOS development",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[875,876,879,882],{"name":861,"slug":862,"type":16},{"name":877,"slug":878,"type":16},"Mobile","mobile",{"name":880,"slug":881,"type":16},"SDK","sdk",{"name":883,"slug":884,"type":16},"Swift","swift","2026-08-06T05:38:49.536777",{"slug":887,"name":887,"fn":888,"description":889,"org":890,"tags":891,"stars":866,"repoUrl":867,"updatedAt":896},"debugging","debug wearable device software","Common issues, Developer Mode, version compatibility, state machine diagnosis",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[892,894,895],{"name":893,"slug":887,"type":16},"Debugging",{"name":800,"slug":801,"type":16},{"name":861,"slug":862,"type":16},"2026-08-06T05:38:50.51086",{"slug":898,"name":898,"fn":899,"description":900,"org":901,"tags":902,"stars":866,"repoUrl":867,"updatedAt":914},"display-access","manage display capabilities on wearable devices","Display capability setup, display-capable device selection, UI DSL, icons, buttons, images, and video playback",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[903,906,909,912,913],{"name":904,"slug":905,"type":16},"Design","design",{"name":907,"slug":908,"type":16},"Images","images",{"name":910,"slug":911,"type":16},"Interaction","interaction",{"name":21,"slug":22,"type":16},{"name":864,"slug":865,"type":16},"2026-08-06T05:38:53.520488",{"slug":916,"name":916,"fn":917,"description":918,"org":919,"tags":920,"stars":866,"repoUrl":867,"updatedAt":927},"getting-started","set up Meta wearable SDK integration","SDK setup, Swift Package Manager integration, Info.plist configuration, and first connection to Meta glasses",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[921,924,925,926],{"name":922,"slug":923,"type":16},"Configuration","configuration",{"name":861,"slug":862,"type":16},{"name":880,"slug":881,"type":16},{"name":883,"slug":884,"type":16},"2026-08-06T05:38:48.514522",{"slug":929,"name":929,"fn":930,"description":931,"org":932,"tags":933,"stars":866,"repoUrl":867,"updatedAt":940},"live-debugging-mcp","debug iOS wearable applications","Use this whenever debugging an iOS DAT app with local DAT Inspector MCP tools, live device events, Meta AI app\u002Fdevice boundary issues, permissions, registration, sessions, streaming, callbacks, or user reports that the app cannot communicate with glasses.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[934,935,936,939],{"name":893,"slug":887,"type":16},{"name":861,"slug":862,"type":16},{"name":937,"slug":938,"type":16},"MCP","mcp",{"name":877,"slug":878,"type":16},"2026-08-06T06:09:15.013902",{"slug":942,"name":942,"fn":943,"description":944,"org":945,"tags":946,"stars":866,"repoUrl":867,"updatedAt":955},"mockdevice-testing","test wearable apps with mock devices","MockDeviceKit for testing without physical glasses hardware",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[947,948,949,952],{"name":861,"slug":862,"type":16},{"name":877,"slug":878,"type":16},{"name":950,"slug":951,"type":16},"QA","qa",{"name":953,"slug":954,"type":16},"Testing","testing","2026-05-15T06:14:37.406692",{"slug":957,"name":957,"fn":958,"description":959,"org":960,"tags":961,"stars":866,"repoUrl":867,"updatedAt":967},"permissions-registration","register apps with Meta AI","App registration with Meta AI, camera permission flows",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[962,963,964],{"name":855,"slug":856,"type":16},{"name":861,"slug":862,"type":16},{"name":965,"slug":966,"type":16},"Permissions","permissions","2026-05-15T06:14:46.030253",{"slug":969,"name":969,"fn":970,"description":971,"org":972,"tags":973,"stars":866,"repoUrl":867,"updatedAt":977},"sample-app-guide","build wearable apps with camera streaming","Building a complete DAT app with camera streaming and photo capture",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[974,975,976],{"name":855,"slug":856,"type":16},{"name":861,"slug":862,"type":16},{"name":877,"slug":878,"type":16},"2026-08-06T05:38:51.509255",34,{"items":980,"total":1065},[981,993,1003,1017,1029,1041,1048],{"slug":982,"name":982,"fn":983,"description":984,"org":985,"tags":986,"stars":26,"repoUrl":27,"updatedAt":992},"add-device-sensors","integrate device sensor data","Add device sensor data to a Meta Display Glasses webapp — IMU (accelerometer, gyroscope, orientation) via DeviceMotionEvent\u002FDeviceOrientationEvent, and GPS location via navigator.geolocation. Use when the user wants motion tracking, compass, level tool, step counter, shake detection, head tracking, or location.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[987,988,989],{"name":24,"slug":25,"type":16},{"name":858,"slug":859,"type":16},{"name":990,"slug":991,"type":16},"IoT","iot","2026-09-01T08:30:33.453548",{"slug":994,"name":994,"fn":995,"description":996,"org":997,"tags":998,"stars":26,"repoUrl":27,"updatedAt":1002},"add-gestures","handle gesture interactions in webapps","Handle EMG pinch (tap-to-activate) and opt into continuous pinch-and-drag in a Meta Display Glasses webapp. Use when the user wants sliders, drawing, maps, drag interactions, or game-style continuous input.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[999,1000,1001],{"name":904,"slug":905,"type":16},{"name":24,"slug":25,"type":16},{"name":910,"slug":911,"type":16},"2026-09-01T08:30:53.889244",{"slug":1004,"name":1004,"fn":1005,"description":1006,"org":1007,"tags":1008,"stars":26,"repoUrl":27,"updatedAt":1016},"add-local-storage","add client-side data persistence","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.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1009,1010,1013],{"name":24,"slug":25,"type":16},{"name":1011,"slug":1012,"type":16},"Persistence","persistence",{"name":1014,"slug":1015,"type":16},"Storage","storage","2026-09-01T08:30:31.384362",{"slug":1018,"name":1018,"fn":1019,"description":1020,"org":1021,"tags":1022,"stars":26,"repoUrl":27,"updatedAt":1028},"add-offline","enable offline support for webapps","Make a Meta Display Glasses webapp work offline with a Service Worker + Cache API (precache the app shell, cache-first fetch, online\u002Foffline UI). Use when the user wants offline support or resilience to flaky Wi-Fi.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1023,1024,1027],{"name":24,"slug":25,"type":16},{"name":1025,"slug":1026,"type":16},"Offline","offline",{"name":822,"slug":823,"type":16},"2026-09-01T08:30:33.83287",{"slug":1030,"name":1030,"fn":1031,"description":1032,"org":1033,"tags":1034,"stars":26,"repoUrl":27,"updatedAt":1040},"add-text-input","add text input to webapps","Add text entry to a Meta Display Glasses webapp. Standard HTML inputs open the on-glasses composer (handwriting + voice) when focused and tapped. Use when the user wants a text field, search box, form input, or notes area.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1035,1038,1039],{"name":1036,"slug":1037,"type":16},"Forms","forms",{"name":24,"slug":25,"type":16},{"name":21,"slug":22,"type":16},"2026-09-01T08:30:30.563354",{"slug":4,"name":4,"fn":5,"description":6,"org":1042,"tags":1043,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1044,1045,1046,1047],{"name":24,"slug":25,"type":16},{"name":18,"slug":19,"type":16},{"name":14,"slug":15,"type":16},{"name":21,"slug":22,"type":16},{"slug":1049,"name":1049,"fn":1050,"description":1051,"org":1052,"tags":1053,"stars":26,"repoUrl":27,"updatedAt":1064},"connect-api","connect webapps to REST APIs and WebSockets","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\u002Ferror states, or cache API responses.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1054,1057,1058,1061],{"name":1055,"slug":1056,"type":16},"API Development","api-development",{"name":24,"slug":25,"type":16},{"name":1059,"slug":1060,"type":16},"REST API","rest-api",{"name":1062,"slug":1063,"type":16},"WebSockets","websockets","2026-09-01T08:30:30.968156",12]