[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-meta-add-text-input":3,"mdc--wodrbx-key":34,"related-org-meta-add-text-input":1298,"related-repo-meta-add-text-input":1488},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":29,"sourceUrl":32,"mdContent":33},"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},"meta","Meta Open Source","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmeta.png","facebook",[13,17,20],{"name":14,"slug":15,"type":16},"Forms","forms","tag",{"name":18,"slug":19,"type":16},"UI Components","ui-components",{"name":21,"slug":22,"type":16},"Frontend","frontend",189,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-webapp","2026-09-01T08:30:30.563354",null,33,[],{"repoUrl":24,"stars":23,"forks":27,"topics":30,"description":31},[],"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-text-input","---\nname: add-text-input\ndescription: >-\n  Add text entry to a Meta Display Glasses webapp. Standard HTML inputs open\n  the on-glasses composer (handwriting + voice) when focused and tapped. Use\n  when the user wants a text field, search box, form input, or notes area.\nargument-hint: \"[field: text|search|textarea|form]\"\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 Text Input to Meta Display Glasses WebApp\n\nAdd text entry to a webapp using **standard HTML form controls**. On the glasses, a focusable text control opens the on-device **composer** (handwriting + voice) when the wearer focuses it and taps. Whatever they enter is committed back into the field. **No SDK call is needed** — you do not build the composer; the glasses provide it.\n\n## Prerequisites\n\n- Existing webapp created via `\u002Fcreate-webapp`\n\n## How It Works\n\nAny standard focusable text control becomes voice + handwriting capable for free:\n\n- `\u003Cinput type=\"text\">`, `type=\"search\"`, `type=\"email\"`, `type=\"url\"`, `type=\"tel\"`, `type=\"number\"`\n- `\u003Ctextarea>`\n- `contenteditable` elements\n\nThe interaction is **focus the field, then tap** to open the composer. Text is committed back to your field and fires the standard `input` and `change` events — read the value there, not from `keydown`.\n\n## ⚠️ Caveats (must-include)\n\n- The composer opens on **focus + tap**, not on focus alone. A programmatic `.focus()` will **not** surface it — the wearer must tap a focused field.\n- `inputmode`, `enterkeyhint`, and `type` do **not** change the composer. `type` only controls **eligibility**.\n- **Avoid `type=password`** (and `date`, `checkbox`, `radio`, etc.) — the composer won't open for them. Never rely on the composer for a password field.\n- You **cannot** choose handwriting-only vs dictation-only from the page — the wearer picks in the composer.\n- On some builds the composer may be unavailable. Keep fields usable and don't make required input depend on it without a fallback (e.g. D-pad selection).\n- Read committed text from `input` \u002F `change` events — **not** `keydown` (there is no hardware keyboard).\n\n## Steps\n\n### 1. Add the Field with a Hint\n\nGive every field a `placeholder` (or `aria-label`) — it's the hint the wearer sees for what the field is for:\n\n```html\n\u003Clabel for=\"note\">Note\u003C\u002Flabel>\n\u003Ctextarea id=\"note\" class=\"focusable\" placeholder=\"Tap to write or speak\">\u003C\u002Ftextarea>\n```\n\nFor a search box:\n\n```html\n\u003Cinput id=\"q\" type=\"search\" class=\"focusable\" placeholder=\"Tap to search\">\n```\n\n### 2. Make It Focusable + Read the Value\n\nStandard form controls are focusable by default; ensure they participate in your D-pad focus order. Read the value on `input` (fires as the composer commits) or `change`:\n\n```javascript\nvar note = document.getElementById('note');\nnote.addEventListener('input', function () {\n  console.log('value:', note.value);   \u002F\u002F composer commits fire 'input'\n  \u002F\u002F e.g. persist via \u002Fadd-local-storage, or run a search\n});\n```\n\n### 3. Wire Search \u002F Submit (optional)\n\n```javascript\nvar q = document.getElementById('q');\nq.addEventListener('change', function () {\n  runSearch(q.value);\n});\n```\n\n## Verify\n\n- [ ] Field is focusable and reachable via D-pad\n- [ ] Focus-then-tap opens the on-glasses composer\n- [ ] Committed text appears in the field\n- [ ] An `input` (or `change`) handler reads `field.value` — not `keydown`\n- [ ] Every field has a `placeholder` or `aria-label` hint\n- [ ] No `type=password` (or other non-text type) used for composer entry\n- [ ] App stays usable if the composer is unavailable on a build\n\n## Related Skills\n\n- `\u002Fadd-ui` — Add forms, search bars, and other UI around the field\n",{"data":35,"body":37},{"name":4,"description":6,"argument-hint":36},"[field: text|search|textarea|form]",{"type":38,"children":39},"root",[40,49,55,79,84,97,104,131,137,151,157,162,230,266,272,434,440,447,468,639,644,750,756,775,990,996,1149,1155,1272,1278,1292],{"type":41,"tag":42,"props":43,"children":45},"element","h2",{"id":44},"required-reading",[46],{"type":47,"value":48},"text","Required reading",{"type":41,"tag":50,"props":51,"children":52},"p",{},[53],{"type":47,"value":54},"Before generating or modifying any code, read both:",{"type":41,"tag":56,"props":57,"children":58},"ul",{},[59,70],{"type":41,"tag":60,"props":61,"children":62},"li",{},[63],{"type":41,"tag":64,"props":65,"children":67},"code",{"className":66},[],[68],{"type":47,"value":69},"..\u002F..\u002Freferences\u002Fdisplay-guidelines.md",{"type":41,"tag":60,"props":71,"children":72},{},[73],{"type":41,"tag":64,"props":74,"children":76},{"className":75},[],[77],{"type":47,"value":78},"..\u002F..\u002Freferences\u002Fperformance-guidelines.md",{"type":41,"tag":50,"props":80,"children":81},{},[82],{"type":47,"value":83},"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":41,"tag":50,"props":85,"children":86},{},[87,89,95],{"type":47,"value":88},"If these reference files are unavailable in an isolated eval, do not search ",{"type":41,"tag":64,"props":90,"children":92},{"className":91},[],[93],{"type":47,"value":94},"\u002F",{"type":47,"value":96},", home directories, or unrelated workspaces. Apply the requirements already present in this skill and continue.",{"type":41,"tag":98,"props":99,"children":101},"h1",{"id":100},"add-text-input-to-meta-display-glasses-webapp",[102],{"type":47,"value":103},"Add Text Input to Meta Display Glasses WebApp",{"type":41,"tag":50,"props":105,"children":106},{},[107,109,115,117,122,124,129],{"type":47,"value":108},"Add text entry to a webapp using ",{"type":41,"tag":110,"props":111,"children":112},"strong",{},[113],{"type":47,"value":114},"standard HTML form controls",{"type":47,"value":116},". On the glasses, a focusable text control opens the on-device ",{"type":41,"tag":110,"props":118,"children":119},{},[120],{"type":47,"value":121},"composer",{"type":47,"value":123}," (handwriting + voice) when the wearer focuses it and taps. Whatever they enter is committed back into the field. ",{"type":41,"tag":110,"props":125,"children":126},{},[127],{"type":47,"value":128},"No SDK call is needed",{"type":47,"value":130}," — you do not build the composer; the glasses provide it.",{"type":41,"tag":42,"props":132,"children":134},{"id":133},"prerequisites",[135],{"type":47,"value":136},"Prerequisites",{"type":41,"tag":56,"props":138,"children":139},{},[140],{"type":41,"tag":60,"props":141,"children":142},{},[143,145],{"type":47,"value":144},"Existing webapp created via ",{"type":41,"tag":64,"props":146,"children":148},{"className":147},[],[149],{"type":47,"value":150},"\u002Fcreate-webapp",{"type":41,"tag":42,"props":152,"children":154},{"id":153},"how-it-works",[155],{"type":47,"value":156},"How It Works",{"type":41,"tag":50,"props":158,"children":159},{},[160],{"type":47,"value":161},"Any standard focusable text control becomes voice + handwriting capable for free:",{"type":41,"tag":56,"props":163,"children":164},{},[165,210,219],{"type":41,"tag":60,"props":166,"children":167},{},[168,174,176,182,183,189,190,196,197,203,204],{"type":41,"tag":64,"props":169,"children":171},{"className":170},[],[172],{"type":47,"value":173},"\u003Cinput type=\"text\">",{"type":47,"value":175},", ",{"type":41,"tag":64,"props":177,"children":179},{"className":178},[],[180],{"type":47,"value":181},"type=\"search\"",{"type":47,"value":175},{"type":41,"tag":64,"props":184,"children":186},{"className":185},[],[187],{"type":47,"value":188},"type=\"email\"",{"type":47,"value":175},{"type":41,"tag":64,"props":191,"children":193},{"className":192},[],[194],{"type":47,"value":195},"type=\"url\"",{"type":47,"value":175},{"type":41,"tag":64,"props":198,"children":200},{"className":199},[],[201],{"type":47,"value":202},"type=\"tel\"",{"type":47,"value":175},{"type":41,"tag":64,"props":205,"children":207},{"className":206},[],[208],{"type":47,"value":209},"type=\"number\"",{"type":41,"tag":60,"props":211,"children":212},{},[213],{"type":41,"tag":64,"props":214,"children":216},{"className":215},[],[217],{"type":47,"value":218},"\u003Ctextarea>",{"type":41,"tag":60,"props":220,"children":221},{},[222,228],{"type":41,"tag":64,"props":223,"children":225},{"className":224},[],[226],{"type":47,"value":227},"contenteditable",{"type":47,"value":229}," elements",{"type":41,"tag":50,"props":231,"children":232},{},[233,235,240,242,248,250,256,258,264],{"type":47,"value":234},"The interaction is ",{"type":41,"tag":110,"props":236,"children":237},{},[238],{"type":47,"value":239},"focus the field, then tap",{"type":47,"value":241}," to open the composer. Text is committed back to your field and fires the standard ",{"type":41,"tag":64,"props":243,"children":245},{"className":244},[],[246],{"type":47,"value":247},"input",{"type":47,"value":249}," and ",{"type":41,"tag":64,"props":251,"children":253},{"className":252},[],[254],{"type":47,"value":255},"change",{"type":47,"value":257}," events — read the value there, not from ",{"type":41,"tag":64,"props":259,"children":261},{"className":260},[],[262],{"type":47,"value":263},"keydown",{"type":47,"value":265},".",{"type":41,"tag":42,"props":267,"children":269},{"id":268},"️-caveats-must-include",[270],{"type":47,"value":271},"⚠️ Caveats (must-include)",{"type":41,"tag":56,"props":273,"children":274},{},[275,302,347,385,397,402],{"type":41,"tag":60,"props":276,"children":277},{},[278,280,285,287,293,295,300],{"type":47,"value":279},"The composer opens on ",{"type":41,"tag":110,"props":281,"children":282},{},[283],{"type":47,"value":284},"focus + tap",{"type":47,"value":286},", not on focus alone. A programmatic ",{"type":41,"tag":64,"props":288,"children":290},{"className":289},[],[291],{"type":47,"value":292},".focus()",{"type":47,"value":294}," will ",{"type":41,"tag":110,"props":296,"children":297},{},[298],{"type":47,"value":299},"not",{"type":47,"value":301}," surface it — the wearer must tap a focused field.",{"type":41,"tag":60,"props":303,"children":304},{},[305,311,312,318,320,326,328,332,334,339,341,346],{"type":41,"tag":64,"props":306,"children":308},{"className":307},[],[309],{"type":47,"value":310},"inputmode",{"type":47,"value":175},{"type":41,"tag":64,"props":313,"children":315},{"className":314},[],[316],{"type":47,"value":317},"enterkeyhint",{"type":47,"value":319},", and ",{"type":41,"tag":64,"props":321,"children":323},{"className":322},[],[324],{"type":47,"value":325},"type",{"type":47,"value":327}," do ",{"type":41,"tag":110,"props":329,"children":330},{},[331],{"type":47,"value":299},{"type":47,"value":333}," change the composer. ",{"type":41,"tag":64,"props":335,"children":337},{"className":336},[],[338],{"type":47,"value":325},{"type":47,"value":340}," only controls ",{"type":41,"tag":110,"props":342,"children":343},{},[344],{"type":47,"value":345},"eligibility",{"type":47,"value":265},{"type":41,"tag":60,"props":348,"children":349},{},[350,361,363,369,370,376,377,383],{"type":41,"tag":110,"props":351,"children":352},{},[353,355],{"type":47,"value":354},"Avoid ",{"type":41,"tag":64,"props":356,"children":358},{"className":357},[],[359],{"type":47,"value":360},"type=password",{"type":47,"value":362}," (and ",{"type":41,"tag":64,"props":364,"children":366},{"className":365},[],[367],{"type":47,"value":368},"date",{"type":47,"value":175},{"type":41,"tag":64,"props":371,"children":373},{"className":372},[],[374],{"type":47,"value":375},"checkbox",{"type":47,"value":175},{"type":41,"tag":64,"props":378,"children":380},{"className":379},[],[381],{"type":47,"value":382},"radio",{"type":47,"value":384},", etc.) — the composer won't open for them. Never rely on the composer for a password field.",{"type":41,"tag":60,"props":386,"children":387},{},[388,390,395],{"type":47,"value":389},"You ",{"type":41,"tag":110,"props":391,"children":392},{},[393],{"type":47,"value":394},"cannot",{"type":47,"value":396}," choose handwriting-only vs dictation-only from the page — the wearer picks in the composer.",{"type":41,"tag":60,"props":398,"children":399},{},[400],{"type":47,"value":401},"On some builds the composer may be unavailable. Keep fields usable and don't make required input depend on it without a fallback (e.g. D-pad selection).",{"type":41,"tag":60,"props":403,"children":404},{},[405,407,412,414,419,421,425,427,432],{"type":47,"value":406},"Read committed text from ",{"type":41,"tag":64,"props":408,"children":410},{"className":409},[],[411],{"type":47,"value":247},{"type":47,"value":413}," \u002F ",{"type":41,"tag":64,"props":415,"children":417},{"className":416},[],[418],{"type":47,"value":255},{"type":47,"value":420}," events — ",{"type":41,"tag":110,"props":422,"children":423},{},[424],{"type":47,"value":299},{"type":47,"value":426}," ",{"type":41,"tag":64,"props":428,"children":430},{"className":429},[],[431],{"type":47,"value":263},{"type":47,"value":433}," (there is no hardware keyboard).",{"type":41,"tag":42,"props":435,"children":437},{"id":436},"steps",[438],{"type":47,"value":439},"Steps",{"type":41,"tag":441,"props":442,"children":444},"h3",{"id":443},"_1-add-the-field-with-a-hint",[445],{"type":47,"value":446},"1. Add the Field with a Hint",{"type":41,"tag":50,"props":448,"children":449},{},[450,452,458,460,466],{"type":47,"value":451},"Give every field a ",{"type":41,"tag":64,"props":453,"children":455},{"className":454},[],[456],{"type":47,"value":457},"placeholder",{"type":47,"value":459}," (or ",{"type":41,"tag":64,"props":461,"children":463},{"className":462},[],[464],{"type":47,"value":465},"aria-label",{"type":47,"value":467},") — it's the hint the wearer sees for what the field is for:",{"type":41,"tag":469,"props":470,"children":475},"pre",{"className":471,"code":472,"language":473,"meta":474,"style":474},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Clabel for=\"note\">Note\u003C\u002Flabel>\n\u003Ctextarea id=\"note\" class=\"focusable\" placeholder=\"Tap to write or speak\">\u003C\u002Ftextarea>\n","html","",[476],{"type":41,"tag":64,"props":477,"children":478},{"__ignoreMap":474},[479,548],{"type":41,"tag":480,"props":481,"children":484},"span",{"class":482,"line":483},"line",1,[485,491,497,503,508,513,519,523,528,534,539,543],{"type":41,"tag":480,"props":486,"children":488},{"style":487},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[489],{"type":47,"value":490},"\u003C",{"type":41,"tag":480,"props":492,"children":494},{"style":493},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[495],{"type":47,"value":496},"label",{"type":41,"tag":480,"props":498,"children":500},{"style":499},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[501],{"type":47,"value":502}," for",{"type":41,"tag":480,"props":504,"children":505},{"style":487},[506],{"type":47,"value":507},"=",{"type":41,"tag":480,"props":509,"children":510},{"style":487},[511],{"type":47,"value":512},"\"",{"type":41,"tag":480,"props":514,"children":516},{"style":515},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[517],{"type":47,"value":518},"note",{"type":41,"tag":480,"props":520,"children":521},{"style":487},[522],{"type":47,"value":512},{"type":41,"tag":480,"props":524,"children":525},{"style":487},[526],{"type":47,"value":527},">",{"type":41,"tag":480,"props":529,"children":531},{"style":530},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[532],{"type":47,"value":533},"Note",{"type":41,"tag":480,"props":535,"children":536},{"style":487},[537],{"type":47,"value":538},"\u003C\u002F",{"type":41,"tag":480,"props":540,"children":541},{"style":493},[542],{"type":47,"value":496},{"type":41,"tag":480,"props":544,"children":545},{"style":487},[546],{"type":47,"value":547},">\n",{"type":41,"tag":480,"props":549,"children":551},{"class":482,"line":550},2,[552,556,561,566,570,574,578,582,587,591,595,600,604,609,613,617,622,626,631,635],{"type":41,"tag":480,"props":553,"children":554},{"style":487},[555],{"type":47,"value":490},{"type":41,"tag":480,"props":557,"children":558},{"style":493},[559],{"type":47,"value":560},"textarea",{"type":41,"tag":480,"props":562,"children":563},{"style":499},[564],{"type":47,"value":565}," id",{"type":41,"tag":480,"props":567,"children":568},{"style":487},[569],{"type":47,"value":507},{"type":41,"tag":480,"props":571,"children":572},{"style":487},[573],{"type":47,"value":512},{"type":41,"tag":480,"props":575,"children":576},{"style":515},[577],{"type":47,"value":518},{"type":41,"tag":480,"props":579,"children":580},{"style":487},[581],{"type":47,"value":512},{"type":41,"tag":480,"props":583,"children":584},{"style":499},[585],{"type":47,"value":586}," class",{"type":41,"tag":480,"props":588,"children":589},{"style":487},[590],{"type":47,"value":507},{"type":41,"tag":480,"props":592,"children":593},{"style":487},[594],{"type":47,"value":512},{"type":41,"tag":480,"props":596,"children":597},{"style":515},[598],{"type":47,"value":599},"focusable",{"type":41,"tag":480,"props":601,"children":602},{"style":487},[603],{"type":47,"value":512},{"type":41,"tag":480,"props":605,"children":606},{"style":499},[607],{"type":47,"value":608}," placeholder",{"type":41,"tag":480,"props":610,"children":611},{"style":487},[612],{"type":47,"value":507},{"type":41,"tag":480,"props":614,"children":615},{"style":487},[616],{"type":47,"value":512},{"type":41,"tag":480,"props":618,"children":619},{"style":515},[620],{"type":47,"value":621},"Tap to write or speak",{"type":41,"tag":480,"props":623,"children":624},{"style":487},[625],{"type":47,"value":512},{"type":41,"tag":480,"props":627,"children":628},{"style":487},[629],{"type":47,"value":630},">\u003C\u002F",{"type":41,"tag":480,"props":632,"children":633},{"style":493},[634],{"type":47,"value":560},{"type":41,"tag":480,"props":636,"children":637},{"style":487},[638],{"type":47,"value":547},{"type":41,"tag":50,"props":640,"children":641},{},[642],{"type":47,"value":643},"For a search box:",{"type":41,"tag":469,"props":645,"children":647},{"className":471,"code":646,"language":473,"meta":474,"style":474},"\u003Cinput id=\"q\" type=\"search\" class=\"focusable\" placeholder=\"Tap to search\">\n",[648],{"type":41,"tag":64,"props":649,"children":650},{"__ignoreMap":474},[651],{"type":41,"tag":480,"props":652,"children":653},{"class":482,"line":483},[654,658,662,666,670,674,679,683,688,692,696,701,705,709,713,717,721,725,729,733,737,742,746],{"type":41,"tag":480,"props":655,"children":656},{"style":487},[657],{"type":47,"value":490},{"type":41,"tag":480,"props":659,"children":660},{"style":493},[661],{"type":47,"value":247},{"type":41,"tag":480,"props":663,"children":664},{"style":499},[665],{"type":47,"value":565},{"type":41,"tag":480,"props":667,"children":668},{"style":487},[669],{"type":47,"value":507},{"type":41,"tag":480,"props":671,"children":672},{"style":487},[673],{"type":47,"value":512},{"type":41,"tag":480,"props":675,"children":676},{"style":515},[677],{"type":47,"value":678},"q",{"type":41,"tag":480,"props":680,"children":681},{"style":487},[682],{"type":47,"value":512},{"type":41,"tag":480,"props":684,"children":685},{"style":499},[686],{"type":47,"value":687}," type",{"type":41,"tag":480,"props":689,"children":690},{"style":487},[691],{"type":47,"value":507},{"type":41,"tag":480,"props":693,"children":694},{"style":487},[695],{"type":47,"value":512},{"type":41,"tag":480,"props":697,"children":698},{"style":515},[699],{"type":47,"value":700},"search",{"type":41,"tag":480,"props":702,"children":703},{"style":487},[704],{"type":47,"value":512},{"type":41,"tag":480,"props":706,"children":707},{"style":499},[708],{"type":47,"value":586},{"type":41,"tag":480,"props":710,"children":711},{"style":487},[712],{"type":47,"value":507},{"type":41,"tag":480,"props":714,"children":715},{"style":487},[716],{"type":47,"value":512},{"type":41,"tag":480,"props":718,"children":719},{"style":515},[720],{"type":47,"value":599},{"type":41,"tag":480,"props":722,"children":723},{"style":487},[724],{"type":47,"value":512},{"type":41,"tag":480,"props":726,"children":727},{"style":499},[728],{"type":47,"value":608},{"type":41,"tag":480,"props":730,"children":731},{"style":487},[732],{"type":47,"value":507},{"type":41,"tag":480,"props":734,"children":735},{"style":487},[736],{"type":47,"value":512},{"type":41,"tag":480,"props":738,"children":739},{"style":515},[740],{"type":47,"value":741},"Tap to search",{"type":41,"tag":480,"props":743,"children":744},{"style":487},[745],{"type":47,"value":512},{"type":41,"tag":480,"props":747,"children":748},{"style":487},[749],{"type":47,"value":547},{"type":41,"tag":441,"props":751,"children":753},{"id":752},"_2-make-it-focusable-read-the-value",[754],{"type":47,"value":755},"2. Make It Focusable + Read the Value",{"type":41,"tag":50,"props":757,"children":758},{},[759,761,766,768,773],{"type":47,"value":760},"Standard form controls are focusable by default; ensure they participate in your D-pad focus order. Read the value on ",{"type":41,"tag":64,"props":762,"children":764},{"className":763},[],[765],{"type":47,"value":247},{"type":47,"value":767}," (fires as the composer commits) or ",{"type":41,"tag":64,"props":769,"children":771},{"className":770},[],[772],{"type":47,"value":255},{"type":47,"value":774},":",{"type":41,"tag":469,"props":776,"children":780},{"className":777,"code":778,"language":779,"meta":474,"style":474},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","var note = document.getElementById('note');\nnote.addEventListener('input', function () {\n  console.log('value:', note.value);   \u002F\u002F composer commits fire 'input'\n  \u002F\u002F e.g. persist via \u002Fadd-local-storage, or run a search\n});\n","javascript",[781],{"type":41,"tag":64,"props":782,"children":783},{"__ignoreMap":474},[784,844,896,964,973],{"type":41,"tag":480,"props":785,"children":786},{"class":482,"line":483},[787,792,797,801,806,810,816,821,826,830,834,839],{"type":41,"tag":480,"props":788,"children":789},{"style":499},[790],{"type":47,"value":791},"var",{"type":41,"tag":480,"props":793,"children":794},{"style":530},[795],{"type":47,"value":796}," note ",{"type":41,"tag":480,"props":798,"children":799},{"style":487},[800],{"type":47,"value":507},{"type":41,"tag":480,"props":802,"children":803},{"style":530},[804],{"type":47,"value":805}," document",{"type":41,"tag":480,"props":807,"children":808},{"style":487},[809],{"type":47,"value":265},{"type":41,"tag":480,"props":811,"children":813},{"style":812},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[814],{"type":47,"value":815},"getElementById",{"type":41,"tag":480,"props":817,"children":818},{"style":530},[819],{"type":47,"value":820},"(",{"type":41,"tag":480,"props":822,"children":823},{"style":487},[824],{"type":47,"value":825},"'",{"type":41,"tag":480,"props":827,"children":828},{"style":515},[829],{"type":47,"value":518},{"type":41,"tag":480,"props":831,"children":832},{"style":487},[833],{"type":47,"value":825},{"type":41,"tag":480,"props":835,"children":836},{"style":530},[837],{"type":47,"value":838},")",{"type":41,"tag":480,"props":840,"children":841},{"style":487},[842],{"type":47,"value":843},";\n",{"type":41,"tag":480,"props":845,"children":846},{"class":482,"line":550},[847,851,855,860,864,868,872,876,881,886,891],{"type":41,"tag":480,"props":848,"children":849},{"style":530},[850],{"type":47,"value":518},{"type":41,"tag":480,"props":852,"children":853},{"style":487},[854],{"type":47,"value":265},{"type":41,"tag":480,"props":856,"children":857},{"style":812},[858],{"type":47,"value":859},"addEventListener",{"type":41,"tag":480,"props":861,"children":862},{"style":530},[863],{"type":47,"value":820},{"type":41,"tag":480,"props":865,"children":866},{"style":487},[867],{"type":47,"value":825},{"type":41,"tag":480,"props":869,"children":870},{"style":515},[871],{"type":47,"value":247},{"type":41,"tag":480,"props":873,"children":874},{"style":487},[875],{"type":47,"value":825},{"type":41,"tag":480,"props":877,"children":878},{"style":487},[879],{"type":47,"value":880},",",{"type":41,"tag":480,"props":882,"children":883},{"style":499},[884],{"type":47,"value":885}," function",{"type":41,"tag":480,"props":887,"children":888},{"style":487},[889],{"type":47,"value":890}," ()",{"type":41,"tag":480,"props":892,"children":893},{"style":487},[894],{"type":47,"value":895}," {\n",{"type":41,"tag":480,"props":897,"children":899},{"class":482,"line":898},3,[900,905,909,914,918,922,927,931,935,940,944,949,953,958],{"type":41,"tag":480,"props":901,"children":902},{"style":530},[903],{"type":47,"value":904},"  console",{"type":41,"tag":480,"props":906,"children":907},{"style":487},[908],{"type":47,"value":265},{"type":41,"tag":480,"props":910,"children":911},{"style":812},[912],{"type":47,"value":913},"log",{"type":41,"tag":480,"props":915,"children":916},{"style":493},[917],{"type":47,"value":820},{"type":41,"tag":480,"props":919,"children":920},{"style":487},[921],{"type":47,"value":825},{"type":41,"tag":480,"props":923,"children":924},{"style":515},[925],{"type":47,"value":926},"value:",{"type":41,"tag":480,"props":928,"children":929},{"style":487},[930],{"type":47,"value":825},{"type":41,"tag":480,"props":932,"children":933},{"style":487},[934],{"type":47,"value":880},{"type":41,"tag":480,"props":936,"children":937},{"style":530},[938],{"type":47,"value":939}," note",{"type":41,"tag":480,"props":941,"children":942},{"style":487},[943],{"type":47,"value":265},{"type":41,"tag":480,"props":945,"children":946},{"style":530},[947],{"type":47,"value":948},"value",{"type":41,"tag":480,"props":950,"children":951},{"style":493},[952],{"type":47,"value":838},{"type":41,"tag":480,"props":954,"children":955},{"style":487},[956],{"type":47,"value":957},";",{"type":41,"tag":480,"props":959,"children":961},{"style":960},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[962],{"type":47,"value":963},"   \u002F\u002F composer commits fire 'input'\n",{"type":41,"tag":480,"props":965,"children":967},{"class":482,"line":966},4,[968],{"type":41,"tag":480,"props":969,"children":970},{"style":960},[971],{"type":47,"value":972},"  \u002F\u002F e.g. persist via \u002Fadd-local-storage, or run a search\n",{"type":41,"tag":480,"props":974,"children":976},{"class":482,"line":975},5,[977,982,986],{"type":41,"tag":480,"props":978,"children":979},{"style":487},[980],{"type":47,"value":981},"}",{"type":41,"tag":480,"props":983,"children":984},{"style":530},[985],{"type":47,"value":838},{"type":41,"tag":480,"props":987,"children":988},{"style":487},[989],{"type":47,"value":843},{"type":41,"tag":441,"props":991,"children":993},{"id":992},"_3-wire-search-submit-optional",[994],{"type":47,"value":995},"3. Wire Search \u002F Submit (optional)",{"type":41,"tag":469,"props":997,"children":999},{"className":777,"code":998,"language":779,"meta":474,"style":474},"var q = document.getElementById('q');\nq.addEventListener('change', function () {\n  runSearch(q.value);\n});\n",[1000],{"type":41,"tag":64,"props":1001,"children":1002},{"__ignoreMap":474},[1003,1055,1102,1134],{"type":41,"tag":480,"props":1004,"children":1005},{"class":482,"line":483},[1006,1010,1015,1019,1023,1027,1031,1035,1039,1043,1047,1051],{"type":41,"tag":480,"props":1007,"children":1008},{"style":499},[1009],{"type":47,"value":791},{"type":41,"tag":480,"props":1011,"children":1012},{"style":530},[1013],{"type":47,"value":1014}," q ",{"type":41,"tag":480,"props":1016,"children":1017},{"style":487},[1018],{"type":47,"value":507},{"type":41,"tag":480,"props":1020,"children":1021},{"style":530},[1022],{"type":47,"value":805},{"type":41,"tag":480,"props":1024,"children":1025},{"style":487},[1026],{"type":47,"value":265},{"type":41,"tag":480,"props":1028,"children":1029},{"style":812},[1030],{"type":47,"value":815},{"type":41,"tag":480,"props":1032,"children":1033},{"style":530},[1034],{"type":47,"value":820},{"type":41,"tag":480,"props":1036,"children":1037},{"style":487},[1038],{"type":47,"value":825},{"type":41,"tag":480,"props":1040,"children":1041},{"style":515},[1042],{"type":47,"value":678},{"type":41,"tag":480,"props":1044,"children":1045},{"style":487},[1046],{"type":47,"value":825},{"type":41,"tag":480,"props":1048,"children":1049},{"style":530},[1050],{"type":47,"value":838},{"type":41,"tag":480,"props":1052,"children":1053},{"style":487},[1054],{"type":47,"value":843},{"type":41,"tag":480,"props":1056,"children":1057},{"class":482,"line":550},[1058,1062,1066,1070,1074,1078,1082,1086,1090,1094,1098],{"type":41,"tag":480,"props":1059,"children":1060},{"style":530},[1061],{"type":47,"value":678},{"type":41,"tag":480,"props":1063,"children":1064},{"style":487},[1065],{"type":47,"value":265},{"type":41,"tag":480,"props":1067,"children":1068},{"style":812},[1069],{"type":47,"value":859},{"type":41,"tag":480,"props":1071,"children":1072},{"style":530},[1073],{"type":47,"value":820},{"type":41,"tag":480,"props":1075,"children":1076},{"style":487},[1077],{"type":47,"value":825},{"type":41,"tag":480,"props":1079,"children":1080},{"style":515},[1081],{"type":47,"value":255},{"type":41,"tag":480,"props":1083,"children":1084},{"style":487},[1085],{"type":47,"value":825},{"type":41,"tag":480,"props":1087,"children":1088},{"style":487},[1089],{"type":47,"value":880},{"type":41,"tag":480,"props":1091,"children":1092},{"style":499},[1093],{"type":47,"value":885},{"type":41,"tag":480,"props":1095,"children":1096},{"style":487},[1097],{"type":47,"value":890},{"type":41,"tag":480,"props":1099,"children":1100},{"style":487},[1101],{"type":47,"value":895},{"type":41,"tag":480,"props":1103,"children":1104},{"class":482,"line":898},[1105,1110,1114,1118,1122,1126,1130],{"type":41,"tag":480,"props":1106,"children":1107},{"style":812},[1108],{"type":47,"value":1109},"  runSearch",{"type":41,"tag":480,"props":1111,"children":1112},{"style":493},[1113],{"type":47,"value":820},{"type":41,"tag":480,"props":1115,"children":1116},{"style":530},[1117],{"type":47,"value":678},{"type":41,"tag":480,"props":1119,"children":1120},{"style":487},[1121],{"type":47,"value":265},{"type":41,"tag":480,"props":1123,"children":1124},{"style":530},[1125],{"type":47,"value":948},{"type":41,"tag":480,"props":1127,"children":1128},{"style":493},[1129],{"type":47,"value":838},{"type":41,"tag":480,"props":1131,"children":1132},{"style":487},[1133],{"type":47,"value":843},{"type":41,"tag":480,"props":1135,"children":1136},{"class":482,"line":966},[1137,1141,1145],{"type":41,"tag":480,"props":1138,"children":1139},{"style":487},[1140],{"type":47,"value":981},{"type":41,"tag":480,"props":1142,"children":1143},{"style":530},[1144],{"type":47,"value":838},{"type":41,"tag":480,"props":1146,"children":1147},{"style":487},[1148],{"type":47,"value":843},{"type":41,"tag":42,"props":1150,"children":1152},{"id":1151},"verify",[1153],{"type":47,"value":1154},"Verify",{"type":41,"tag":56,"props":1156,"children":1159},{"className":1157},[1158],"contains-task-list",[1160,1171,1180,1189,1224,1247,1263],{"type":41,"tag":60,"props":1161,"children":1164},{"className":1162},[1163],"task-list-item",[1165,1169],{"type":41,"tag":247,"props":1166,"children":1168},{"disabled":1167,"type":375},true,[],{"type":47,"value":1170}," Field is focusable and reachable via D-pad",{"type":41,"tag":60,"props":1172,"children":1174},{"className":1173},[1163],[1175,1178],{"type":41,"tag":247,"props":1176,"children":1177},{"disabled":1167,"type":375},[],{"type":47,"value":1179}," Focus-then-tap opens the on-glasses composer",{"type":41,"tag":60,"props":1181,"children":1183},{"className":1182},[1163],[1184,1187],{"type":41,"tag":247,"props":1185,"children":1186},{"disabled":1167,"type":375},[],{"type":47,"value":1188}," Committed text appears in the field",{"type":41,"tag":60,"props":1190,"children":1192},{"className":1191},[1163],[1193,1196,1198,1203,1204,1209,1211,1217,1219],{"type":41,"tag":247,"props":1194,"children":1195},{"disabled":1167,"type":375},[],{"type":47,"value":1197}," An ",{"type":41,"tag":64,"props":1199,"children":1201},{"className":1200},[],[1202],{"type":47,"value":247},{"type":47,"value":459},{"type":41,"tag":64,"props":1205,"children":1207},{"className":1206},[],[1208],{"type":47,"value":255},{"type":47,"value":1210},") handler reads ",{"type":41,"tag":64,"props":1212,"children":1214},{"className":1213},[],[1215],{"type":47,"value":1216},"field.value",{"type":47,"value":1218}," — not ",{"type":41,"tag":64,"props":1220,"children":1222},{"className":1221},[],[1223],{"type":47,"value":263},{"type":41,"tag":60,"props":1225,"children":1227},{"className":1226},[1163],[1228,1231,1233,1238,1240,1245],{"type":41,"tag":247,"props":1229,"children":1230},{"disabled":1167,"type":375},[],{"type":47,"value":1232}," Every field has a ",{"type":41,"tag":64,"props":1234,"children":1236},{"className":1235},[],[1237],{"type":47,"value":457},{"type":47,"value":1239}," or ",{"type":41,"tag":64,"props":1241,"children":1243},{"className":1242},[],[1244],{"type":47,"value":465},{"type":47,"value":1246}," hint",{"type":41,"tag":60,"props":1248,"children":1250},{"className":1249},[1163],[1251,1254,1256,1261],{"type":41,"tag":247,"props":1252,"children":1253},{"disabled":1167,"type":375},[],{"type":47,"value":1255}," No ",{"type":41,"tag":64,"props":1257,"children":1259},{"className":1258},[],[1260],{"type":47,"value":360},{"type":47,"value":1262}," (or other non-text type) used for composer entry",{"type":41,"tag":60,"props":1264,"children":1266},{"className":1265},[1163],[1267,1270],{"type":41,"tag":247,"props":1268,"children":1269},{"disabled":1167,"type":375},[],{"type":47,"value":1271}," App stays usable if the composer is unavailable on a build",{"type":41,"tag":42,"props":1273,"children":1275},{"id":1274},"related-skills",[1276],{"type":47,"value":1277},"Related Skills",{"type":41,"tag":56,"props":1279,"children":1280},{},[1281],{"type":41,"tag":60,"props":1282,"children":1283},{},[1284,1290],{"type":41,"tag":64,"props":1285,"children":1287},{"className":1286},[],[1288],{"type":47,"value":1289},"\u002Fadd-ui",{"type":47,"value":1291}," — Add forms, search bars, and other UI around the field",{"type":41,"tag":1293,"props":1294,"children":1295},"style",{},[1296],{"type":47,"value":1297},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1299,"total":1487},[1300,1322,1336,1357,1378,1395,1406,1424,1437,1450,1465,1477],{"slug":1301,"name":1301,"fn":1302,"description":1303,"org":1304,"tags":1305,"stars":1319,"repoUrl":1320,"updatedAt":1321},"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},[1306,1309,1310,1313,1316],{"name":1307,"slug":1308,"type":16},"Engineering","engineering",{"name":21,"slug":22,"type":16},{"name":1311,"slug":1312,"type":16},"GraphQL","graphql",{"name":1314,"slug":1315,"type":16},"React","react",{"name":1317,"slug":1318,"type":16},"Relay","relay",18950,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Frelay","2026-04-22T04:58:15.370563",{"slug":1323,"name":1323,"fn":1324,"description":1325,"org":1326,"tags":1327,"stars":1319,"repoUrl":1320,"updatedAt":1335},"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},[1328,1329,1330,1333,1334],{"name":21,"slug":22,"type":16},{"name":1311,"slug":1312,"type":16},{"name":1331,"slug":1332,"type":16},"Performance","performance",{"name":1314,"slug":1315,"type":16},{"name":1317,"slug":1318,"type":16},"2026-06-10T07:30:28.726513",{"slug":1337,"name":1337,"fn":1338,"description":1339,"org":1340,"tags":1341,"stars":1354,"repoUrl":1355,"updatedAt":1356},"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},[1342,1345,1348,1351],{"name":1343,"slug":1344,"type":16},"Data Modeling","data-modeling",{"name":1346,"slug":1347,"type":16},"Deep Learning","deep-learning",{"name":1349,"slug":1350,"type":16},"Python","python",{"name":1352,"slug":1353,"type":16},"PyTorch","pytorch",6833,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fpyrefly","2026-07-18T05:12:08.515952",{"slug":1358,"name":1358,"fn":1359,"description":1360,"org":1361,"tags":1362,"stars":1375,"repoUrl":1376,"updatedAt":1377},"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},[1363,1366,1369,1372],{"name":1364,"slug":1365,"type":16},"Camera","camera",{"name":1367,"slug":1368,"type":16},"Hardware","hardware",{"name":1370,"slug":1371,"type":16},"iOS","ios",{"name":1373,"slug":1374,"type":16},"Video","video",488,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-dat-ios","2026-08-06T05:38:47.523424",{"slug":1379,"name":1379,"fn":1380,"description":1381,"org":1382,"tags":1383,"stars":1375,"repoUrl":1376,"updatedAt":1394},"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},[1384,1385,1388,1391],{"name":1370,"slug":1371,"type":16},{"name":1386,"slug":1387,"type":16},"Mobile","mobile",{"name":1389,"slug":1390,"type":16},"SDK","sdk",{"name":1392,"slug":1393,"type":16},"Swift","swift","2026-08-06T05:38:49.536777",{"slug":1396,"name":1396,"fn":1397,"description":1398,"org":1399,"tags":1400,"stars":1375,"repoUrl":1376,"updatedAt":1405},"debugging","debug wearable device software","Common issues, Developer Mode, version compatibility, state machine diagnosis",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1401,1403,1404],{"name":1402,"slug":1396,"type":16},"Debugging",{"name":1307,"slug":1308,"type":16},{"name":1370,"slug":1371,"type":16},"2026-08-06T05:38:50.51086",{"slug":1407,"name":1407,"fn":1408,"description":1409,"org":1410,"tags":1411,"stars":1375,"repoUrl":1376,"updatedAt":1423},"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},[1412,1415,1418,1421,1422],{"name":1413,"slug":1414,"type":16},"Design","design",{"name":1416,"slug":1417,"type":16},"Images","images",{"name":1419,"slug":1420,"type":16},"Interaction","interaction",{"name":18,"slug":19,"type":16},{"name":1373,"slug":1374,"type":16},"2026-08-06T05:38:53.520488",{"slug":1425,"name":1425,"fn":1426,"description":1427,"org":1428,"tags":1429,"stars":1375,"repoUrl":1376,"updatedAt":1436},"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},[1430,1433,1434,1435],{"name":1431,"slug":1432,"type":16},"Configuration","configuration",{"name":1370,"slug":1371,"type":16},{"name":1389,"slug":1390,"type":16},{"name":1392,"slug":1393,"type":16},"2026-08-06T05:38:48.514522",{"slug":1438,"name":1438,"fn":1439,"description":1440,"org":1441,"tags":1442,"stars":1375,"repoUrl":1376,"updatedAt":1449},"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},[1443,1444,1445,1448],{"name":1402,"slug":1396,"type":16},{"name":1370,"slug":1371,"type":16},{"name":1446,"slug":1447,"type":16},"MCP","mcp",{"name":1386,"slug":1387,"type":16},"2026-08-06T06:09:15.013902",{"slug":1451,"name":1451,"fn":1452,"description":1453,"org":1454,"tags":1455,"stars":1375,"repoUrl":1376,"updatedAt":1464},"mockdevice-testing","test wearable apps with mock devices","MockDeviceKit for testing without physical glasses hardware",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1456,1457,1458,1461],{"name":1370,"slug":1371,"type":16},{"name":1386,"slug":1387,"type":16},{"name":1459,"slug":1460,"type":16},"QA","qa",{"name":1462,"slug":1463,"type":16},"Testing","testing","2026-05-15T06:14:37.406692",{"slug":1466,"name":1466,"fn":1467,"description":1468,"org":1469,"tags":1470,"stars":1375,"repoUrl":1376,"updatedAt":1476},"permissions-registration","register apps with Meta AI","App registration with Meta AI, camera permission flows",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1471,1472,1473],{"name":1364,"slug":1365,"type":16},{"name":1370,"slug":1371,"type":16},{"name":1474,"slug":1475,"type":16},"Permissions","permissions","2026-05-15T06:14:46.030253",{"slug":1478,"name":1478,"fn":1479,"description":1480,"org":1481,"tags":1482,"stars":1375,"repoUrl":1376,"updatedAt":1486},"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},[1483,1484,1485],{"name":1364,"slug":1365,"type":16},{"name":1370,"slug":1371,"type":16},{"name":1386,"slug":1387,"type":16},"2026-08-06T05:38:51.509255",34,{"items":1489,"total":1573},[1490,1502,1512,1526,1538,1544,1556],{"slug":1491,"name":1491,"fn":1492,"description":1493,"org":1494,"tags":1495,"stars":23,"repoUrl":24,"updatedAt":1501},"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},[1496,1497,1498],{"name":21,"slug":22,"type":16},{"name":1367,"slug":1368,"type":16},{"name":1499,"slug":1500,"type":16},"IoT","iot","2026-09-01T08:30:33.453548",{"slug":1503,"name":1503,"fn":1504,"description":1505,"org":1506,"tags":1507,"stars":23,"repoUrl":24,"updatedAt":1511},"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},[1508,1509,1510],{"name":1413,"slug":1414,"type":16},{"name":21,"slug":22,"type":16},{"name":1419,"slug":1420,"type":16},"2026-09-01T08:30:53.889244",{"slug":1513,"name":1513,"fn":1514,"description":1515,"org":1516,"tags":1517,"stars":23,"repoUrl":24,"updatedAt":1525},"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},[1518,1519,1522],{"name":21,"slug":22,"type":16},{"name":1520,"slug":1521,"type":16},"Persistence","persistence",{"name":1523,"slug":1524,"type":16},"Storage","storage","2026-09-01T08:30:31.384362",{"slug":1527,"name":1527,"fn":1528,"description":1529,"org":1530,"tags":1531,"stars":23,"repoUrl":24,"updatedAt":1537},"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},[1532,1533,1536],{"name":21,"slug":22,"type":16},{"name":1534,"slug":1535,"type":16},"Offline","offline",{"name":1331,"slug":1332,"type":16},"2026-09-01T08:30:33.83287",{"slug":4,"name":4,"fn":5,"description":6,"org":1539,"tags":1540,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1541,1542,1543],{"name":14,"slug":15,"type":16},{"name":21,"slug":22,"type":16},{"name":18,"slug":19,"type":16},{"slug":1545,"name":1545,"fn":1546,"description":1547,"org":1548,"tags":1549,"stars":23,"repoUrl":24,"updatedAt":1555},"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},[1550,1551,1553,1554],{"name":21,"slug":22,"type":16},{"name":1552,"slug":779,"type":16},"JavaScript",{"name":1314,"slug":1315,"type":16},{"name":18,"slug":19,"type":16},"2026-09-01T08:30:27.477785",{"slug":1557,"name":1557,"fn":1558,"description":1559,"org":1560,"tags":1561,"stars":23,"repoUrl":24,"updatedAt":1572},"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},[1562,1565,1566,1569],{"name":1563,"slug":1564,"type":16},"API Development","api-development",{"name":21,"slug":22,"type":16},{"name":1567,"slug":1568,"type":16},"REST API","rest-api",{"name":1570,"slug":1571,"type":16},"WebSockets","websockets","2026-09-01T08:30:30.968156",12]