[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-meta-add-local-storage":3,"mdc--tgrem1-key":34,"related-org-meta-add-local-storage":2332,"related-repo-meta-add-local-storage":2524},{"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-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},"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},"Storage","storage","tag",{"name":18,"slug":19,"type":16},"Persistence","persistence",{"name":21,"slug":22,"type":16},"Frontend","frontend",189,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-webapp","2026-09-01T08:30:31.384362",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-local-storage","---\nname: add-local-storage\ndescription: >-\n  Add client-side data persistence to a Meta Display Glasses webapp using the\n  W3C Web Storage API (localStorage and sessionStorage). Use when the user wants\n  to save settings, cache data, persist state, or store user preferences.\nargument-hint: \"[purpose: settings|cache|state|preferences]\"\n---\n\n# Add Local Storage to Meta Display Glasses WebApp\n\nAdd client-side data persistence using the standard [W3C Web Storage API](https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwebstorage\u002F). Supports `localStorage` (persists across sessions) and `sessionStorage` (cleared when the session ends). No SDK required.\n\n## Prerequisites\n\n- Existing webapp created via `\u002Fcreate-webapp`\n\n## Storage Types\n\n| API | Persistence | Use Cases |\n|-----|------------|-----------|\n| `localStorage` | Persists until explicitly cleared | User settings, saved data, app state, preferences |\n| `sessionStorage` | Cleared when session ends | Temporary state, form drafts, navigation context |\n\nBoth APIs share the same interface and store string key-value pairs.\n\n## Steps\n\n### 1. Gather Information\n\nAsk the user:\n- **What data?** Settings, preferences, app state, cached API responses?\n- **Which storage?** Persistent (`localStorage`) or session-only (`sessionStorage`)?\n- **Data shape?** Single values or structured objects?\n\n### 2. Add Storage Helpers\n\nIn `app.js`, add helpers for reading and writing structured data:\n\n```javascript\nvar STORAGE_KEY = 'mdg_myapp';\n\nfunction saveData(data) {\n  localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\n}\n\nfunction loadData() {\n  try {\n    var saved = localStorage.getItem(STORAGE_KEY);\n    return saved ? JSON.parse(saved) : null;\n  } catch (e) {\n    return null;\n  }\n}\n\nfunction clearData() {\n  localStorage.removeItem(STORAGE_KEY);\n}\n```\n\n### 3. Wire Up to App State\n\nLoad saved data on startup and save on changes:\n\n```javascript\n\u002F\u002F On init\nvar saved = loadData();\nif (saved) {\n  state.data = saved;\n}\n\n\u002F\u002F After any state change\nstate.data.score = 100;\nsaveData(state.data);\n```\n\n### 4. Add Settings UI (if needed)\n\nFor user-facing settings with persistence:\n\n```javascript\ncase 'toggle-dark-mode':\n  state.data.darkMode = !state.data.darkMode;\n  document.body.classList.toggle('light-mode', !state.data.darkMode);\n  saveData(state.data);\n  break;\n\ncase 'reset-data':\n  clearData();\n  state.data = {};\n  showToast('Data cleared');\n  break;\n```\n\n## Patterns\n\n### Save User Preferences\n\n```javascript\nfunction savePreference(key, value) {\n  var prefs = loadData() || {};\n  prefs[key] = value;\n  saveData(prefs);\n}\n\nfunction getPreference(key, defaultValue) {\n  var prefs = loadData() || {};\n  return prefs[key] !== undefined ? prefs[key] : defaultValue;\n}\n```\n\n### Cache API Responses\n\n```javascript\nfunction cacheResponse(url, data, ttlMs) {\n  var entry = { data: data, timestamp: Date.now(), ttl: ttlMs };\n  localStorage.setItem('cache_' + url, JSON.stringify(entry));\n}\n\nfunction getCachedResponse(url) {\n  try {\n    var entry = JSON.parse(localStorage.getItem('cache_' + url));\n    if (entry && Date.now() - entry.timestamp \u003C entry.ttl) {\n      return entry.data;\n    }\n  } catch (e) {}\n  return null;\n}\n```\n\n### Session-Only State\n\nUse `sessionStorage` for data that should not survive a restart:\n\n```javascript\n\u002F\u002F Save temporary navigation context\nsessionStorage.setItem('returnScreen', 'home');\n\n\u002F\u002F Restore on load\nvar returnTo = sessionStorage.getItem('returnScreen') || 'home';\n```\n\n## Verify\n\n- [ ] Data persists after page refresh (localStorage)\n- [ ] Session data clears when session ends (sessionStorage)\n- [ ] App handles missing\u002Fcorrupt stored data gracefully\n- [ ] Reset\u002Fclear action works\n\n## Related Skills\n\n- `\u002Fadd-ui` — Add settings screens and toggle buttons\n- `\u002Fconnect-api` — Fetch data to cache locally\n",{"data":35,"body":37},{"name":4,"description":6,"argument-hint":36},"[purpose: settings|cache|state|preferences]",{"type":38,"children":39},"root",[40,49,83,90,106,112,186,191,197,204,209,257,263,276,732,738,743,919,925,930,1258,1264,1270,1563,1569,2071,2077,2089,2245,2251,2295,2301,2326],{"type":41,"tag":42,"props":43,"children":45},"element","h1",{"id":44},"add-local-storage-to-meta-display-glasses-webapp",[46],{"type":47,"value":48},"text","Add Local Storage to Meta Display Glasses WebApp",{"type":41,"tag":50,"props":51,"children":52},"p",{},[53,55,64,66,73,75,81],{"type":47,"value":54},"Add client-side data persistence using the standard ",{"type":41,"tag":56,"props":57,"children":61},"a",{"href":58,"rel":59},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwebstorage\u002F",[60],"nofollow",[62],{"type":47,"value":63},"W3C Web Storage API",{"type":47,"value":65},". Supports ",{"type":41,"tag":67,"props":68,"children":70},"code",{"className":69},[],[71],{"type":47,"value":72},"localStorage",{"type":47,"value":74}," (persists across sessions) and ",{"type":41,"tag":67,"props":76,"children":78},{"className":77},[],[79],{"type":47,"value":80},"sessionStorage",{"type":47,"value":82}," (cleared when the session ends). No SDK required.",{"type":41,"tag":84,"props":85,"children":87},"h2",{"id":86},"prerequisites",[88],{"type":47,"value":89},"Prerequisites",{"type":41,"tag":91,"props":92,"children":93},"ul",{},[94],{"type":41,"tag":95,"props":96,"children":97},"li",{},[98,100],{"type":47,"value":99},"Existing webapp created via ",{"type":41,"tag":67,"props":101,"children":103},{"className":102},[],[104],{"type":47,"value":105},"\u002Fcreate-webapp",{"type":41,"tag":84,"props":107,"children":109},{"id":108},"storage-types",[110],{"type":47,"value":111},"Storage Types",{"type":41,"tag":113,"props":114,"children":115},"table",{},[116,139],{"type":41,"tag":117,"props":118,"children":119},"thead",{},[120],{"type":41,"tag":121,"props":122,"children":123},"tr",{},[124,130,134],{"type":41,"tag":125,"props":126,"children":127},"th",{},[128],{"type":47,"value":129},"API",{"type":41,"tag":125,"props":131,"children":132},{},[133],{"type":47,"value":18},{"type":41,"tag":125,"props":135,"children":136},{},[137],{"type":47,"value":138},"Use Cases",{"type":41,"tag":140,"props":141,"children":142},"tbody",{},[143,165],{"type":41,"tag":121,"props":144,"children":145},{},[146,155,160],{"type":41,"tag":147,"props":148,"children":149},"td",{},[150],{"type":41,"tag":67,"props":151,"children":153},{"className":152},[],[154],{"type":47,"value":72},{"type":41,"tag":147,"props":156,"children":157},{},[158],{"type":47,"value":159},"Persists until explicitly cleared",{"type":41,"tag":147,"props":161,"children":162},{},[163],{"type":47,"value":164},"User settings, saved data, app state, preferences",{"type":41,"tag":121,"props":166,"children":167},{},[168,176,181],{"type":41,"tag":147,"props":169,"children":170},{},[171],{"type":41,"tag":67,"props":172,"children":174},{"className":173},[],[175],{"type":47,"value":80},{"type":41,"tag":147,"props":177,"children":178},{},[179],{"type":47,"value":180},"Cleared when session ends",{"type":41,"tag":147,"props":182,"children":183},{},[184],{"type":47,"value":185},"Temporary state, form drafts, navigation context",{"type":41,"tag":50,"props":187,"children":188},{},[189],{"type":47,"value":190},"Both APIs share the same interface and store string key-value pairs.",{"type":41,"tag":84,"props":192,"children":194},{"id":193},"steps",[195],{"type":47,"value":196},"Steps",{"type":41,"tag":198,"props":199,"children":201},"h3",{"id":200},"_1-gather-information",[202],{"type":47,"value":203},"1. Gather Information",{"type":41,"tag":50,"props":205,"children":206},{},[207],{"type":47,"value":208},"Ask the user:",{"type":41,"tag":91,"props":210,"children":211},{},[212,223,247],{"type":41,"tag":95,"props":213,"children":214},{},[215,221],{"type":41,"tag":216,"props":217,"children":218},"strong",{},[219],{"type":47,"value":220},"What data?",{"type":47,"value":222}," Settings, preferences, app state, cached API responses?",{"type":41,"tag":95,"props":224,"children":225},{},[226,231,233,238,240,245],{"type":41,"tag":216,"props":227,"children":228},{},[229],{"type":47,"value":230},"Which storage?",{"type":47,"value":232}," Persistent (",{"type":41,"tag":67,"props":234,"children":236},{"className":235},[],[237],{"type":47,"value":72},{"type":47,"value":239},") or session-only (",{"type":41,"tag":67,"props":241,"children":243},{"className":242},[],[244],{"type":47,"value":80},{"type":47,"value":246},")?",{"type":41,"tag":95,"props":248,"children":249},{},[250,255],{"type":41,"tag":216,"props":251,"children":252},{},[253],{"type":47,"value":254},"Data shape?",{"type":47,"value":256}," Single values or structured objects?",{"type":41,"tag":198,"props":258,"children":260},{"id":259},"_2-add-storage-helpers",[261],{"type":47,"value":262},"2. Add Storage Helpers",{"type":41,"tag":50,"props":264,"children":265},{},[266,268,274],{"type":47,"value":267},"In ",{"type":41,"tag":67,"props":269,"children":271},{"className":270},[],[272],{"type":47,"value":273},"app.js",{"type":47,"value":275},", add helpers for reading and writing structured data:",{"type":41,"tag":277,"props":278,"children":283},"pre",{"className":279,"code":280,"language":281,"meta":282,"style":282},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","var STORAGE_KEY = 'mdg_myapp';\n\nfunction saveData(data) {\n  localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\n}\n\nfunction loadData() {\n  try {\n    var saved = localStorage.getItem(STORAGE_KEY);\n    return saved ? JSON.parse(saved) : null;\n  } catch (e) {\n    return null;\n  }\n}\n\nfunction clearData() {\n  localStorage.removeItem(STORAGE_KEY);\n}\n","javascript","",[284],{"type":41,"tag":67,"props":285,"children":286},{"__ignoreMap":282},[287,332,342,378,443,452,460,482,496,545,600,633,645,654,662,670,691,724],{"type":41,"tag":288,"props":289,"children":292},"span",{"class":290,"line":291},"line",1,[293,299,305,311,316,322,327],{"type":41,"tag":288,"props":294,"children":296},{"style":295},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[297],{"type":47,"value":298},"var",{"type":41,"tag":288,"props":300,"children":302},{"style":301},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[303],{"type":47,"value":304}," STORAGE_KEY ",{"type":41,"tag":288,"props":306,"children":308},{"style":307},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[309],{"type":47,"value":310},"=",{"type":41,"tag":288,"props":312,"children":313},{"style":307},[314],{"type":47,"value":315}," '",{"type":41,"tag":288,"props":317,"children":319},{"style":318},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[320],{"type":47,"value":321},"mdg_myapp",{"type":41,"tag":288,"props":323,"children":324},{"style":307},[325],{"type":47,"value":326},"'",{"type":41,"tag":288,"props":328,"children":329},{"style":307},[330],{"type":47,"value":331},";\n",{"type":41,"tag":288,"props":333,"children":335},{"class":290,"line":334},2,[336],{"type":41,"tag":288,"props":337,"children":339},{"emptyLinePlaceholder":338},true,[340],{"type":47,"value":341},"\n",{"type":41,"tag":288,"props":343,"children":345},{"class":290,"line":344},3,[346,351,357,362,368,373],{"type":41,"tag":288,"props":347,"children":348},{"style":295},[349],{"type":47,"value":350},"function",{"type":41,"tag":288,"props":352,"children":354},{"style":353},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[355],{"type":47,"value":356}," saveData",{"type":41,"tag":288,"props":358,"children":359},{"style":307},[360],{"type":47,"value":361},"(",{"type":41,"tag":288,"props":363,"children":365},{"style":364},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[366],{"type":47,"value":367},"data",{"type":41,"tag":288,"props":369,"children":370},{"style":307},[371],{"type":47,"value":372},")",{"type":41,"tag":288,"props":374,"children":375},{"style":307},[376],{"type":47,"value":377}," {\n",{"type":41,"tag":288,"props":379,"children":381},{"class":290,"line":380},4,[382,387,392,397,402,407,412,417,421,426,430,434,439],{"type":41,"tag":288,"props":383,"children":384},{"style":301},[385],{"type":47,"value":386},"  localStorage",{"type":41,"tag":288,"props":388,"children":389},{"style":307},[390],{"type":47,"value":391},".",{"type":41,"tag":288,"props":393,"children":394},{"style":353},[395],{"type":47,"value":396},"setItem",{"type":41,"tag":288,"props":398,"children":400},{"style":399},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[401],{"type":47,"value":361},{"type":41,"tag":288,"props":403,"children":404},{"style":301},[405],{"type":47,"value":406},"STORAGE_KEY",{"type":41,"tag":288,"props":408,"children":409},{"style":307},[410],{"type":47,"value":411},",",{"type":41,"tag":288,"props":413,"children":414},{"style":301},[415],{"type":47,"value":416}," JSON",{"type":41,"tag":288,"props":418,"children":419},{"style":307},[420],{"type":47,"value":391},{"type":41,"tag":288,"props":422,"children":423},{"style":353},[424],{"type":47,"value":425},"stringify",{"type":41,"tag":288,"props":427,"children":428},{"style":399},[429],{"type":47,"value":361},{"type":41,"tag":288,"props":431,"children":432},{"style":301},[433],{"type":47,"value":367},{"type":41,"tag":288,"props":435,"children":436},{"style":399},[437],{"type":47,"value":438},"))",{"type":41,"tag":288,"props":440,"children":441},{"style":307},[442],{"type":47,"value":331},{"type":41,"tag":288,"props":444,"children":446},{"class":290,"line":445},5,[447],{"type":41,"tag":288,"props":448,"children":449},{"style":307},[450],{"type":47,"value":451},"}\n",{"type":41,"tag":288,"props":453,"children":455},{"class":290,"line":454},6,[456],{"type":41,"tag":288,"props":457,"children":458},{"emptyLinePlaceholder":338},[459],{"type":47,"value":341},{"type":41,"tag":288,"props":461,"children":463},{"class":290,"line":462},7,[464,468,473,478],{"type":41,"tag":288,"props":465,"children":466},{"style":295},[467],{"type":47,"value":350},{"type":41,"tag":288,"props":469,"children":470},{"style":353},[471],{"type":47,"value":472}," loadData",{"type":41,"tag":288,"props":474,"children":475},{"style":307},[476],{"type":47,"value":477},"()",{"type":41,"tag":288,"props":479,"children":480},{"style":307},[481],{"type":47,"value":377},{"type":41,"tag":288,"props":483,"children":485},{"class":290,"line":484},8,[486,492],{"type":41,"tag":288,"props":487,"children":489},{"style":488},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[490],{"type":47,"value":491},"  try",{"type":41,"tag":288,"props":493,"children":494},{"style":307},[495],{"type":47,"value":377},{"type":41,"tag":288,"props":497,"children":499},{"class":290,"line":498},9,[500,505,510,515,520,524,529,533,537,541],{"type":41,"tag":288,"props":501,"children":502},{"style":295},[503],{"type":47,"value":504},"    var",{"type":41,"tag":288,"props":506,"children":507},{"style":301},[508],{"type":47,"value":509}," saved",{"type":41,"tag":288,"props":511,"children":512},{"style":307},[513],{"type":47,"value":514}," =",{"type":41,"tag":288,"props":516,"children":517},{"style":301},[518],{"type":47,"value":519}," localStorage",{"type":41,"tag":288,"props":521,"children":522},{"style":307},[523],{"type":47,"value":391},{"type":41,"tag":288,"props":525,"children":526},{"style":353},[527],{"type":47,"value":528},"getItem",{"type":41,"tag":288,"props":530,"children":531},{"style":399},[532],{"type":47,"value":361},{"type":41,"tag":288,"props":534,"children":535},{"style":301},[536],{"type":47,"value":406},{"type":41,"tag":288,"props":538,"children":539},{"style":399},[540],{"type":47,"value":372},{"type":41,"tag":288,"props":542,"children":543},{"style":307},[544],{"type":47,"value":331},{"type":41,"tag":288,"props":546,"children":548},{"class":290,"line":547},10,[549,554,558,563,567,571,576,580,585,590,595],{"type":41,"tag":288,"props":550,"children":551},{"style":488},[552],{"type":47,"value":553},"    return",{"type":41,"tag":288,"props":555,"children":556},{"style":301},[557],{"type":47,"value":509},{"type":41,"tag":288,"props":559,"children":560},{"style":307},[561],{"type":47,"value":562}," ?",{"type":41,"tag":288,"props":564,"children":565},{"style":301},[566],{"type":47,"value":416},{"type":41,"tag":288,"props":568,"children":569},{"style":307},[570],{"type":47,"value":391},{"type":41,"tag":288,"props":572,"children":573},{"style":353},[574],{"type":47,"value":575},"parse",{"type":41,"tag":288,"props":577,"children":578},{"style":399},[579],{"type":47,"value":361},{"type":41,"tag":288,"props":581,"children":582},{"style":301},[583],{"type":47,"value":584},"saved",{"type":41,"tag":288,"props":586,"children":587},{"style":399},[588],{"type":47,"value":589},") ",{"type":41,"tag":288,"props":591,"children":592},{"style":307},[593],{"type":47,"value":594},":",{"type":41,"tag":288,"props":596,"children":597},{"style":307},[598],{"type":47,"value":599}," null;\n",{"type":41,"tag":288,"props":601,"children":603},{"class":290,"line":602},11,[604,609,614,619,624,628],{"type":41,"tag":288,"props":605,"children":606},{"style":307},[607],{"type":47,"value":608},"  }",{"type":41,"tag":288,"props":610,"children":611},{"style":488},[612],{"type":47,"value":613}," catch",{"type":41,"tag":288,"props":615,"children":616},{"style":399},[617],{"type":47,"value":618}," (",{"type":41,"tag":288,"props":620,"children":621},{"style":301},[622],{"type":47,"value":623},"e",{"type":41,"tag":288,"props":625,"children":626},{"style":399},[627],{"type":47,"value":589},{"type":41,"tag":288,"props":629,"children":630},{"style":307},[631],{"type":47,"value":632},"{\n",{"type":41,"tag":288,"props":634,"children":636},{"class":290,"line":635},12,[637,641],{"type":41,"tag":288,"props":638,"children":639},{"style":488},[640],{"type":47,"value":553},{"type":41,"tag":288,"props":642,"children":643},{"style":307},[644],{"type":47,"value":599},{"type":41,"tag":288,"props":646,"children":648},{"class":290,"line":647},13,[649],{"type":41,"tag":288,"props":650,"children":651},{"style":307},[652],{"type":47,"value":653},"  }\n",{"type":41,"tag":288,"props":655,"children":657},{"class":290,"line":656},14,[658],{"type":41,"tag":288,"props":659,"children":660},{"style":307},[661],{"type":47,"value":451},{"type":41,"tag":288,"props":663,"children":665},{"class":290,"line":664},15,[666],{"type":41,"tag":288,"props":667,"children":668},{"emptyLinePlaceholder":338},[669],{"type":47,"value":341},{"type":41,"tag":288,"props":671,"children":673},{"class":290,"line":672},16,[674,678,683,687],{"type":41,"tag":288,"props":675,"children":676},{"style":295},[677],{"type":47,"value":350},{"type":41,"tag":288,"props":679,"children":680},{"style":353},[681],{"type":47,"value":682}," clearData",{"type":41,"tag":288,"props":684,"children":685},{"style":307},[686],{"type":47,"value":477},{"type":41,"tag":288,"props":688,"children":689},{"style":307},[690],{"type":47,"value":377},{"type":41,"tag":288,"props":692,"children":694},{"class":290,"line":693},17,[695,699,703,708,712,716,720],{"type":41,"tag":288,"props":696,"children":697},{"style":301},[698],{"type":47,"value":386},{"type":41,"tag":288,"props":700,"children":701},{"style":307},[702],{"type":47,"value":391},{"type":41,"tag":288,"props":704,"children":705},{"style":353},[706],{"type":47,"value":707},"removeItem",{"type":41,"tag":288,"props":709,"children":710},{"style":399},[711],{"type":47,"value":361},{"type":41,"tag":288,"props":713,"children":714},{"style":301},[715],{"type":47,"value":406},{"type":41,"tag":288,"props":717,"children":718},{"style":399},[719],{"type":47,"value":372},{"type":41,"tag":288,"props":721,"children":722},{"style":307},[723],{"type":47,"value":331},{"type":41,"tag":288,"props":725,"children":727},{"class":290,"line":726},18,[728],{"type":41,"tag":288,"props":729,"children":730},{"style":307},[731],{"type":47,"value":451},{"type":41,"tag":198,"props":733,"children":735},{"id":734},"_3-wire-up-to-app-state",[736],{"type":47,"value":737},"3. Wire Up to App State",{"type":41,"tag":50,"props":739,"children":740},{},[741],{"type":47,"value":742},"Load saved data on startup and save on changes:",{"type":41,"tag":277,"props":744,"children":746},{"className":279,"code":745,"language":281,"meta":282,"style":282},"\u002F\u002F On init\nvar saved = loadData();\nif (saved) {\n  state.data = saved;\n}\n\n\u002F\u002F After any state change\nstate.data.score = 100;\nsaveData(state.data);\n",[747],{"type":41,"tag":67,"props":748,"children":749},{"__ignoreMap":282},[750,759,787,804,832,839,846,854,893],{"type":41,"tag":288,"props":751,"children":752},{"class":290,"line":291},[753],{"type":41,"tag":288,"props":754,"children":756},{"style":755},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[757],{"type":47,"value":758},"\u002F\u002F On init\n",{"type":41,"tag":288,"props":760,"children":761},{"class":290,"line":334},[762,766,771,775,779,783],{"type":41,"tag":288,"props":763,"children":764},{"style":295},[765],{"type":47,"value":298},{"type":41,"tag":288,"props":767,"children":768},{"style":301},[769],{"type":47,"value":770}," saved ",{"type":41,"tag":288,"props":772,"children":773},{"style":307},[774],{"type":47,"value":310},{"type":41,"tag":288,"props":776,"children":777},{"style":353},[778],{"type":47,"value":472},{"type":41,"tag":288,"props":780,"children":781},{"style":301},[782],{"type":47,"value":477},{"type":41,"tag":288,"props":784,"children":785},{"style":307},[786],{"type":47,"value":331},{"type":41,"tag":288,"props":788,"children":789},{"class":290,"line":344},[790,795,800],{"type":41,"tag":288,"props":791,"children":792},{"style":488},[793],{"type":47,"value":794},"if",{"type":41,"tag":288,"props":796,"children":797},{"style":301},[798],{"type":47,"value":799}," (saved) ",{"type":41,"tag":288,"props":801,"children":802},{"style":307},[803],{"type":47,"value":632},{"type":41,"tag":288,"props":805,"children":806},{"class":290,"line":380},[807,812,816,820,824,828],{"type":41,"tag":288,"props":808,"children":809},{"style":301},[810],{"type":47,"value":811},"  state",{"type":41,"tag":288,"props":813,"children":814},{"style":307},[815],{"type":47,"value":391},{"type":41,"tag":288,"props":817,"children":818},{"style":301},[819],{"type":47,"value":367},{"type":41,"tag":288,"props":821,"children":822},{"style":307},[823],{"type":47,"value":514},{"type":41,"tag":288,"props":825,"children":826},{"style":301},[827],{"type":47,"value":509},{"type":41,"tag":288,"props":829,"children":830},{"style":307},[831],{"type":47,"value":331},{"type":41,"tag":288,"props":833,"children":834},{"class":290,"line":445},[835],{"type":41,"tag":288,"props":836,"children":837},{"style":307},[838],{"type":47,"value":451},{"type":41,"tag":288,"props":840,"children":841},{"class":290,"line":454},[842],{"type":41,"tag":288,"props":843,"children":844},{"emptyLinePlaceholder":338},[845],{"type":47,"value":341},{"type":41,"tag":288,"props":847,"children":848},{"class":290,"line":462},[849],{"type":41,"tag":288,"props":850,"children":851},{"style":755},[852],{"type":47,"value":853},"\u002F\u002F After any state change\n",{"type":41,"tag":288,"props":855,"children":856},{"class":290,"line":484},[857,862,866,870,874,879,883,889],{"type":41,"tag":288,"props":858,"children":859},{"style":301},[860],{"type":47,"value":861},"state",{"type":41,"tag":288,"props":863,"children":864},{"style":307},[865],{"type":47,"value":391},{"type":41,"tag":288,"props":867,"children":868},{"style":301},[869],{"type":47,"value":367},{"type":41,"tag":288,"props":871,"children":872},{"style":307},[873],{"type":47,"value":391},{"type":41,"tag":288,"props":875,"children":876},{"style":301},[877],{"type":47,"value":878},"score ",{"type":41,"tag":288,"props":880,"children":881},{"style":307},[882],{"type":47,"value":310},{"type":41,"tag":288,"props":884,"children":886},{"style":885},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[887],{"type":47,"value":888}," 100",{"type":41,"tag":288,"props":890,"children":891},{"style":307},[892],{"type":47,"value":331},{"type":41,"tag":288,"props":894,"children":895},{"class":290,"line":498},[896,901,906,910,915],{"type":41,"tag":288,"props":897,"children":898},{"style":353},[899],{"type":47,"value":900},"saveData",{"type":41,"tag":288,"props":902,"children":903},{"style":301},[904],{"type":47,"value":905},"(state",{"type":41,"tag":288,"props":907,"children":908},{"style":307},[909],{"type":47,"value":391},{"type":41,"tag":288,"props":911,"children":912},{"style":301},[913],{"type":47,"value":914},"data)",{"type":41,"tag":288,"props":916,"children":917},{"style":307},[918],{"type":47,"value":331},{"type":41,"tag":198,"props":920,"children":922},{"id":921},"_4-add-settings-ui-if-needed",[923],{"type":47,"value":924},"4. Add Settings UI (if needed)",{"type":41,"tag":50,"props":926,"children":927},{},[928],{"type":47,"value":929},"For user-facing settings with persistence:",{"type":41,"tag":277,"props":931,"children":933},{"className":279,"code":932,"language":281,"meta":282,"style":282},"case 'toggle-dark-mode':\n  state.data.darkMode = !state.data.darkMode;\n  document.body.classList.toggle('light-mode', !state.data.darkMode);\n  saveData(state.data);\n  break;\n\ncase 'reset-data':\n  clearData();\n  state.data = {};\n  showToast('Data cleared');\n  break;\n",[934],{"type":41,"tag":67,"props":935,"children":936},{"__ignoreMap":282},[937,963,1021,1106,1130,1142,1149,1173,1189,1214,1247],{"type":41,"tag":288,"props":938,"children":939},{"class":290,"line":291},[940,945,949,954,958],{"type":41,"tag":288,"props":941,"children":942},{"style":488},[943],{"type":47,"value":944},"case",{"type":41,"tag":288,"props":946,"children":947},{"style":307},[948],{"type":47,"value":315},{"type":41,"tag":288,"props":950,"children":951},{"style":318},[952],{"type":47,"value":953},"toggle-dark-mode",{"type":41,"tag":288,"props":955,"children":956},{"style":307},[957],{"type":47,"value":326},{"type":41,"tag":288,"props":959,"children":960},{"style":301},[961],{"type":47,"value":962},":\n",{"type":41,"tag":288,"props":964,"children":965},{"class":290,"line":334},[966,970,974,978,982,987,991,996,1000,1004,1008,1012,1017],{"type":41,"tag":288,"props":967,"children":968},{"style":301},[969],{"type":47,"value":811},{"type":41,"tag":288,"props":971,"children":972},{"style":307},[973],{"type":47,"value":391},{"type":41,"tag":288,"props":975,"children":976},{"style":301},[977],{"type":47,"value":367},{"type":41,"tag":288,"props":979,"children":980},{"style":307},[981],{"type":47,"value":391},{"type":41,"tag":288,"props":983,"children":984},{"style":301},[985],{"type":47,"value":986},"darkMode ",{"type":41,"tag":288,"props":988,"children":989},{"style":307},[990],{"type":47,"value":310},{"type":41,"tag":288,"props":992,"children":993},{"style":307},[994],{"type":47,"value":995}," !",{"type":41,"tag":288,"props":997,"children":998},{"style":301},[999],{"type":47,"value":861},{"type":41,"tag":288,"props":1001,"children":1002},{"style":307},[1003],{"type":47,"value":391},{"type":41,"tag":288,"props":1005,"children":1006},{"style":301},[1007],{"type":47,"value":367},{"type":41,"tag":288,"props":1009,"children":1010},{"style":307},[1011],{"type":47,"value":391},{"type":41,"tag":288,"props":1013,"children":1014},{"style":301},[1015],{"type":47,"value":1016},"darkMode",{"type":41,"tag":288,"props":1018,"children":1019},{"style":307},[1020],{"type":47,"value":331},{"type":41,"tag":288,"props":1022,"children":1023},{"class":290,"line":344},[1024,1029,1033,1038,1042,1047,1051,1056,1060,1064,1069,1073,1077,1081,1085,1089,1093,1097,1102],{"type":41,"tag":288,"props":1025,"children":1026},{"style":301},[1027],{"type":47,"value":1028},"  document",{"type":41,"tag":288,"props":1030,"children":1031},{"style":307},[1032],{"type":47,"value":391},{"type":41,"tag":288,"props":1034,"children":1035},{"style":301},[1036],{"type":47,"value":1037},"body",{"type":41,"tag":288,"props":1039,"children":1040},{"style":307},[1041],{"type":47,"value":391},{"type":41,"tag":288,"props":1043,"children":1044},{"style":301},[1045],{"type":47,"value":1046},"classList",{"type":41,"tag":288,"props":1048,"children":1049},{"style":307},[1050],{"type":47,"value":391},{"type":41,"tag":288,"props":1052,"children":1053},{"style":353},[1054],{"type":47,"value":1055},"toggle",{"type":41,"tag":288,"props":1057,"children":1058},{"style":301},[1059],{"type":47,"value":361},{"type":41,"tag":288,"props":1061,"children":1062},{"style":307},[1063],{"type":47,"value":326},{"type":41,"tag":288,"props":1065,"children":1066},{"style":318},[1067],{"type":47,"value":1068},"light-mode",{"type":41,"tag":288,"props":1070,"children":1071},{"style":307},[1072],{"type":47,"value":326},{"type":41,"tag":288,"props":1074,"children":1075},{"style":307},[1076],{"type":47,"value":411},{"type":41,"tag":288,"props":1078,"children":1079},{"style":307},[1080],{"type":47,"value":995},{"type":41,"tag":288,"props":1082,"children":1083},{"style":301},[1084],{"type":47,"value":861},{"type":41,"tag":288,"props":1086,"children":1087},{"style":307},[1088],{"type":47,"value":391},{"type":41,"tag":288,"props":1090,"children":1091},{"style":301},[1092],{"type":47,"value":367},{"type":41,"tag":288,"props":1094,"children":1095},{"style":307},[1096],{"type":47,"value":391},{"type":41,"tag":288,"props":1098,"children":1099},{"style":301},[1100],{"type":47,"value":1101},"darkMode)",{"type":41,"tag":288,"props":1103,"children":1104},{"style":307},[1105],{"type":47,"value":331},{"type":41,"tag":288,"props":1107,"children":1108},{"class":290,"line":380},[1109,1114,1118,1122,1126],{"type":41,"tag":288,"props":1110,"children":1111},{"style":353},[1112],{"type":47,"value":1113},"  saveData",{"type":41,"tag":288,"props":1115,"children":1116},{"style":301},[1117],{"type":47,"value":905},{"type":41,"tag":288,"props":1119,"children":1120},{"style":307},[1121],{"type":47,"value":391},{"type":41,"tag":288,"props":1123,"children":1124},{"style":301},[1125],{"type":47,"value":914},{"type":41,"tag":288,"props":1127,"children":1128},{"style":307},[1129],{"type":47,"value":331},{"type":41,"tag":288,"props":1131,"children":1132},{"class":290,"line":445},[1133,1138],{"type":41,"tag":288,"props":1134,"children":1135},{"style":488},[1136],{"type":47,"value":1137},"  break",{"type":41,"tag":288,"props":1139,"children":1140},{"style":307},[1141],{"type":47,"value":331},{"type":41,"tag":288,"props":1143,"children":1144},{"class":290,"line":454},[1145],{"type":41,"tag":288,"props":1146,"children":1147},{"emptyLinePlaceholder":338},[1148],{"type":47,"value":341},{"type":41,"tag":288,"props":1150,"children":1151},{"class":290,"line":462},[1152,1156,1160,1165,1169],{"type":41,"tag":288,"props":1153,"children":1154},{"style":488},[1155],{"type":47,"value":944},{"type":41,"tag":288,"props":1157,"children":1158},{"style":307},[1159],{"type":47,"value":315},{"type":41,"tag":288,"props":1161,"children":1162},{"style":318},[1163],{"type":47,"value":1164},"reset-data",{"type":41,"tag":288,"props":1166,"children":1167},{"style":307},[1168],{"type":47,"value":326},{"type":41,"tag":288,"props":1170,"children":1171},{"style":301},[1172],{"type":47,"value":962},{"type":41,"tag":288,"props":1174,"children":1175},{"class":290,"line":484},[1176,1181,1185],{"type":41,"tag":288,"props":1177,"children":1178},{"style":353},[1179],{"type":47,"value":1180},"  clearData",{"type":41,"tag":288,"props":1182,"children":1183},{"style":301},[1184],{"type":47,"value":477},{"type":41,"tag":288,"props":1186,"children":1187},{"style":307},[1188],{"type":47,"value":331},{"type":41,"tag":288,"props":1190,"children":1191},{"class":290,"line":498},[1192,1196,1200,1205,1209],{"type":41,"tag":288,"props":1193,"children":1194},{"style":301},[1195],{"type":47,"value":811},{"type":41,"tag":288,"props":1197,"children":1198},{"style":307},[1199],{"type":47,"value":391},{"type":41,"tag":288,"props":1201,"children":1202},{"style":301},[1203],{"type":47,"value":1204},"data ",{"type":41,"tag":288,"props":1206,"children":1207},{"style":307},[1208],{"type":47,"value":310},{"type":41,"tag":288,"props":1210,"children":1211},{"style":307},[1212],{"type":47,"value":1213}," {};\n",{"type":41,"tag":288,"props":1215,"children":1216},{"class":290,"line":547},[1217,1222,1226,1230,1235,1239,1243],{"type":41,"tag":288,"props":1218,"children":1219},{"style":353},[1220],{"type":47,"value":1221},"  showToast",{"type":41,"tag":288,"props":1223,"children":1224},{"style":301},[1225],{"type":47,"value":361},{"type":41,"tag":288,"props":1227,"children":1228},{"style":307},[1229],{"type":47,"value":326},{"type":41,"tag":288,"props":1231,"children":1232},{"style":318},[1233],{"type":47,"value":1234},"Data cleared",{"type":41,"tag":288,"props":1236,"children":1237},{"style":307},[1238],{"type":47,"value":326},{"type":41,"tag":288,"props":1240,"children":1241},{"style":301},[1242],{"type":47,"value":372},{"type":41,"tag":288,"props":1244,"children":1245},{"style":307},[1246],{"type":47,"value":331},{"type":41,"tag":288,"props":1248,"children":1249},{"class":290,"line":602},[1250,1254],{"type":41,"tag":288,"props":1251,"children":1252},{"style":488},[1253],{"type":47,"value":1137},{"type":41,"tag":288,"props":1255,"children":1256},{"style":307},[1257],{"type":47,"value":331},{"type":41,"tag":84,"props":1259,"children":1261},{"id":1260},"patterns",[1262],{"type":47,"value":1263},"Patterns",{"type":41,"tag":198,"props":1265,"children":1267},{"id":1266},"save-user-preferences",[1268],{"type":47,"value":1269},"Save User Preferences",{"type":41,"tag":277,"props":1271,"children":1273},{"className":279,"code":1272,"language":281,"meta":282,"style":282},"function savePreference(key, value) {\n  var prefs = loadData() || {};\n  prefs[key] = value;\n  saveData(prefs);\n}\n\nfunction getPreference(key, defaultValue) {\n  var prefs = loadData() || {};\n  return prefs[key] !== undefined ? prefs[key] : defaultValue;\n}\n",[1274],{"type":41,"tag":67,"props":1275,"children":1276},{"__ignoreMap":282},[1277,1315,1350,1384,1408,1415,1422,1459,1490,1556],{"type":41,"tag":288,"props":1278,"children":1279},{"class":290,"line":291},[1280,1284,1289,1293,1298,1302,1307,1311],{"type":41,"tag":288,"props":1281,"children":1282},{"style":295},[1283],{"type":47,"value":350},{"type":41,"tag":288,"props":1285,"children":1286},{"style":353},[1287],{"type":47,"value":1288}," savePreference",{"type":41,"tag":288,"props":1290,"children":1291},{"style":307},[1292],{"type":47,"value":361},{"type":41,"tag":288,"props":1294,"children":1295},{"style":364},[1296],{"type":47,"value":1297},"key",{"type":41,"tag":288,"props":1299,"children":1300},{"style":307},[1301],{"type":47,"value":411},{"type":41,"tag":288,"props":1303,"children":1304},{"style":364},[1305],{"type":47,"value":1306}," value",{"type":41,"tag":288,"props":1308,"children":1309},{"style":307},[1310],{"type":47,"value":372},{"type":41,"tag":288,"props":1312,"children":1313},{"style":307},[1314],{"type":47,"value":377},{"type":41,"tag":288,"props":1316,"children":1317},{"class":290,"line":334},[1318,1323,1328,1332,1336,1341,1346],{"type":41,"tag":288,"props":1319,"children":1320},{"style":295},[1321],{"type":47,"value":1322},"  var",{"type":41,"tag":288,"props":1324,"children":1325},{"style":301},[1326],{"type":47,"value":1327}," prefs",{"type":41,"tag":288,"props":1329,"children":1330},{"style":307},[1331],{"type":47,"value":514},{"type":41,"tag":288,"props":1333,"children":1334},{"style":353},[1335],{"type":47,"value":472},{"type":41,"tag":288,"props":1337,"children":1338},{"style":399},[1339],{"type":47,"value":1340},"() ",{"type":41,"tag":288,"props":1342,"children":1343},{"style":307},[1344],{"type":47,"value":1345},"||",{"type":41,"tag":288,"props":1347,"children":1348},{"style":307},[1349],{"type":47,"value":1213},{"type":41,"tag":288,"props":1351,"children":1352},{"class":290,"line":344},[1353,1358,1363,1367,1372,1376,1380],{"type":41,"tag":288,"props":1354,"children":1355},{"style":301},[1356],{"type":47,"value":1357},"  prefs",{"type":41,"tag":288,"props":1359,"children":1360},{"style":399},[1361],{"type":47,"value":1362},"[",{"type":41,"tag":288,"props":1364,"children":1365},{"style":301},[1366],{"type":47,"value":1297},{"type":41,"tag":288,"props":1368,"children":1369},{"style":399},[1370],{"type":47,"value":1371},"] ",{"type":41,"tag":288,"props":1373,"children":1374},{"style":307},[1375],{"type":47,"value":310},{"type":41,"tag":288,"props":1377,"children":1378},{"style":301},[1379],{"type":47,"value":1306},{"type":41,"tag":288,"props":1381,"children":1382},{"style":307},[1383],{"type":47,"value":331},{"type":41,"tag":288,"props":1385,"children":1386},{"class":290,"line":380},[1387,1391,1395,1400,1404],{"type":41,"tag":288,"props":1388,"children":1389},{"style":353},[1390],{"type":47,"value":1113},{"type":41,"tag":288,"props":1392,"children":1393},{"style":399},[1394],{"type":47,"value":361},{"type":41,"tag":288,"props":1396,"children":1397},{"style":301},[1398],{"type":47,"value":1399},"prefs",{"type":41,"tag":288,"props":1401,"children":1402},{"style":399},[1403],{"type":47,"value":372},{"type":41,"tag":288,"props":1405,"children":1406},{"style":307},[1407],{"type":47,"value":331},{"type":41,"tag":288,"props":1409,"children":1410},{"class":290,"line":445},[1411],{"type":41,"tag":288,"props":1412,"children":1413},{"style":307},[1414],{"type":47,"value":451},{"type":41,"tag":288,"props":1416,"children":1417},{"class":290,"line":454},[1418],{"type":41,"tag":288,"props":1419,"children":1420},{"emptyLinePlaceholder":338},[1421],{"type":47,"value":341},{"type":41,"tag":288,"props":1423,"children":1424},{"class":290,"line":462},[1425,1429,1434,1438,1442,1446,1451,1455],{"type":41,"tag":288,"props":1426,"children":1427},{"style":295},[1428],{"type":47,"value":350},{"type":41,"tag":288,"props":1430,"children":1431},{"style":353},[1432],{"type":47,"value":1433}," getPreference",{"type":41,"tag":288,"props":1435,"children":1436},{"style":307},[1437],{"type":47,"value":361},{"type":41,"tag":288,"props":1439,"children":1440},{"style":364},[1441],{"type":47,"value":1297},{"type":41,"tag":288,"props":1443,"children":1444},{"style":307},[1445],{"type":47,"value":411},{"type":41,"tag":288,"props":1447,"children":1448},{"style":364},[1449],{"type":47,"value":1450}," defaultValue",{"type":41,"tag":288,"props":1452,"children":1453},{"style":307},[1454],{"type":47,"value":372},{"type":41,"tag":288,"props":1456,"children":1457},{"style":307},[1458],{"type":47,"value":377},{"type":41,"tag":288,"props":1460,"children":1461},{"class":290,"line":484},[1462,1466,1470,1474,1478,1482,1486],{"type":41,"tag":288,"props":1463,"children":1464},{"style":295},[1465],{"type":47,"value":1322},{"type":41,"tag":288,"props":1467,"children":1468},{"style":301},[1469],{"type":47,"value":1327},{"type":41,"tag":288,"props":1471,"children":1472},{"style":307},[1473],{"type":47,"value":514},{"type":41,"tag":288,"props":1475,"children":1476},{"style":353},[1477],{"type":47,"value":472},{"type":41,"tag":288,"props":1479,"children":1480},{"style":399},[1481],{"type":47,"value":1340},{"type":41,"tag":288,"props":1483,"children":1484},{"style":307},[1485],{"type":47,"value":1345},{"type":41,"tag":288,"props":1487,"children":1488},{"style":307},[1489],{"type":47,"value":1213},{"type":41,"tag":288,"props":1491,"children":1492},{"class":290,"line":498},[1493,1498,1502,1506,1510,1514,1519,1524,1528,1532,1536,1540,1544,1548,1552],{"type":41,"tag":288,"props":1494,"children":1495},{"style":488},[1496],{"type":47,"value":1497},"  return",{"type":41,"tag":288,"props":1499,"children":1500},{"style":301},[1501],{"type":47,"value":1327},{"type":41,"tag":288,"props":1503,"children":1504},{"style":399},[1505],{"type":47,"value":1362},{"type":41,"tag":288,"props":1507,"children":1508},{"style":301},[1509],{"type":47,"value":1297},{"type":41,"tag":288,"props":1511,"children":1512},{"style":399},[1513],{"type":47,"value":1371},{"type":41,"tag":288,"props":1515,"children":1516},{"style":307},[1517],{"type":47,"value":1518},"!==",{"type":41,"tag":288,"props":1520,"children":1521},{"style":307},[1522],{"type":47,"value":1523}," undefined",{"type":41,"tag":288,"props":1525,"children":1526},{"style":307},[1527],{"type":47,"value":562},{"type":41,"tag":288,"props":1529,"children":1530},{"style":301},[1531],{"type":47,"value":1327},{"type":41,"tag":288,"props":1533,"children":1534},{"style":399},[1535],{"type":47,"value":1362},{"type":41,"tag":288,"props":1537,"children":1538},{"style":301},[1539],{"type":47,"value":1297},{"type":41,"tag":288,"props":1541,"children":1542},{"style":399},[1543],{"type":47,"value":1371},{"type":41,"tag":288,"props":1545,"children":1546},{"style":307},[1547],{"type":47,"value":594},{"type":41,"tag":288,"props":1549,"children":1550},{"style":301},[1551],{"type":47,"value":1450},{"type":41,"tag":288,"props":1553,"children":1554},{"style":307},[1555],{"type":47,"value":331},{"type":41,"tag":288,"props":1557,"children":1558},{"class":290,"line":547},[1559],{"type":41,"tag":288,"props":1560,"children":1561},{"style":307},[1562],{"type":47,"value":451},{"type":41,"tag":198,"props":1564,"children":1566},{"id":1565},"cache-api-responses",[1567],{"type":47,"value":1568},"Cache API Responses",{"type":41,"tag":277,"props":1570,"children":1572},{"className":279,"code":1571,"language":281,"meta":282,"style":282},"function cacheResponse(url, data, ttlMs) {\n  var entry = { data: data, timestamp: Date.now(), ttl: ttlMs };\n  localStorage.setItem('cache_' + url, JSON.stringify(entry));\n}\n\nfunction getCachedResponse(url) {\n  try {\n    var entry = JSON.parse(localStorage.getItem('cache_' + url));\n    if (entry && Date.now() - entry.timestamp \u003C entry.ttl) {\n      return entry.data;\n    }\n  } catch (e) {}\n  return null;\n}\n",[1573],{"type":41,"tag":67,"props":1574,"children":1575},{"__ignoreMap":282},[1576,1623,1709,1784,1791,1798,1826,1837,1912,1993,2017,2025,2053,2064],{"type":41,"tag":288,"props":1577,"children":1578},{"class":290,"line":291},[1579,1583,1588,1592,1597,1601,1606,1610,1615,1619],{"type":41,"tag":288,"props":1580,"children":1581},{"style":295},[1582],{"type":47,"value":350},{"type":41,"tag":288,"props":1584,"children":1585},{"style":353},[1586],{"type":47,"value":1587}," cacheResponse",{"type":41,"tag":288,"props":1589,"children":1590},{"style":307},[1591],{"type":47,"value":361},{"type":41,"tag":288,"props":1593,"children":1594},{"style":364},[1595],{"type":47,"value":1596},"url",{"type":41,"tag":288,"props":1598,"children":1599},{"style":307},[1600],{"type":47,"value":411},{"type":41,"tag":288,"props":1602,"children":1603},{"style":364},[1604],{"type":47,"value":1605}," data",{"type":41,"tag":288,"props":1607,"children":1608},{"style":307},[1609],{"type":47,"value":411},{"type":41,"tag":288,"props":1611,"children":1612},{"style":364},[1613],{"type":47,"value":1614}," ttlMs",{"type":41,"tag":288,"props":1616,"children":1617},{"style":307},[1618],{"type":47,"value":372},{"type":41,"tag":288,"props":1620,"children":1621},{"style":307},[1622],{"type":47,"value":377},{"type":41,"tag":288,"props":1624,"children":1625},{"class":290,"line":334},[1626,1630,1635,1639,1644,1648,1652,1656,1660,1665,1669,1674,1678,1683,1687,1691,1696,1700,1704],{"type":41,"tag":288,"props":1627,"children":1628},{"style":295},[1629],{"type":47,"value":1322},{"type":41,"tag":288,"props":1631,"children":1632},{"style":301},[1633],{"type":47,"value":1634}," entry",{"type":41,"tag":288,"props":1636,"children":1637},{"style":307},[1638],{"type":47,"value":514},{"type":41,"tag":288,"props":1640,"children":1641},{"style":307},[1642],{"type":47,"value":1643}," {",{"type":41,"tag":288,"props":1645,"children":1646},{"style":399},[1647],{"type":47,"value":1605},{"type":41,"tag":288,"props":1649,"children":1650},{"style":307},[1651],{"type":47,"value":594},{"type":41,"tag":288,"props":1653,"children":1654},{"style":301},[1655],{"type":47,"value":1605},{"type":41,"tag":288,"props":1657,"children":1658},{"style":307},[1659],{"type":47,"value":411},{"type":41,"tag":288,"props":1661,"children":1662},{"style":399},[1663],{"type":47,"value":1664}," timestamp",{"type":41,"tag":288,"props":1666,"children":1667},{"style":307},[1668],{"type":47,"value":594},{"type":41,"tag":288,"props":1670,"children":1671},{"style":301},[1672],{"type":47,"value":1673}," Date",{"type":41,"tag":288,"props":1675,"children":1676},{"style":307},[1677],{"type":47,"value":391},{"type":41,"tag":288,"props":1679,"children":1680},{"style":353},[1681],{"type":47,"value":1682},"now",{"type":41,"tag":288,"props":1684,"children":1685},{"style":399},[1686],{"type":47,"value":477},{"type":41,"tag":288,"props":1688,"children":1689},{"style":307},[1690],{"type":47,"value":411},{"type":41,"tag":288,"props":1692,"children":1693},{"style":399},[1694],{"type":47,"value":1695}," ttl",{"type":41,"tag":288,"props":1697,"children":1698},{"style":307},[1699],{"type":47,"value":594},{"type":41,"tag":288,"props":1701,"children":1702},{"style":301},[1703],{"type":47,"value":1614},{"type":41,"tag":288,"props":1705,"children":1706},{"style":307},[1707],{"type":47,"value":1708}," };\n",{"type":41,"tag":288,"props":1710,"children":1711},{"class":290,"line":344},[1712,1716,1720,1724,1728,1732,1737,1741,1746,1751,1755,1759,1763,1767,1771,1776,1780],{"type":41,"tag":288,"props":1713,"children":1714},{"style":301},[1715],{"type":47,"value":386},{"type":41,"tag":288,"props":1717,"children":1718},{"style":307},[1719],{"type":47,"value":391},{"type":41,"tag":288,"props":1721,"children":1722},{"style":353},[1723],{"type":47,"value":396},{"type":41,"tag":288,"props":1725,"children":1726},{"style":399},[1727],{"type":47,"value":361},{"type":41,"tag":288,"props":1729,"children":1730},{"style":307},[1731],{"type":47,"value":326},{"type":41,"tag":288,"props":1733,"children":1734},{"style":318},[1735],{"type":47,"value":1736},"cache_",{"type":41,"tag":288,"props":1738,"children":1739},{"style":307},[1740],{"type":47,"value":326},{"type":41,"tag":288,"props":1742,"children":1743},{"style":307},[1744],{"type":47,"value":1745}," +",{"type":41,"tag":288,"props":1747,"children":1748},{"style":301},[1749],{"type":47,"value":1750}," url",{"type":41,"tag":288,"props":1752,"children":1753},{"style":307},[1754],{"type":47,"value":411},{"type":41,"tag":288,"props":1756,"children":1757},{"style":301},[1758],{"type":47,"value":416},{"type":41,"tag":288,"props":1760,"children":1761},{"style":307},[1762],{"type":47,"value":391},{"type":41,"tag":288,"props":1764,"children":1765},{"style":353},[1766],{"type":47,"value":425},{"type":41,"tag":288,"props":1768,"children":1769},{"style":399},[1770],{"type":47,"value":361},{"type":41,"tag":288,"props":1772,"children":1773},{"style":301},[1774],{"type":47,"value":1775},"entry",{"type":41,"tag":288,"props":1777,"children":1778},{"style":399},[1779],{"type":47,"value":438},{"type":41,"tag":288,"props":1781,"children":1782},{"style":307},[1783],{"type":47,"value":331},{"type":41,"tag":288,"props":1785,"children":1786},{"class":290,"line":380},[1787],{"type":41,"tag":288,"props":1788,"children":1789},{"style":307},[1790],{"type":47,"value":451},{"type":41,"tag":288,"props":1792,"children":1793},{"class":290,"line":445},[1794],{"type":41,"tag":288,"props":1795,"children":1796},{"emptyLinePlaceholder":338},[1797],{"type":47,"value":341},{"type":41,"tag":288,"props":1799,"children":1800},{"class":290,"line":454},[1801,1805,1810,1814,1818,1822],{"type":41,"tag":288,"props":1802,"children":1803},{"style":295},[1804],{"type":47,"value":350},{"type":41,"tag":288,"props":1806,"children":1807},{"style":353},[1808],{"type":47,"value":1809}," getCachedResponse",{"type":41,"tag":288,"props":1811,"children":1812},{"style":307},[1813],{"type":47,"value":361},{"type":41,"tag":288,"props":1815,"children":1816},{"style":364},[1817],{"type":47,"value":1596},{"type":41,"tag":288,"props":1819,"children":1820},{"style":307},[1821],{"type":47,"value":372},{"type":41,"tag":288,"props":1823,"children":1824},{"style":307},[1825],{"type":47,"value":377},{"type":41,"tag":288,"props":1827,"children":1828},{"class":290,"line":462},[1829,1833],{"type":41,"tag":288,"props":1830,"children":1831},{"style":488},[1832],{"type":47,"value":491},{"type":41,"tag":288,"props":1834,"children":1835},{"style":307},[1836],{"type":47,"value":377},{"type":41,"tag":288,"props":1838,"children":1839},{"class":290,"line":484},[1840,1844,1848,1852,1856,1860,1864,1868,1872,1876,1880,1884,1888,1892,1896,1900,1904,1908],{"type":41,"tag":288,"props":1841,"children":1842},{"style":295},[1843],{"type":47,"value":504},{"type":41,"tag":288,"props":1845,"children":1846},{"style":301},[1847],{"type":47,"value":1634},{"type":41,"tag":288,"props":1849,"children":1850},{"style":307},[1851],{"type":47,"value":514},{"type":41,"tag":288,"props":1853,"children":1854},{"style":301},[1855],{"type":47,"value":416},{"type":41,"tag":288,"props":1857,"children":1858},{"style":307},[1859],{"type":47,"value":391},{"type":41,"tag":288,"props":1861,"children":1862},{"style":353},[1863],{"type":47,"value":575},{"type":41,"tag":288,"props":1865,"children":1866},{"style":399},[1867],{"type":47,"value":361},{"type":41,"tag":288,"props":1869,"children":1870},{"style":301},[1871],{"type":47,"value":72},{"type":41,"tag":288,"props":1873,"children":1874},{"style":307},[1875],{"type":47,"value":391},{"type":41,"tag":288,"props":1877,"children":1878},{"style":353},[1879],{"type":47,"value":528},{"type":41,"tag":288,"props":1881,"children":1882},{"style":399},[1883],{"type":47,"value":361},{"type":41,"tag":288,"props":1885,"children":1886},{"style":307},[1887],{"type":47,"value":326},{"type":41,"tag":288,"props":1889,"children":1890},{"style":318},[1891],{"type":47,"value":1736},{"type":41,"tag":288,"props":1893,"children":1894},{"style":307},[1895],{"type":47,"value":326},{"type":41,"tag":288,"props":1897,"children":1898},{"style":307},[1899],{"type":47,"value":1745},{"type":41,"tag":288,"props":1901,"children":1902},{"style":301},[1903],{"type":47,"value":1750},{"type":41,"tag":288,"props":1905,"children":1906},{"style":399},[1907],{"type":47,"value":438},{"type":41,"tag":288,"props":1909,"children":1910},{"style":307},[1911],{"type":47,"value":331},{"type":41,"tag":288,"props":1913,"children":1914},{"class":290,"line":498},[1915,1920,1924,1928,1933,1937,1941,1945,1949,1954,1958,1962,1967,1972,1976,1980,1985,1989],{"type":41,"tag":288,"props":1916,"children":1917},{"style":488},[1918],{"type":47,"value":1919},"    if",{"type":41,"tag":288,"props":1921,"children":1922},{"style":399},[1923],{"type":47,"value":618},{"type":41,"tag":288,"props":1925,"children":1926},{"style":301},[1927],{"type":47,"value":1775},{"type":41,"tag":288,"props":1929,"children":1930},{"style":307},[1931],{"type":47,"value":1932}," &&",{"type":41,"tag":288,"props":1934,"children":1935},{"style":301},[1936],{"type":47,"value":1673},{"type":41,"tag":288,"props":1938,"children":1939},{"style":307},[1940],{"type":47,"value":391},{"type":41,"tag":288,"props":1942,"children":1943},{"style":353},[1944],{"type":47,"value":1682},{"type":41,"tag":288,"props":1946,"children":1947},{"style":399},[1948],{"type":47,"value":1340},{"type":41,"tag":288,"props":1950,"children":1951},{"style":307},[1952],{"type":47,"value":1953},"-",{"type":41,"tag":288,"props":1955,"children":1956},{"style":301},[1957],{"type":47,"value":1634},{"type":41,"tag":288,"props":1959,"children":1960},{"style":307},[1961],{"type":47,"value":391},{"type":41,"tag":288,"props":1963,"children":1964},{"style":301},[1965],{"type":47,"value":1966},"timestamp",{"type":41,"tag":288,"props":1968,"children":1969},{"style":307},[1970],{"type":47,"value":1971}," \u003C",{"type":41,"tag":288,"props":1973,"children":1974},{"style":301},[1975],{"type":47,"value":1634},{"type":41,"tag":288,"props":1977,"children":1978},{"style":307},[1979],{"type":47,"value":391},{"type":41,"tag":288,"props":1981,"children":1982},{"style":301},[1983],{"type":47,"value":1984},"ttl",{"type":41,"tag":288,"props":1986,"children":1987},{"style":399},[1988],{"type":47,"value":589},{"type":41,"tag":288,"props":1990,"children":1991},{"style":307},[1992],{"type":47,"value":632},{"type":41,"tag":288,"props":1994,"children":1995},{"class":290,"line":547},[1996,2001,2005,2009,2013],{"type":41,"tag":288,"props":1997,"children":1998},{"style":488},[1999],{"type":47,"value":2000},"      return",{"type":41,"tag":288,"props":2002,"children":2003},{"style":301},[2004],{"type":47,"value":1634},{"type":41,"tag":288,"props":2006,"children":2007},{"style":307},[2008],{"type":47,"value":391},{"type":41,"tag":288,"props":2010,"children":2011},{"style":301},[2012],{"type":47,"value":367},{"type":41,"tag":288,"props":2014,"children":2015},{"style":307},[2016],{"type":47,"value":331},{"type":41,"tag":288,"props":2018,"children":2019},{"class":290,"line":602},[2020],{"type":41,"tag":288,"props":2021,"children":2022},{"style":307},[2023],{"type":47,"value":2024},"    }\n",{"type":41,"tag":288,"props":2026,"children":2027},{"class":290,"line":635},[2028,2032,2036,2040,2044,2048],{"type":41,"tag":288,"props":2029,"children":2030},{"style":307},[2031],{"type":47,"value":608},{"type":41,"tag":288,"props":2033,"children":2034},{"style":488},[2035],{"type":47,"value":613},{"type":41,"tag":288,"props":2037,"children":2038},{"style":399},[2039],{"type":47,"value":618},{"type":41,"tag":288,"props":2041,"children":2042},{"style":301},[2043],{"type":47,"value":623},{"type":41,"tag":288,"props":2045,"children":2046},{"style":399},[2047],{"type":47,"value":589},{"type":41,"tag":288,"props":2049,"children":2050},{"style":307},[2051],{"type":47,"value":2052},"{}\n",{"type":41,"tag":288,"props":2054,"children":2055},{"class":290,"line":647},[2056,2060],{"type":41,"tag":288,"props":2057,"children":2058},{"style":488},[2059],{"type":47,"value":1497},{"type":41,"tag":288,"props":2061,"children":2062},{"style":307},[2063],{"type":47,"value":599},{"type":41,"tag":288,"props":2065,"children":2066},{"class":290,"line":656},[2067],{"type":41,"tag":288,"props":2068,"children":2069},{"style":307},[2070],{"type":47,"value":451},{"type":41,"tag":198,"props":2072,"children":2074},{"id":2073},"session-only-state",[2075],{"type":47,"value":2076},"Session-Only State",{"type":41,"tag":50,"props":2078,"children":2079},{},[2080,2082,2087],{"type":47,"value":2081},"Use ",{"type":41,"tag":67,"props":2083,"children":2085},{"className":2084},[],[2086],{"type":47,"value":80},{"type":47,"value":2088}," for data that should not survive a restart:",{"type":41,"tag":277,"props":2090,"children":2092},{"className":279,"code":2091,"language":281,"meta":282,"style":282},"\u002F\u002F Save temporary navigation context\nsessionStorage.setItem('returnScreen', 'home');\n\n\u002F\u002F Restore on load\nvar returnTo = sessionStorage.getItem('returnScreen') || 'home';\n",[2093],{"type":41,"tag":67,"props":2094,"children":2095},{"__ignoreMap":282},[2096,2104,2161,2168,2176],{"type":41,"tag":288,"props":2097,"children":2098},{"class":290,"line":291},[2099],{"type":41,"tag":288,"props":2100,"children":2101},{"style":755},[2102],{"type":47,"value":2103},"\u002F\u002F Save temporary navigation context\n",{"type":41,"tag":288,"props":2105,"children":2106},{"class":290,"line":334},[2107,2111,2115,2119,2123,2127,2132,2136,2140,2144,2149,2153,2157],{"type":41,"tag":288,"props":2108,"children":2109},{"style":301},[2110],{"type":47,"value":80},{"type":41,"tag":288,"props":2112,"children":2113},{"style":307},[2114],{"type":47,"value":391},{"type":41,"tag":288,"props":2116,"children":2117},{"style":353},[2118],{"type":47,"value":396},{"type":41,"tag":288,"props":2120,"children":2121},{"style":301},[2122],{"type":47,"value":361},{"type":41,"tag":288,"props":2124,"children":2125},{"style":307},[2126],{"type":47,"value":326},{"type":41,"tag":288,"props":2128,"children":2129},{"style":318},[2130],{"type":47,"value":2131},"returnScreen",{"type":41,"tag":288,"props":2133,"children":2134},{"style":307},[2135],{"type":47,"value":326},{"type":41,"tag":288,"props":2137,"children":2138},{"style":307},[2139],{"type":47,"value":411},{"type":41,"tag":288,"props":2141,"children":2142},{"style":307},[2143],{"type":47,"value":315},{"type":41,"tag":288,"props":2145,"children":2146},{"style":318},[2147],{"type":47,"value":2148},"home",{"type":41,"tag":288,"props":2150,"children":2151},{"style":307},[2152],{"type":47,"value":326},{"type":41,"tag":288,"props":2154,"children":2155},{"style":301},[2156],{"type":47,"value":372},{"type":41,"tag":288,"props":2158,"children":2159},{"style":307},[2160],{"type":47,"value":331},{"type":41,"tag":288,"props":2162,"children":2163},{"class":290,"line":344},[2164],{"type":41,"tag":288,"props":2165,"children":2166},{"emptyLinePlaceholder":338},[2167],{"type":47,"value":341},{"type":41,"tag":288,"props":2169,"children":2170},{"class":290,"line":380},[2171],{"type":41,"tag":288,"props":2172,"children":2173},{"style":755},[2174],{"type":47,"value":2175},"\u002F\u002F Restore on load\n",{"type":41,"tag":288,"props":2177,"children":2178},{"class":290,"line":445},[2179,2183,2188,2192,2197,2201,2205,2209,2213,2217,2221,2225,2229,2233,2237,2241],{"type":41,"tag":288,"props":2180,"children":2181},{"style":295},[2182],{"type":47,"value":298},{"type":41,"tag":288,"props":2184,"children":2185},{"style":301},[2186],{"type":47,"value":2187}," returnTo ",{"type":41,"tag":288,"props":2189,"children":2190},{"style":307},[2191],{"type":47,"value":310},{"type":41,"tag":288,"props":2193,"children":2194},{"style":301},[2195],{"type":47,"value":2196}," sessionStorage",{"type":41,"tag":288,"props":2198,"children":2199},{"style":307},[2200],{"type":47,"value":391},{"type":41,"tag":288,"props":2202,"children":2203},{"style":353},[2204],{"type":47,"value":528},{"type":41,"tag":288,"props":2206,"children":2207},{"style":301},[2208],{"type":47,"value":361},{"type":41,"tag":288,"props":2210,"children":2211},{"style":307},[2212],{"type":47,"value":326},{"type":41,"tag":288,"props":2214,"children":2215},{"style":318},[2216],{"type":47,"value":2131},{"type":41,"tag":288,"props":2218,"children":2219},{"style":307},[2220],{"type":47,"value":326},{"type":41,"tag":288,"props":2222,"children":2223},{"style":301},[2224],{"type":47,"value":589},{"type":41,"tag":288,"props":2226,"children":2227},{"style":307},[2228],{"type":47,"value":1345},{"type":41,"tag":288,"props":2230,"children":2231},{"style":307},[2232],{"type":47,"value":315},{"type":41,"tag":288,"props":2234,"children":2235},{"style":318},[2236],{"type":47,"value":2148},{"type":41,"tag":288,"props":2238,"children":2239},{"style":307},[2240],{"type":47,"value":326},{"type":41,"tag":288,"props":2242,"children":2243},{"style":307},[2244],{"type":47,"value":331},{"type":41,"tag":84,"props":2246,"children":2248},{"id":2247},"verify",[2249],{"type":47,"value":2250},"Verify",{"type":41,"tag":91,"props":2252,"children":2255},{"className":2253},[2254],"contains-task-list",[2256,2268,2277,2286],{"type":41,"tag":95,"props":2257,"children":2260},{"className":2258},[2259],"task-list-item",[2261,2266],{"type":41,"tag":2262,"props":2263,"children":2265},"input",{"disabled":338,"type":2264},"checkbox",[],{"type":47,"value":2267}," Data persists after page refresh (localStorage)",{"type":41,"tag":95,"props":2269,"children":2271},{"className":2270},[2259],[2272,2275],{"type":41,"tag":2262,"props":2273,"children":2274},{"disabled":338,"type":2264},[],{"type":47,"value":2276}," Session data clears when session ends (sessionStorage)",{"type":41,"tag":95,"props":2278,"children":2280},{"className":2279},[2259],[2281,2284],{"type":41,"tag":2262,"props":2282,"children":2283},{"disabled":338,"type":2264},[],{"type":47,"value":2285}," App handles missing\u002Fcorrupt stored data gracefully",{"type":41,"tag":95,"props":2287,"children":2289},{"className":2288},[2259],[2290,2293],{"type":41,"tag":2262,"props":2291,"children":2292},{"disabled":338,"type":2264},[],{"type":47,"value":2294}," Reset\u002Fclear action works",{"type":41,"tag":84,"props":2296,"children":2298},{"id":2297},"related-skills",[2299],{"type":47,"value":2300},"Related Skills",{"type":41,"tag":91,"props":2302,"children":2303},{},[2304,2315],{"type":41,"tag":95,"props":2305,"children":2306},{},[2307,2313],{"type":41,"tag":67,"props":2308,"children":2310},{"className":2309},[],[2311],{"type":47,"value":2312},"\u002Fadd-ui",{"type":47,"value":2314}," — Add settings screens and toggle buttons",{"type":41,"tag":95,"props":2316,"children":2317},{},[2318,2324],{"type":41,"tag":67,"props":2319,"children":2321},{"className":2320},[],[2322],{"type":47,"value":2323},"\u002Fconnect-api",{"type":47,"value":2325}," — Fetch data to cache locally",{"type":41,"tag":2327,"props":2328,"children":2329},"style",{},[2330],{"type":47,"value":2331},"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":2333,"total":2523},[2334,2356,2370,2391,2412,2429,2440,2460,2473,2486,2501,2513],{"slug":2335,"name":2335,"fn":2336,"description":2337,"org":2338,"tags":2339,"stars":2353,"repoUrl":2354,"updatedAt":2355},"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},[2340,2343,2344,2347,2350],{"name":2341,"slug":2342,"type":16},"Engineering","engineering",{"name":21,"slug":22,"type":16},{"name":2345,"slug":2346,"type":16},"GraphQL","graphql",{"name":2348,"slug":2349,"type":16},"React","react",{"name":2351,"slug":2352,"type":16},"Relay","relay",18950,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Frelay","2026-04-22T04:58:15.370563",{"slug":2357,"name":2357,"fn":2358,"description":2359,"org":2360,"tags":2361,"stars":2353,"repoUrl":2354,"updatedAt":2369},"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},[2362,2363,2364,2367,2368],{"name":21,"slug":22,"type":16},{"name":2345,"slug":2346,"type":16},{"name":2365,"slug":2366,"type":16},"Performance","performance",{"name":2348,"slug":2349,"type":16},{"name":2351,"slug":2352,"type":16},"2026-06-10T07:30:28.726513",{"slug":2371,"name":2371,"fn":2372,"description":2373,"org":2374,"tags":2375,"stars":2388,"repoUrl":2389,"updatedAt":2390},"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},[2376,2379,2382,2385],{"name":2377,"slug":2378,"type":16},"Data Modeling","data-modeling",{"name":2380,"slug":2381,"type":16},"Deep Learning","deep-learning",{"name":2383,"slug":2384,"type":16},"Python","python",{"name":2386,"slug":2387,"type":16},"PyTorch","pytorch",6833,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fpyrefly","2026-07-18T05:12:08.515952",{"slug":2392,"name":2392,"fn":2393,"description":2394,"org":2395,"tags":2396,"stars":2409,"repoUrl":2410,"updatedAt":2411},"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},[2397,2400,2403,2406],{"name":2398,"slug":2399,"type":16},"Camera","camera",{"name":2401,"slug":2402,"type":16},"Hardware","hardware",{"name":2404,"slug":2405,"type":16},"iOS","ios",{"name":2407,"slug":2408,"type":16},"Video","video",488,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-dat-ios","2026-08-06T05:38:47.523424",{"slug":2413,"name":2413,"fn":2414,"description":2415,"org":2416,"tags":2417,"stars":2409,"repoUrl":2410,"updatedAt":2428},"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},[2418,2419,2422,2425],{"name":2404,"slug":2405,"type":16},{"name":2420,"slug":2421,"type":16},"Mobile","mobile",{"name":2423,"slug":2424,"type":16},"SDK","sdk",{"name":2426,"slug":2427,"type":16},"Swift","swift","2026-08-06T05:38:49.536777",{"slug":2430,"name":2430,"fn":2431,"description":2432,"org":2433,"tags":2434,"stars":2409,"repoUrl":2410,"updatedAt":2439},"debugging","debug wearable device software","Common issues, Developer Mode, version compatibility, state machine diagnosis",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2435,2437,2438],{"name":2436,"slug":2430,"type":16},"Debugging",{"name":2341,"slug":2342,"type":16},{"name":2404,"slug":2405,"type":16},"2026-08-06T05:38:50.51086",{"slug":2441,"name":2441,"fn":2442,"description":2443,"org":2444,"tags":2445,"stars":2409,"repoUrl":2410,"updatedAt":2459},"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},[2446,2449,2452,2455,2458],{"name":2447,"slug":2448,"type":16},"Design","design",{"name":2450,"slug":2451,"type":16},"Images","images",{"name":2453,"slug":2454,"type":16},"Interaction","interaction",{"name":2456,"slug":2457,"type":16},"UI Components","ui-components",{"name":2407,"slug":2408,"type":16},"2026-08-06T05:38:53.520488",{"slug":2461,"name":2461,"fn":2462,"description":2463,"org":2464,"tags":2465,"stars":2409,"repoUrl":2410,"updatedAt":2472},"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},[2466,2469,2470,2471],{"name":2467,"slug":2468,"type":16},"Configuration","configuration",{"name":2404,"slug":2405,"type":16},{"name":2423,"slug":2424,"type":16},{"name":2426,"slug":2427,"type":16},"2026-08-06T05:38:48.514522",{"slug":2474,"name":2474,"fn":2475,"description":2476,"org":2477,"tags":2478,"stars":2409,"repoUrl":2410,"updatedAt":2485},"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},[2479,2480,2481,2484],{"name":2436,"slug":2430,"type":16},{"name":2404,"slug":2405,"type":16},{"name":2482,"slug":2483,"type":16},"MCP","mcp",{"name":2420,"slug":2421,"type":16},"2026-08-06T06:09:15.013902",{"slug":2487,"name":2487,"fn":2488,"description":2489,"org":2490,"tags":2491,"stars":2409,"repoUrl":2410,"updatedAt":2500},"mockdevice-testing","test wearable apps with mock devices","MockDeviceKit for testing without physical glasses hardware",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2492,2493,2494,2497],{"name":2404,"slug":2405,"type":16},{"name":2420,"slug":2421,"type":16},{"name":2495,"slug":2496,"type":16},"QA","qa",{"name":2498,"slug":2499,"type":16},"Testing","testing","2026-05-15T06:14:37.406692",{"slug":2502,"name":2502,"fn":2503,"description":2504,"org":2505,"tags":2506,"stars":2409,"repoUrl":2410,"updatedAt":2512},"permissions-registration","register apps with Meta AI","App registration with Meta AI, camera permission flows",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2507,2508,2509],{"name":2398,"slug":2399,"type":16},{"name":2404,"slug":2405,"type":16},{"name":2510,"slug":2511,"type":16},"Permissions","permissions","2026-05-15T06:14:46.030253",{"slug":2514,"name":2514,"fn":2515,"description":2516,"org":2517,"tags":2518,"stars":2409,"repoUrl":2410,"updatedAt":2522},"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},[2519,2520,2521],{"name":2398,"slug":2399,"type":16},{"name":2404,"slug":2405,"type":16},{"name":2420,"slug":2421,"type":16},"2026-08-06T05:38:51.509255",34,{"items":2525,"total":635},[2526,2538,2548,2554,2566,2578,2590],{"slug":2527,"name":2527,"fn":2528,"description":2529,"org":2530,"tags":2531,"stars":23,"repoUrl":24,"updatedAt":2537},"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},[2532,2533,2534],{"name":21,"slug":22,"type":16},{"name":2401,"slug":2402,"type":16},{"name":2535,"slug":2536,"type":16},"IoT","iot","2026-09-01T08:30:33.453548",{"slug":2539,"name":2539,"fn":2540,"description":2541,"org":2542,"tags":2543,"stars":23,"repoUrl":24,"updatedAt":2547},"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},[2544,2545,2546],{"name":2447,"slug":2448,"type":16},{"name":21,"slug":22,"type":16},{"name":2453,"slug":2454,"type":16},"2026-09-01T08:30:53.889244",{"slug":4,"name":4,"fn":5,"description":6,"org":2549,"tags":2550,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2551,2552,2553],{"name":21,"slug":22,"type":16},{"name":18,"slug":19,"type":16},{"name":14,"slug":15,"type":16},{"slug":2555,"name":2555,"fn":2556,"description":2557,"org":2558,"tags":2559,"stars":23,"repoUrl":24,"updatedAt":2565},"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},[2560,2561,2564],{"name":21,"slug":22,"type":16},{"name":2562,"slug":2563,"type":16},"Offline","offline",{"name":2365,"slug":2366,"type":16},"2026-09-01T08:30:33.83287",{"slug":2567,"name":2567,"fn":2568,"description":2569,"org":2570,"tags":2571,"stars":23,"repoUrl":24,"updatedAt":2577},"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},[2572,2575,2576],{"name":2573,"slug":2574,"type":16},"Forms","forms",{"name":21,"slug":22,"type":16},{"name":2456,"slug":2457,"type":16},"2026-09-01T08:30:30.563354",{"slug":2579,"name":2579,"fn":2580,"description":2581,"org":2582,"tags":2583,"stars":23,"repoUrl":24,"updatedAt":2589},"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},[2584,2585,2587,2588],{"name":21,"slug":22,"type":16},{"name":2586,"slug":281,"type":16},"JavaScript",{"name":2348,"slug":2349,"type":16},{"name":2456,"slug":2457,"type":16},"2026-09-01T08:30:27.477785",{"slug":2591,"name":2591,"fn":2592,"description":2593,"org":2594,"tags":2595,"stars":23,"repoUrl":24,"updatedAt":2606},"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},[2596,2599,2600,2603],{"name":2597,"slug":2598,"type":16},"API Development","api-development",{"name":21,"slug":22,"type":16},{"name":2601,"slug":2602,"type":16},"REST API","rest-api",{"name":2604,"slug":2605,"type":16},"WebSockets","websockets","2026-09-01T08:30:30.968156"]