[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-meta-iwsdk-ui":3,"mdc-taitun-key":40,"related-org-meta-iwsdk-ui":996,"related-repo-meta-iwsdk-ui":1186},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":29,"repoUrl":30,"updatedAt":31,"license":32,"forks":33,"topics":34,"repo":35,"sourceUrl":38,"mdContent":39},"iwsdk-ui","develop IWSDK PanelUI components","Develop and iterate on IWSDK PanelUI components. Use when the user wants to create, modify, debug, or improve UI panels in their IWSDK application. Covers UIKITML editing, full-screen preview with ScreenSpace, and visual verification.",{"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,26],{"name":14,"slug":15,"type":16},"IWSDK","iwsdk","tag",{"name":18,"slug":19,"type":16},"Immersive","immersive",{"name":21,"slug":22,"type":16},"WebXR","webxr",{"name":24,"slug":25,"type":16},"UI Components","ui-components",{"name":27,"slug":28,"type":16},"Frontend","frontend",358,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fimmersive-web-sdk","2026-04-06T18:11:34.083706",null,73,[],{"repoUrl":30,"stars":29,"forks":33,"topics":36,"description":37},[],"WebXR made simple. Full-featured framework with interactions, locomotion, and spatial UI. Powered by Three.js.","https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fimmersive-web-sdk\u002Ftree\u002FHEAD\u002Fpackages\u002Fstarter-assets\u002Fclaude-injections\u002Fskills\u002Fiwsdk-ui","---\nname: iwsdk-ui\ndescription: Develop and iterate on IWSDK PanelUI components. Use when the user wants to create, modify, debug, or improve UI panels in their IWSDK application. Covers UIKITML editing, full-screen preview with ScreenSpace, and visual verification.\nargument-hint: [panel-name or description of changes]\n---\n\n# UI Panel Development\n\nEfficiently develop and iterate on IWSDK PanelUI panels using ScreenSpace for full-screen 2D preview. The workflow has a **required core** (setup for iteration) and **optional extensions** (the actual UI work, driven by user intent).\n\nUser request is in `$ARGUMENTS`.\n\n## Required Core\n\n### Step 1: Identify the panel\n\nFind the panel entity and its UIKITML source file.\n\n- Panel entities have the `PanelUI` component. Use `ecs_find_entities` with `withComponents: [\"PanelUI\"]` to find them.\n- Read the `PanelUI` component's `config` field with `ecs_query_entity` to find the JSON path (e.g., `.\u002Fui\u002Fwelcome.json`).\n- The UIKITML source lives in `ui\u002F` with the same name but `.uikitml` extension (e.g., `ui\u002Fwelcome.uikitml`).\n\n### Step 2: Set up full-screen preview\n\nThe ScreenSpace component positions a panel in front of the camera so it appears as a 2D UI — ideal for fast iteration.\n\n**If the entity already has ScreenSpace:** Note the current settings so they can be restored later.\n\n```\necs_query_entity(entityIndex, components: [\"ScreenSpace\"]) → save the values\n```\n\n**If the entity does not have ScreenSpace:** You will need to add it in code.\n\nEither way, set ScreenSpace to fill the entire viewport in code:\n\n```typescript\n.addComponent(ScreenSpace, {\n  top: \"0px\",\n  left: \"0px\",\n  width: \"100vw\",\n  height: \"100vh\",\n});\n```\n\nSetting this in code (not via `ecs_set_component`) ensures it persists across hot reloads.\n\n### Step 3: Verify setup\n\nTake a `browser_screenshot` to confirm the panel fills the screen and is ready for iteration.\n\n## UI Editing\n\nThis is where the user's request drives the work. Edit the `.uikitml` file in `ui\u002F`.\n\n### Key facts about UIKITML\n\n- UIKITML is a **subset of HTML**, not all syntax is supported.\n- **Before writing markup**, use `mcp__iwsdk-reference__search_code` to query for supported UIKITML element types and CSS properties. Search for things like \"uikitml interpret container text\" or specific element types you need.\n- Supported selectors: `#id` and `.class` (via PanelDocument's `querySelector`).\n- Units are in **centimeters** (e.g., `width: 50` = 50cm). World space uses meters. `100cm = 1m`.\n- The source of truth is the `.uikitml` file. Changes are auto-compiled by the vite plugin and hot-reloaded.\n- The compiled `.json` file in `public\u002Fui\u002F` should **never be modified directly**, but can be read for quick debugging to inspect the compiled element tree, class definitions, and properties.\n\n### Verify changes\n\nAfter each edit to the `.uikitml` file:\n\n1. Wait a moment for the vite plugin to compile and hot-reload.\n2. Take a `browser_screenshot` to visually verify the change.\n3. If needed, read the compiled JSON (`public\u002Fui\u002F\u003Cname>.json`) to debug layout issues or inspect computed properties.\n\nRepeat the edit-screenshot cycle as needed.\n\n## Cleanup (Required)\n\nWhen done with UI work, **always** restore the ScreenSpace component to its original state.\n\n**If it had ScreenSpace before:** Restore the original values that were noted in Step 2.\n\n```typescript\n\u002F\u002F Restore original settings\n.addComponent(ScreenSpace, {\n  top: \"20px\",\n  left: \"20px\",\n  height: \"40%\",\n  \u002F\u002F ... whatever was noted\n});\n```\n\n**If it did not have ScreenSpace before:** Remove the ScreenSpace component addition from code.\n\nTake a final `browser_screenshot` to confirm the panel is back to its normal state.\n\n## Notes\n\n- **Always edit `.uikitml`, never the compiled `.json`** — the JSON is auto-generated and will be overwritten.\n- **ScreenSpace behavior in VR:** When entering VR, ScreenSpace automatically detaches the panel from the camera and it returns to world-space positioning. This is handled by the ScreenSpaceUISystem.\n- **PanelDocument for element access:** Use `getElementById(id)` or `querySelector(selector)` on the PanelDocument to access UI elements programmatically in systems. Elements can be named with `.name = \"id\"` to make them discoverable in the scene hierarchy.\n- **ScreenSpace uses CSS strings, not numbers** — always pass string values like `\"400px\"`, `\"100vw\"`, `\"20px\"`.\n",{"data":41,"body":44},{"name":4,"description":6,"argument-hint":42},[43],"panel-name or description of changes",{"type":45,"children":46},"root",[47,56,77,91,98,105,110,208,214,219,229,241,251,256,442,455,461,474,480,498,504,631,637,649,682,687,693,705,715,861,871,883,889,990],{"type":48,"tag":49,"props":50,"children":52},"element","h1",{"id":51},"ui-panel-development",[53],{"type":54,"value":55},"text","UI Panel Development",{"type":48,"tag":57,"props":58,"children":59},"p",{},[60,62,68,70,75],{"type":54,"value":61},"Efficiently develop and iterate on IWSDK PanelUI panels using ScreenSpace for full-screen 2D preview. The workflow has a ",{"type":48,"tag":63,"props":64,"children":65},"strong",{},[66],{"type":54,"value":67},"required core",{"type":54,"value":69}," (setup for iteration) and ",{"type":48,"tag":63,"props":71,"children":72},{},[73],{"type":54,"value":74},"optional extensions",{"type":54,"value":76}," (the actual UI work, driven by user intent).",{"type":48,"tag":57,"props":78,"children":79},{},[80,82,89],{"type":54,"value":81},"User request is in ",{"type":48,"tag":83,"props":84,"children":86},"code",{"className":85},[],[87],{"type":54,"value":88},"$ARGUMENTS",{"type":54,"value":90},".",{"type":48,"tag":92,"props":93,"children":95},"h2",{"id":94},"required-core",[96],{"type":54,"value":97},"Required Core",{"type":48,"tag":99,"props":100,"children":102},"h3",{"id":101},"step-1-identify-the-panel",[103],{"type":54,"value":104},"Step 1: Identify the panel",{"type":48,"tag":57,"props":106,"children":107},{},[108],{"type":54,"value":109},"Find the panel entity and its UIKITML source file.",{"type":48,"tag":111,"props":112,"children":113},"ul",{},[114,144,180],{"type":48,"tag":115,"props":116,"children":117},"li",{},[118,120,126,128,134,136,142],{"type":54,"value":119},"Panel entities have the ",{"type":48,"tag":83,"props":121,"children":123},{"className":122},[],[124],{"type":54,"value":125},"PanelUI",{"type":54,"value":127}," component. Use ",{"type":48,"tag":83,"props":129,"children":131},{"className":130},[],[132],{"type":54,"value":133},"ecs_find_entities",{"type":54,"value":135}," with ",{"type":48,"tag":83,"props":137,"children":139},{"className":138},[],[140],{"type":54,"value":141},"withComponents: [\"PanelUI\"]",{"type":54,"value":143}," to find them.",{"type":48,"tag":115,"props":145,"children":146},{},[147,149,154,156,162,164,170,172,178],{"type":54,"value":148},"Read the ",{"type":48,"tag":83,"props":150,"children":152},{"className":151},[],[153],{"type":54,"value":125},{"type":54,"value":155}," component's ",{"type":48,"tag":83,"props":157,"children":159},{"className":158},[],[160],{"type":54,"value":161},"config",{"type":54,"value":163}," field with ",{"type":48,"tag":83,"props":165,"children":167},{"className":166},[],[168],{"type":54,"value":169},"ecs_query_entity",{"type":54,"value":171}," to find the JSON path (e.g., ",{"type":48,"tag":83,"props":173,"children":175},{"className":174},[],[176],{"type":54,"value":177},".\u002Fui\u002Fwelcome.json",{"type":54,"value":179},").",{"type":48,"tag":115,"props":181,"children":182},{},[183,185,191,193,199,201,207],{"type":54,"value":184},"The UIKITML source lives in ",{"type":48,"tag":83,"props":186,"children":188},{"className":187},[],[189],{"type":54,"value":190},"ui\u002F",{"type":54,"value":192}," with the same name but ",{"type":48,"tag":83,"props":194,"children":196},{"className":195},[],[197],{"type":54,"value":198},".uikitml",{"type":54,"value":200}," extension (e.g., ",{"type":48,"tag":83,"props":202,"children":204},{"className":203},[],[205],{"type":54,"value":206},"ui\u002Fwelcome.uikitml",{"type":54,"value":179},{"type":48,"tag":99,"props":209,"children":211},{"id":210},"step-2-set-up-full-screen-preview",[212],{"type":54,"value":213},"Step 2: Set up full-screen preview",{"type":48,"tag":57,"props":215,"children":216},{},[217],{"type":54,"value":218},"The ScreenSpace component positions a panel in front of the camera so it appears as a 2D UI — ideal for fast iteration.",{"type":48,"tag":57,"props":220,"children":221},{},[222,227],{"type":48,"tag":63,"props":223,"children":224},{},[225],{"type":54,"value":226},"If the entity already has ScreenSpace:",{"type":54,"value":228}," Note the current settings so they can be restored later.",{"type":48,"tag":230,"props":231,"children":235},"pre",{"className":232,"code":234,"language":54},[233],"language-text","ecs_query_entity(entityIndex, components: [\"ScreenSpace\"]) → save the values\n",[236],{"type":48,"tag":83,"props":237,"children":239},{"__ignoreMap":238},"",[240],{"type":54,"value":234},{"type":48,"tag":57,"props":242,"children":243},{},[244,249],{"type":48,"tag":63,"props":245,"children":246},{},[247],{"type":54,"value":248},"If the entity does not have ScreenSpace:",{"type":54,"value":250}," You will need to add it in code.",{"type":48,"tag":57,"props":252,"children":253},{},[254],{"type":54,"value":255},"Either way, set ScreenSpace to fill the entire viewport in code:",{"type":48,"tag":230,"props":257,"children":261},{"className":258,"code":259,"language":260,"meta":238,"style":238},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".addComponent(ScreenSpace, {\n  top: \"0px\",\n  left: \"0px\",\n  width: \"100vw\",\n  height: \"100vh\",\n});\n","typescript",[262],{"type":48,"tag":83,"props":263,"children":264},{"__ignoreMap":238},[265,298,334,363,393,423],{"type":48,"tag":266,"props":267,"children":270},"span",{"class":268,"line":269},"line",1,[271,276,282,288,293],{"type":48,"tag":266,"props":272,"children":274},{"style":273},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[275],{"type":54,"value":90},{"type":48,"tag":266,"props":277,"children":279},{"style":278},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[280],{"type":54,"value":281},"addComponent",{"type":48,"tag":266,"props":283,"children":285},{"style":284},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[286],{"type":54,"value":287},"(ScreenSpace",{"type":48,"tag":266,"props":289,"children":290},{"style":273},[291],{"type":54,"value":292},",",{"type":48,"tag":266,"props":294,"children":295},{"style":273},[296],{"type":54,"value":297}," {\n",{"type":48,"tag":266,"props":299,"children":301},{"class":268,"line":300},2,[302,308,313,318,324,329],{"type":48,"tag":266,"props":303,"children":305},{"style":304},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[306],{"type":54,"value":307},"  top",{"type":48,"tag":266,"props":309,"children":310},{"style":273},[311],{"type":54,"value":312},":",{"type":48,"tag":266,"props":314,"children":315},{"style":273},[316],{"type":54,"value":317}," \"",{"type":48,"tag":266,"props":319,"children":321},{"style":320},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[322],{"type":54,"value":323},"0px",{"type":48,"tag":266,"props":325,"children":326},{"style":273},[327],{"type":54,"value":328},"\"",{"type":48,"tag":266,"props":330,"children":331},{"style":273},[332],{"type":54,"value":333},",\n",{"type":48,"tag":266,"props":335,"children":337},{"class":268,"line":336},3,[338,343,347,351,355,359],{"type":48,"tag":266,"props":339,"children":340},{"style":304},[341],{"type":54,"value":342},"  left",{"type":48,"tag":266,"props":344,"children":345},{"style":273},[346],{"type":54,"value":312},{"type":48,"tag":266,"props":348,"children":349},{"style":273},[350],{"type":54,"value":317},{"type":48,"tag":266,"props":352,"children":353},{"style":320},[354],{"type":54,"value":323},{"type":48,"tag":266,"props":356,"children":357},{"style":273},[358],{"type":54,"value":328},{"type":48,"tag":266,"props":360,"children":361},{"style":273},[362],{"type":54,"value":333},{"type":48,"tag":266,"props":364,"children":366},{"class":268,"line":365},4,[367,372,376,380,385,389],{"type":48,"tag":266,"props":368,"children":369},{"style":304},[370],{"type":54,"value":371},"  width",{"type":48,"tag":266,"props":373,"children":374},{"style":273},[375],{"type":54,"value":312},{"type":48,"tag":266,"props":377,"children":378},{"style":273},[379],{"type":54,"value":317},{"type":48,"tag":266,"props":381,"children":382},{"style":320},[383],{"type":54,"value":384},"100vw",{"type":48,"tag":266,"props":386,"children":387},{"style":273},[388],{"type":54,"value":328},{"type":48,"tag":266,"props":390,"children":391},{"style":273},[392],{"type":54,"value":333},{"type":48,"tag":266,"props":394,"children":396},{"class":268,"line":395},5,[397,402,406,410,415,419],{"type":48,"tag":266,"props":398,"children":399},{"style":304},[400],{"type":54,"value":401},"  height",{"type":48,"tag":266,"props":403,"children":404},{"style":273},[405],{"type":54,"value":312},{"type":48,"tag":266,"props":407,"children":408},{"style":273},[409],{"type":54,"value":317},{"type":48,"tag":266,"props":411,"children":412},{"style":320},[413],{"type":54,"value":414},"100vh",{"type":48,"tag":266,"props":416,"children":417},{"style":273},[418],{"type":54,"value":328},{"type":48,"tag":266,"props":420,"children":421},{"style":273},[422],{"type":54,"value":333},{"type":48,"tag":266,"props":424,"children":426},{"class":268,"line":425},6,[427,432,437],{"type":48,"tag":266,"props":428,"children":429},{"style":273},[430],{"type":54,"value":431},"}",{"type":48,"tag":266,"props":433,"children":434},{"style":284},[435],{"type":54,"value":436},")",{"type":48,"tag":266,"props":438,"children":439},{"style":273},[440],{"type":54,"value":441},";\n",{"type":48,"tag":57,"props":443,"children":444},{},[445,447,453],{"type":54,"value":446},"Setting this in code (not via ",{"type":48,"tag":83,"props":448,"children":450},{"className":449},[],[451],{"type":54,"value":452},"ecs_set_component",{"type":54,"value":454},") ensures it persists across hot reloads.",{"type":48,"tag":99,"props":456,"children":458},{"id":457},"step-3-verify-setup",[459],{"type":54,"value":460},"Step 3: Verify setup",{"type":48,"tag":57,"props":462,"children":463},{},[464,466,472],{"type":54,"value":465},"Take a ",{"type":48,"tag":83,"props":467,"children":469},{"className":468},[],[470],{"type":54,"value":471},"browser_screenshot",{"type":54,"value":473}," to confirm the panel fills the screen and is ready for iteration.",{"type":48,"tag":92,"props":475,"children":477},{"id":476},"ui-editing",[478],{"type":54,"value":479},"UI Editing",{"type":48,"tag":57,"props":481,"children":482},{},[483,485,490,492,497],{"type":54,"value":484},"This is where the user's request drives the work. Edit the ",{"type":48,"tag":83,"props":486,"children":488},{"className":487},[],[489],{"type":54,"value":198},{"type":54,"value":491}," file in ",{"type":48,"tag":83,"props":493,"children":495},{"className":494},[],[496],{"type":54,"value":190},{"type":54,"value":90},{"type":48,"tag":99,"props":499,"children":501},{"id":500},"key-facts-about-uikitml",[502],{"type":54,"value":503},"Key facts about UIKITML",{"type":48,"tag":111,"props":505,"children":506},{},[507,519,537,565,592,604],{"type":48,"tag":115,"props":508,"children":509},{},[510,512,517],{"type":54,"value":511},"UIKITML is a ",{"type":48,"tag":63,"props":513,"children":514},{},[515],{"type":54,"value":516},"subset of HTML",{"type":54,"value":518},", not all syntax is supported.",{"type":48,"tag":115,"props":520,"children":521},{},[522,527,529,535],{"type":48,"tag":63,"props":523,"children":524},{},[525],{"type":54,"value":526},"Before writing markup",{"type":54,"value":528},", use ",{"type":48,"tag":83,"props":530,"children":532},{"className":531},[],[533],{"type":54,"value":534},"mcp__iwsdk-reference__search_code",{"type":54,"value":536}," to query for supported UIKITML element types and CSS properties. Search for things like \"uikitml interpret container text\" or specific element types you need.",{"type":48,"tag":115,"props":538,"children":539},{},[540,542,548,550,556,558,564],{"type":54,"value":541},"Supported selectors: ",{"type":48,"tag":83,"props":543,"children":545},{"className":544},[],[546],{"type":54,"value":547},"#id",{"type":54,"value":549}," and ",{"type":48,"tag":83,"props":551,"children":553},{"className":552},[],[554],{"type":54,"value":555},".class",{"type":54,"value":557}," (via PanelDocument's ",{"type":48,"tag":83,"props":559,"children":561},{"className":560},[],[562],{"type":54,"value":563},"querySelector",{"type":54,"value":179},{"type":48,"tag":115,"props":566,"children":567},{},[568,570,575,577,583,585,591],{"type":54,"value":569},"Units are in ",{"type":48,"tag":63,"props":571,"children":572},{},[573],{"type":54,"value":574},"centimeters",{"type":54,"value":576}," (e.g., ",{"type":48,"tag":83,"props":578,"children":580},{"className":579},[],[581],{"type":54,"value":582},"width: 50",{"type":54,"value":584}," = 50cm). World space uses meters. ",{"type":48,"tag":83,"props":586,"children":588},{"className":587},[],[589],{"type":54,"value":590},"100cm = 1m",{"type":54,"value":90},{"type":48,"tag":115,"props":593,"children":594},{},[595,597,602],{"type":54,"value":596},"The source of truth is the ",{"type":48,"tag":83,"props":598,"children":600},{"className":599},[],[601],{"type":54,"value":198},{"type":54,"value":603}," file. Changes are auto-compiled by the vite plugin and hot-reloaded.",{"type":48,"tag":115,"props":605,"children":606},{},[607,609,615,616,622,624,629],{"type":54,"value":608},"The compiled ",{"type":48,"tag":83,"props":610,"children":612},{"className":611},[],[613],{"type":54,"value":614},".json",{"type":54,"value":491},{"type":48,"tag":83,"props":617,"children":619},{"className":618},[],[620],{"type":54,"value":621},"public\u002Fui\u002F",{"type":54,"value":623}," should ",{"type":48,"tag":63,"props":625,"children":626},{},[627],{"type":54,"value":628},"never be modified directly",{"type":54,"value":630},", but can be read for quick debugging to inspect the compiled element tree, class definitions, and properties.",{"type":48,"tag":99,"props":632,"children":634},{"id":633},"verify-changes",[635],{"type":54,"value":636},"Verify changes",{"type":48,"tag":57,"props":638,"children":639},{},[640,642,647],{"type":54,"value":641},"After each edit to the ",{"type":48,"tag":83,"props":643,"children":645},{"className":644},[],[646],{"type":54,"value":198},{"type":54,"value":648}," file:",{"type":48,"tag":650,"props":651,"children":652},"ol",{},[653,658,669],{"type":48,"tag":115,"props":654,"children":655},{},[656],{"type":54,"value":657},"Wait a moment for the vite plugin to compile and hot-reload.",{"type":48,"tag":115,"props":659,"children":660},{},[661,662,667],{"type":54,"value":465},{"type":48,"tag":83,"props":663,"children":665},{"className":664},[],[666],{"type":54,"value":471},{"type":54,"value":668}," to visually verify the change.",{"type":48,"tag":115,"props":670,"children":671},{},[672,674,680],{"type":54,"value":673},"If needed, read the compiled JSON (",{"type":48,"tag":83,"props":675,"children":677},{"className":676},[],[678],{"type":54,"value":679},"public\u002Fui\u002F\u003Cname>.json",{"type":54,"value":681},") to debug layout issues or inspect computed properties.",{"type":48,"tag":57,"props":683,"children":684},{},[685],{"type":54,"value":686},"Repeat the edit-screenshot cycle as needed.",{"type":48,"tag":92,"props":688,"children":690},{"id":689},"cleanup-required",[691],{"type":54,"value":692},"Cleanup (Required)",{"type":48,"tag":57,"props":694,"children":695},{},[696,698,703],{"type":54,"value":697},"When done with UI work, ",{"type":48,"tag":63,"props":699,"children":700},{},[701],{"type":54,"value":702},"always",{"type":54,"value":704}," restore the ScreenSpace component to its original state.",{"type":48,"tag":57,"props":706,"children":707},{},[708,713],{"type":48,"tag":63,"props":709,"children":710},{},[711],{"type":54,"value":712},"If it had ScreenSpace before:",{"type":54,"value":714}," Restore the original values that were noted in Step 2.",{"type":48,"tag":230,"props":716,"children":718},{"className":258,"code":717,"language":260,"meta":238,"style":238},"\u002F\u002F Restore original settings\n.addComponent(ScreenSpace, {\n  top: \"20px\",\n  left: \"20px\",\n  height: \"40%\",\n  \u002F\u002F ... whatever was noted\n});\n",[719],{"type":48,"tag":83,"props":720,"children":721},{"__ignoreMap":238},[722,731,754,782,809,837,845],{"type":48,"tag":266,"props":723,"children":724},{"class":268,"line":269},[725],{"type":48,"tag":266,"props":726,"children":728},{"style":727},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[729],{"type":54,"value":730},"\u002F\u002F Restore original settings\n",{"type":48,"tag":266,"props":732,"children":733},{"class":268,"line":300},[734,738,742,746,750],{"type":48,"tag":266,"props":735,"children":736},{"style":273},[737],{"type":54,"value":90},{"type":48,"tag":266,"props":739,"children":740},{"style":278},[741],{"type":54,"value":281},{"type":48,"tag":266,"props":743,"children":744},{"style":284},[745],{"type":54,"value":287},{"type":48,"tag":266,"props":747,"children":748},{"style":273},[749],{"type":54,"value":292},{"type":48,"tag":266,"props":751,"children":752},{"style":273},[753],{"type":54,"value":297},{"type":48,"tag":266,"props":755,"children":756},{"class":268,"line":336},[757,761,765,769,774,778],{"type":48,"tag":266,"props":758,"children":759},{"style":304},[760],{"type":54,"value":307},{"type":48,"tag":266,"props":762,"children":763},{"style":273},[764],{"type":54,"value":312},{"type":48,"tag":266,"props":766,"children":767},{"style":273},[768],{"type":54,"value":317},{"type":48,"tag":266,"props":770,"children":771},{"style":320},[772],{"type":54,"value":773},"20px",{"type":48,"tag":266,"props":775,"children":776},{"style":273},[777],{"type":54,"value":328},{"type":48,"tag":266,"props":779,"children":780},{"style":273},[781],{"type":54,"value":333},{"type":48,"tag":266,"props":783,"children":784},{"class":268,"line":365},[785,789,793,797,801,805],{"type":48,"tag":266,"props":786,"children":787},{"style":304},[788],{"type":54,"value":342},{"type":48,"tag":266,"props":790,"children":791},{"style":273},[792],{"type":54,"value":312},{"type":48,"tag":266,"props":794,"children":795},{"style":273},[796],{"type":54,"value":317},{"type":48,"tag":266,"props":798,"children":799},{"style":320},[800],{"type":54,"value":773},{"type":48,"tag":266,"props":802,"children":803},{"style":273},[804],{"type":54,"value":328},{"type":48,"tag":266,"props":806,"children":807},{"style":273},[808],{"type":54,"value":333},{"type":48,"tag":266,"props":810,"children":811},{"class":268,"line":395},[812,816,820,824,829,833],{"type":48,"tag":266,"props":813,"children":814},{"style":304},[815],{"type":54,"value":401},{"type":48,"tag":266,"props":817,"children":818},{"style":273},[819],{"type":54,"value":312},{"type":48,"tag":266,"props":821,"children":822},{"style":273},[823],{"type":54,"value":317},{"type":48,"tag":266,"props":825,"children":826},{"style":320},[827],{"type":54,"value":828},"40%",{"type":48,"tag":266,"props":830,"children":831},{"style":273},[832],{"type":54,"value":328},{"type":48,"tag":266,"props":834,"children":835},{"style":273},[836],{"type":54,"value":333},{"type":48,"tag":266,"props":838,"children":839},{"class":268,"line":425},[840],{"type":48,"tag":266,"props":841,"children":842},{"style":727},[843],{"type":54,"value":844},"  \u002F\u002F ... whatever was noted\n",{"type":48,"tag":266,"props":846,"children":848},{"class":268,"line":847},7,[849,853,857],{"type":48,"tag":266,"props":850,"children":851},{"style":273},[852],{"type":54,"value":431},{"type":48,"tag":266,"props":854,"children":855},{"style":284},[856],{"type":54,"value":436},{"type":48,"tag":266,"props":858,"children":859},{"style":273},[860],{"type":54,"value":441},{"type":48,"tag":57,"props":862,"children":863},{},[864,869],{"type":48,"tag":63,"props":865,"children":866},{},[867],{"type":54,"value":868},"If it did not have ScreenSpace before:",{"type":54,"value":870}," Remove the ScreenSpace component addition from code.",{"type":48,"tag":57,"props":872,"children":873},{},[874,876,881],{"type":54,"value":875},"Take a final ",{"type":48,"tag":83,"props":877,"children":879},{"className":878},[],[880],{"type":54,"value":471},{"type":54,"value":882}," to confirm the panel is back to its normal state.",{"type":48,"tag":92,"props":884,"children":886},{"id":885},"notes",[887],{"type":54,"value":888},"Notes",{"type":48,"tag":111,"props":890,"children":891},{},[892,914,924,958],{"type":48,"tag":115,"props":893,"children":894},{},[895,912],{"type":48,"tag":63,"props":896,"children":897},{},[898,900,905,907],{"type":54,"value":899},"Always edit ",{"type":48,"tag":83,"props":901,"children":903},{"className":902},[],[904],{"type":54,"value":198},{"type":54,"value":906},", never the compiled ",{"type":48,"tag":83,"props":908,"children":910},{"className":909},[],[911],{"type":54,"value":614},{"type":54,"value":913}," — the JSON is auto-generated and will be overwritten.",{"type":48,"tag":115,"props":915,"children":916},{},[917,922],{"type":48,"tag":63,"props":918,"children":919},{},[920],{"type":54,"value":921},"ScreenSpace behavior in VR:",{"type":54,"value":923}," When entering VR, ScreenSpace automatically detaches the panel from the camera and it returns to world-space positioning. This is handled by the ScreenSpaceUISystem.",{"type":48,"tag":115,"props":925,"children":926},{},[927,932,934,940,942,948,950,956],{"type":48,"tag":63,"props":928,"children":929},{},[930],{"type":54,"value":931},"PanelDocument for element access:",{"type":54,"value":933}," Use ",{"type":48,"tag":83,"props":935,"children":937},{"className":936},[],[938],{"type":54,"value":939},"getElementById(id)",{"type":54,"value":941}," or ",{"type":48,"tag":83,"props":943,"children":945},{"className":944},[],[946],{"type":54,"value":947},"querySelector(selector)",{"type":54,"value":949}," on the PanelDocument to access UI elements programmatically in systems. Elements can be named with ",{"type":48,"tag":83,"props":951,"children":953},{"className":952},[],[954],{"type":54,"value":955},".name = \"id\"",{"type":54,"value":957}," to make them discoverable in the scene hierarchy.",{"type":48,"tag":115,"props":959,"children":960},{},[961,966,968,974,976,982,983,989],{"type":48,"tag":63,"props":962,"children":963},{},[964],{"type":54,"value":965},"ScreenSpace uses CSS strings, not numbers",{"type":54,"value":967}," — always pass string values like ",{"type":48,"tag":83,"props":969,"children":971},{"className":970},[],[972],{"type":54,"value":973},"\"400px\"",{"type":54,"value":975},", ",{"type":48,"tag":83,"props":977,"children":979},{"className":978},[],[980],{"type":54,"value":981},"\"100vw\"",{"type":54,"value":975},{"type":48,"tag":83,"props":984,"children":986},{"className":985},[],[987],{"type":54,"value":988},"\"20px\"",{"type":54,"value":90},{"type":48,"tag":991,"props":992,"children":993},"style",{},[994],{"type":54,"value":995},"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":997,"total":1185},[998,1020,1034,1055,1076,1093,1104,1122,1135,1150,1162,1172],{"slug":999,"name":999,"fn":1000,"description":1001,"org":1002,"tags":1003,"stars":1017,"repoUrl":1018,"updatedAt":1019},"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},[1004,1007,1008,1011,1014],{"name":1005,"slug":1006,"type":16},"Engineering","engineering",{"name":27,"slug":28,"type":16},{"name":1009,"slug":1010,"type":16},"GraphQL","graphql",{"name":1012,"slug":1013,"type":16},"React","react",{"name":1015,"slug":1016,"type":16},"Relay","relay",18950,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Frelay","2026-04-22T04:58:15.370563",{"slug":1021,"name":1021,"fn":1022,"description":1023,"org":1024,"tags":1025,"stars":1017,"repoUrl":1018,"updatedAt":1033},"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},[1026,1027,1028,1031,1032],{"name":27,"slug":28,"type":16},{"name":1009,"slug":1010,"type":16},{"name":1029,"slug":1030,"type":16},"Performance","performance",{"name":1012,"slug":1013,"type":16},{"name":1015,"slug":1016,"type":16},"2026-06-10T07:30:28.726513",{"slug":1035,"name":1035,"fn":1036,"description":1037,"org":1038,"tags":1039,"stars":1052,"repoUrl":1053,"updatedAt":1054},"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},[1040,1043,1046,1049],{"name":1041,"slug":1042,"type":16},"Data Modeling","data-modeling",{"name":1044,"slug":1045,"type":16},"Deep Learning","deep-learning",{"name":1047,"slug":1048,"type":16},"Python","python",{"name":1050,"slug":1051,"type":16},"PyTorch","pytorch",6833,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fpyrefly","2026-07-18T05:12:08.515952",{"slug":1056,"name":1056,"fn":1057,"description":1058,"org":1059,"tags":1060,"stars":1073,"repoUrl":1074,"updatedAt":1075},"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},[1061,1064,1067,1070],{"name":1062,"slug":1063,"type":16},"Camera","camera",{"name":1065,"slug":1066,"type":16},"Hardware","hardware",{"name":1068,"slug":1069,"type":16},"iOS","ios",{"name":1071,"slug":1072,"type":16},"Video","video",488,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-dat-ios","2026-05-15T06:14:43.555881",{"slug":1077,"name":1077,"fn":1078,"description":1079,"org":1080,"tags":1081,"stars":1073,"repoUrl":1074,"updatedAt":1092},"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},[1082,1083,1086,1089],{"name":1068,"slug":1069,"type":16},{"name":1084,"slug":1085,"type":16},"Mobile","mobile",{"name":1087,"slug":1088,"type":16},"SDK","sdk",{"name":1090,"slug":1091,"type":16},"Swift","swift","2026-05-15T06:14:42.334435",{"slug":1094,"name":1094,"fn":1095,"description":1096,"org":1097,"tags":1098,"stars":1073,"repoUrl":1074,"updatedAt":1103},"debugging","debug wearable device software","Common issues, Developer Mode, version compatibility, state machine diagnosis",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1099,1101,1102],{"name":1100,"slug":1094,"type":16},"Debugging",{"name":1005,"slug":1006,"type":16},{"name":1068,"slug":1069,"type":16},"2026-05-15T06:14:38.626606",{"slug":1105,"name":1105,"fn":1106,"description":1107,"org":1108,"tags":1109,"stars":1073,"repoUrl":1074,"updatedAt":1121},"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},[1110,1113,1116,1119,1120],{"name":1111,"slug":1112,"type":16},"Design","design",{"name":1114,"slug":1115,"type":16},"Images","images",{"name":1117,"slug":1118,"type":16},"Interaction","interaction",{"name":24,"slug":25,"type":16},{"name":1071,"slug":1072,"type":16},"2026-05-15T06:14:39.844502",{"slug":1123,"name":1123,"fn":1124,"description":1125,"org":1126,"tags":1127,"stars":1073,"repoUrl":1074,"updatedAt":1134},"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},[1128,1131,1132,1133],{"name":1129,"slug":1130,"type":16},"Configuration","configuration",{"name":1068,"slug":1069,"type":16},{"name":1087,"slug":1088,"type":16},{"name":1090,"slug":1091,"type":16},"2026-05-15T06:14:41.086639",{"slug":1136,"name":1136,"fn":1137,"description":1138,"org":1139,"tags":1140,"stars":1073,"repoUrl":1074,"updatedAt":1149},"mockdevice-testing","test wearable apps with mock devices","MockDeviceKit for testing without physical glasses hardware",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1141,1142,1143,1146],{"name":1068,"slug":1069,"type":16},{"name":1084,"slug":1085,"type":16},{"name":1144,"slug":1145,"type":16},"QA","qa",{"name":1147,"slug":1148,"type":16},"Testing","testing","2026-05-15T06:14:37.406692",{"slug":1151,"name":1151,"fn":1152,"description":1153,"org":1154,"tags":1155,"stars":1073,"repoUrl":1074,"updatedAt":1161},"permissions-registration","register apps with Meta AI","App registration with Meta AI, camera permission flows",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1156,1157,1158],{"name":1062,"slug":1063,"type":16},{"name":1068,"slug":1069,"type":16},{"name":1159,"slug":1160,"type":16},"Permissions","permissions","2026-05-15T06:14:46.030253",{"slug":1163,"name":1163,"fn":1164,"description":1165,"org":1166,"tags":1167,"stars":1073,"repoUrl":1074,"updatedAt":1171},"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},[1168,1169,1170],{"name":1062,"slug":1063,"type":16},{"name":1068,"slug":1069,"type":16},{"name":1084,"slug":1085,"type":16},"2026-05-15T06:14:36.185947",{"slug":1173,"name":1173,"fn":1174,"description":1175,"org":1176,"tags":1177,"stars":1073,"repoUrl":1074,"updatedAt":1184},"session-lifecycle","monitor device session lifecycle states","Device session states, pause\u002Fresume, availability monitoring",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1178,1179,1180,1183],{"name":1068,"slug":1069,"type":16},{"name":1084,"slug":1085,"type":16},{"name":1181,"slug":1182,"type":16},"Monitoring","monitoring",{"name":1029,"slug":1030,"type":16},"2026-05-15T06:14:44.790925",27,{"items":1187,"total":847},[1188,1200,1215,1227,1241,1257,1269],{"slug":1189,"name":1189,"fn":1190,"description":1191,"org":1192,"tags":1193,"stars":29,"repoUrl":30,"updatedAt":1199},"iwsdk-debug","debug continuous behavior in WebXR","Debug continuous behavior in WebXR scenes — physics, animations, collisions, game loops, or any real-time interaction that happens too fast for an agent to observe. Uses ECS pause\u002Fstep\u002Fsnapshot\u002Fdiff to freeze time and inspect state frame by frame.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1194,1195,1196,1197,1198],{"name":1100,"slug":1094,"type":16},{"name":18,"slug":19,"type":16},{"name":1117,"slug":1118,"type":16},{"name":14,"slug":15,"type":16},{"name":21,"slug":22,"type":16},"2026-04-06T18:11:37.886889",{"slug":1201,"name":1201,"fn":1202,"description":1203,"org":1204,"tags":1205,"stars":29,"repoUrl":30,"updatedAt":1214},"iwsdk-depth-occlusion","implement depth sensing and occlusion in IWSDK","Guide for implementing depth sensing and occlusion in IWSDK projects. Use when adding depth-based occlusion to hide virtual objects behind real-world surfaces, configuring DepthSensingSystem, choosing occlusion modes, or troubleshooting objects that disappear or fail to occlude.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1206,1209,1210,1213],{"name":1207,"slug":1208,"type":16},"AR","ar",{"name":14,"slug":15,"type":16},{"name":1211,"slug":1212,"type":16},"VR","vr",{"name":21,"slug":22,"type":16},"2026-07-21T05:39:07.241041",{"slug":1216,"name":1216,"fn":1217,"description":1218,"org":1219,"tags":1220,"stars":29,"repoUrl":30,"updatedAt":1226},"iwsdk-grab","grab and move objects in WebXR scenes","Grab an object in the WebXR scene using emulated controllers. Use when the user wants to pick up, move, or test grabbing an object. Supports OneHandGrabbable and TwoHandsGrabbable components which use proximity-based grip (squeeze button), not trigger.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1221,1222,1223,1224,1225],{"name":1207,"slug":1208,"type":16},{"name":18,"slug":19,"type":16},{"name":1117,"slug":1118,"type":16},{"name":1211,"slug":1212,"type":16},{"name":21,"slug":22,"type":16},"2026-07-24T05:40:20.809536",{"slug":1228,"name":1228,"fn":1229,"description":1230,"org":1231,"tags":1232,"stars":29,"repoUrl":30,"updatedAt":1240},"iwsdk-physics","implement physics in IWSDK projects","Guide for implementing physics in IWSDK projects. Use when adding physics simulation, configuring rigid bodies, collision shapes, applying forces, creating grabbable physics objects, or troubleshooting physics behavior.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1233,1234,1235,1236,1239],{"name":18,"slug":19,"type":16},{"name":1117,"slug":1118,"type":16},{"name":14,"slug":15,"type":16},{"name":1237,"slug":1238,"type":16},"Physics","physics",{"name":21,"slug":22,"type":16},"2026-07-24T05:40:22.854101",{"slug":1242,"name":1242,"fn":1243,"description":1244,"org":1245,"tags":1246,"stars":29,"repoUrl":30,"updatedAt":1256},"iwsdk-planner","plan IWSDK projects and architecture","IWSDK experience pipeline and planning guide. Use when building a new IWSDK app\u002Fgame end-to-end, planning new IWSDK features, designing systems\u002Fcomponents, reviewing IWSDK code architecture, or when the user asks about IWSDK patterns, ECS design, signals, or reactive programming. Runs a phased ideation → design → grounding → architecture → build → verify → ship pipeline, orchestrating sub-agents per phase where the harness supports them.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1247,1250,1251,1252,1255],{"name":1248,"slug":1249,"type":16},"Architecture","architecture",{"name":18,"slug":19,"type":16},{"name":14,"slug":15,"type":16},{"name":1253,"slug":1254,"type":16},"Strategy","strategy",{"name":21,"slug":22,"type":16},"2026-07-24T05:40:21.856049",{"slug":1258,"name":1258,"fn":1259,"description":1260,"org":1261,"tags":1262,"stars":29,"repoUrl":30,"updatedAt":1268},"iwsdk-ray","implement ray-based interactions in WebXR","Ray-based interactions in the WebXR scene — click objects, press UI buttons, or distance-grab with DistanceGrabbable. Use when the user wants to point at and interact with something at a distance, click a UI button, or test ray-based selection.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1263,1264,1265,1266,1267],{"name":1207,"slug":1208,"type":16},{"name":18,"slug":19,"type":16},{"name":1117,"slug":1118,"type":16},{"name":1211,"slug":1212,"type":16},{"name":21,"slug":22,"type":16},"2026-07-24T05:40:19.841604",{"slug":4,"name":4,"fn":5,"description":6,"org":1270,"tags":1271,"stars":29,"repoUrl":30,"updatedAt":31},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1272,1273,1274,1275,1276],{"name":27,"slug":28,"type":16},{"name":18,"slug":19,"type":16},{"name":14,"slug":15,"type":16},{"name":24,"slug":25,"type":16},{"name":21,"slug":22,"type":16}]