[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-vercel-enable-analytics":3,"mdc--9z4a93-key":37,"related-repo-vercel-enable-analytics":1527,"related-org-vercel-enable-analytics":1629},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":35,"mdContent":36},"enable-analytics","enable analytics and performance monitoring","Add Vercel Analytics, Vercel Speed Insights, and Google Tag Manager to the storefront.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"vercel","Vercel","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fvercel.png",[12,16,17,20,23],{"name":13,"slug":14,"type":15},"Performance","performance","tag",{"name":9,"slug":8,"type":15},{"name":18,"slug":19,"type":15},"Marketing","marketing",{"name":21,"slug":22,"type":15},"Monitoring","monitoring",{"name":24,"slug":25,"type":15},"Analytics","analytics",32,"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fshop","2026-07-30T05:31:20.646283",null,9,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":34},[],"vercel\u002Fshop","https:\u002F\u002Fgithub.com\u002Fvercel\u002Fshop\u002Ftree\u002FHEAD\u002Fpackages\u002Fplugin\u002Fskills\u002Fenable-analytics","---\nname: enable-analytics\ndescription: Add Vercel Analytics, Vercel Speed Insights, and Google Tag Manager to the storefront.\n---\n\n# Enable Analytics\n\nThe current storefront includes support for Vercel Web Analytics and Vercel Speed Insights, with each integration disabled by default in `lib\u002Fconfig.ts`. This skill enables or adds those integrations and can also add Google Tag Manager using the recommended integration.\n\n## Before you start\n\nAsk the user two questions in order:\n\n### 1. Do you need to add or change Vercel Analytics and\u002For Vercel Speed Insights?\n\n- **Enable both** — page views, custom events, and Core Web Vitals\n- **Analytics only** — page view and custom event tracking via `@vercel\u002Fanalytics`\n- **Speed Insights only** — Core Web Vitals monitoring via `@vercel\u002Fspeed-insights`\n- **Neither** — keep both integrations disabled\n\n### 2. Do you want Google Tag Manager?\n\nIf yes, ask for the GTM container ID (e.g. `GTM-XXXXXX`). This will be stored in the `NEXT_PUBLIC_GTM_ID` environment variable.\n\nWait for the user to answer both questions before proceeding.\n\n---\n\n## Part A: Vercel Analytics and Speed Insights\n\nIf the storefront has `analytics` configuration in `lib\u002Fconfig.ts`, enable only the selected integrations. If the user selected neither, keep both integration gates disabled and skip the remaining steps in this section.\n\n```ts\nanalytics: {\n  speedInsights: { enabled: false },\n  vercel: { enabled: false },\n},\n```\n\n### A1. Install dependencies\n\nFor older storefronts without the integrations, install only the packages the user selected:\n\n```bash\n# Both\npnpm add @vercel\u002Fanalytics @vercel\u002Fspeed-insights\n\n# Analytics only\npnpm add @vercel\u002Fanalytics\n\n# Speed Insights only\npnpm add @vercel\u002Fspeed-insights\n```\n\nFor older storefronts, create or update the root analytics component described below. Each library handles its own client-side behavior internally.\n\n---\n\n## Part B: Google Tag Manager\n\nSkip this section if the user did not want GTM.\n\n### B1. Install dependency\n\n```bash\npnpm add @next\u002Fthird-parties\n```\n\n### B2. Add environment variable\n\nAdd to `.env.example`:\n\n```\n# Google Tag Manager (optional)\nNEXT_PUBLIC_GTM_ID=\"GTM-XXXXXX\"\n```\n\nSet the actual value in `.env.local` or in the Vercel dashboard under Environment Variables.\n\n### B3. Add GTM to `components\u002Fanalytics.tsx`\n\nImport `GoogleTagManager` from `@next\u002Fthird-parties\u002Fgoogle`. Read `NEXT_PUBLIC_GTM_ID` in the analytics component and render `\u003CGoogleTagManager gtmId={gtmId} \u002F>` only when the value exists. If the storefront extends `lib\u002Fconfig.ts` with a GTM integration gate, apply that gate inside the same component.\n\n---\n\n## Part C: Root analytics integration\n\n### C1. Create or update `components\u002Fanalytics.tsx`\n\nCompose the selected providers in the root analytics component and apply each integration gate there:\n\n```tsx\nimport { GoogleTagManager } from \"@next\u002Fthird-parties\u002Fgoogle\";\nimport { Analytics } from \"@vercel\u002Fanalytics\u002Fnext\";\nimport { SpeedInsights } from \"@vercel\u002Fspeed-insights\u002Fnext\";\n\nimport { shopConfig } from \"@\u002Flib\u002Fconfig\";\n\nexport function AnalyticsComponents() {\n  const gtmId = process.env.NEXT_PUBLIC_GTM_ID;\n\n  return (\n    \u003C>\n      {shopConfig.analytics.vercel.enabled ? \u003CAnalytics \u002F> : null}\n      {shopConfig.analytics.speedInsights.enabled ? \u003CSpeedInsights \u002F> : null}\n      {gtmId ? \u003CGoogleTagManager gtmId={gtmId} \u002F> : null}\n    \u003C\u002F>\n  );\n}\n```\n\nRemove imports for integrations the storefront does not support.\n\n### C2. Update `app\u002Flayout.tsx`\n\nAlways render the root analytics component inside `\u003Cbody>` after the `\u003C\u002FNextIntlClientProvider>` closing tag:\n\n```tsx\nimport { AnalyticsComponents } from \"@\u002Fcomponents\u002Fanalytics\";\n```\n\n```tsx\n\u003Cbody ...>\n  \u003Ca href=\"#main-content\" ...>...\u003C\u002Fa>\n  \u003CSiteSchema locale={locale} \u002F>\n  \u003CNextIntlClientProvider locale={locale} messages={messages}>\n    {\u002F* ... existing layout content ... *\u002F}\n  \u003C\u002FNextIntlClientProvider>\n  \u003CAnalyticsComponents \u002F>\n\u003C\u002Fbody>\n```\n\nThe root component remains mounted as the extension point for current and future analytics providers. Provider gates stay inside it so disabled integrations are not mounted.\n\n## Guardrails\n\n- Keep root analytics providers and their gates in `components\u002Fanalytics.tsx`.\n- Always mount `\u003CAnalyticsComponents \u002F>` from the root layout, even when every provider is disabled.\n- The GTM container ID must come from `NEXT_PUBLIC_GTM_ID`, never hardcoded. The provider renders nothing if the env var is missing.\n- Use `@next\u002Fthird-parties\u002Fgoogle` for GTM, not a manual `\u003Cscript>` tag. The Next.js component handles script loading and performance optimization.\n- Import paths: use `@vercel\u002Fanalytics\u002Fnext` and `@vercel\u002Fspeed-insights\u002Fnext` (the `\u002Fnext` subpath), not the root package exports.\n- Add `NEXT_PUBLIC_GTM_ID` to `.env.example` with a placeholder value so other developers know the variable exists.\n",{"data":38,"body":39},{"name":4,"description":6},{"type":40,"children":41},"root",[42,50,65,72,77,84,142,148,169,174,178,184,203,316,322,327,436,441,444,450,455,461,484,490,502,512,525,537,580,583,589,600,605,1117,1122,1134,1155,1202,1405,1410,1416,1521],{"type":43,"tag":44,"props":45,"children":46},"element","h1",{"id":4},[47],{"type":48,"value":49},"text","Enable Analytics",{"type":43,"tag":51,"props":52,"children":53},"p",{},[54,56,63],{"type":48,"value":55},"The current storefront includes support for Vercel Web Analytics and Vercel Speed Insights, with each integration disabled by default in ",{"type":43,"tag":57,"props":58,"children":60},"code",{"className":59},[],[61],{"type":48,"value":62},"lib\u002Fconfig.ts",{"type":48,"value":64},". This skill enables or adds those integrations and can also add Google Tag Manager using the recommended integration.",{"type":43,"tag":66,"props":67,"children":69},"h2",{"id":68},"before-you-start",[70],{"type":48,"value":71},"Before you start",{"type":43,"tag":51,"props":73,"children":74},{},[75],{"type":48,"value":76},"Ask the user two questions in order:",{"type":43,"tag":78,"props":79,"children":81},"h3",{"id":80},"_1-do-you-need-to-add-or-change-vercel-analytics-andor-vercel-speed-insights",[82],{"type":48,"value":83},"1. Do you need to add or change Vercel Analytics and\u002For Vercel Speed Insights?",{"type":43,"tag":85,"props":86,"children":87},"ul",{},[88,100,116,132],{"type":43,"tag":89,"props":90,"children":91},"li",{},[92,98],{"type":43,"tag":93,"props":94,"children":95},"strong",{},[96],{"type":48,"value":97},"Enable both",{"type":48,"value":99}," — page views, custom events, and Core Web Vitals",{"type":43,"tag":89,"props":101,"children":102},{},[103,108,110],{"type":43,"tag":93,"props":104,"children":105},{},[106],{"type":48,"value":107},"Analytics only",{"type":48,"value":109}," — page view and custom event tracking via ",{"type":43,"tag":57,"props":111,"children":113},{"className":112},[],[114],{"type":48,"value":115},"@vercel\u002Fanalytics",{"type":43,"tag":89,"props":117,"children":118},{},[119,124,126],{"type":43,"tag":93,"props":120,"children":121},{},[122],{"type":48,"value":123},"Speed Insights only",{"type":48,"value":125}," — Core Web Vitals monitoring via ",{"type":43,"tag":57,"props":127,"children":129},{"className":128},[],[130],{"type":48,"value":131},"@vercel\u002Fspeed-insights",{"type":43,"tag":89,"props":133,"children":134},{},[135,140],{"type":43,"tag":93,"props":136,"children":137},{},[138],{"type":48,"value":139},"Neither",{"type":48,"value":141}," — keep both integrations disabled",{"type":43,"tag":78,"props":143,"children":145},{"id":144},"_2-do-you-want-google-tag-manager",[146],{"type":48,"value":147},"2. Do you want Google Tag Manager?",{"type":43,"tag":51,"props":149,"children":150},{},[151,153,159,161,167],{"type":48,"value":152},"If yes, ask for the GTM container ID (e.g. ",{"type":43,"tag":57,"props":154,"children":156},{"className":155},[],[157],{"type":48,"value":158},"GTM-XXXXXX",{"type":48,"value":160},"). This will be stored in the ",{"type":43,"tag":57,"props":162,"children":164},{"className":163},[],[165],{"type":48,"value":166},"NEXT_PUBLIC_GTM_ID",{"type":48,"value":168}," environment variable.",{"type":43,"tag":51,"props":170,"children":171},{},[172],{"type":48,"value":173},"Wait for the user to answer both questions before proceeding.",{"type":43,"tag":175,"props":176,"children":177},"hr",{},[],{"type":43,"tag":66,"props":179,"children":181},{"id":180},"part-a-vercel-analytics-and-speed-insights",[182],{"type":48,"value":183},"Part A: Vercel Analytics and Speed Insights",{"type":43,"tag":51,"props":185,"children":186},{},[187,189,194,196,201],{"type":48,"value":188},"If the storefront has ",{"type":43,"tag":57,"props":190,"children":192},{"className":191},[],[193],{"type":48,"value":25},{"type":48,"value":195}," configuration in ",{"type":43,"tag":57,"props":197,"children":199},{"className":198},[],[200],{"type":48,"value":62},{"type":48,"value":202},", enable only the selected integrations. If the user selected neither, keep both integration gates disabled and skip the remaining steps in this section.",{"type":43,"tag":204,"props":205,"children":210},"pre",{"className":206,"code":207,"language":208,"meta":209,"style":209},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","analytics: {\n  speedInsights: { enabled: false },\n  vercel: { enabled: false },\n},\n","ts","",[211],{"type":43,"tag":57,"props":212,"children":213},{"__ignoreMap":209},[214,236,274,307],{"type":43,"tag":215,"props":216,"children":219},"span",{"class":217,"line":218},"line",1,[220,225,231],{"type":43,"tag":215,"props":221,"children":223},{"style":222},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[224],{"type":48,"value":25},{"type":43,"tag":215,"props":226,"children":228},{"style":227},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[229],{"type":48,"value":230},":",{"type":43,"tag":215,"props":232,"children":233},{"style":227},[234],{"type":48,"value":235}," {\n",{"type":43,"tag":215,"props":237,"children":239},{"class":217,"line":238},2,[240,245,249,254,259,263,269],{"type":43,"tag":215,"props":241,"children":242},{"style":222},[243],{"type":48,"value":244},"  speedInsights",{"type":43,"tag":215,"props":246,"children":247},{"style":227},[248],{"type":48,"value":230},{"type":43,"tag":215,"props":250,"children":251},{"style":227},[252],{"type":48,"value":253}," {",{"type":43,"tag":215,"props":255,"children":256},{"style":222},[257],{"type":48,"value":258}," enabled",{"type":43,"tag":215,"props":260,"children":261},{"style":227},[262],{"type":48,"value":230},{"type":43,"tag":215,"props":264,"children":266},{"style":265},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[267],{"type":48,"value":268}," false",{"type":43,"tag":215,"props":270,"children":271},{"style":227},[272],{"type":48,"value":273}," },\n",{"type":43,"tag":215,"props":275,"children":277},{"class":217,"line":276},3,[278,283,287,291,295,299,303],{"type":43,"tag":215,"props":279,"children":280},{"style":222},[281],{"type":48,"value":282},"  vercel",{"type":43,"tag":215,"props":284,"children":285},{"style":227},[286],{"type":48,"value":230},{"type":43,"tag":215,"props":288,"children":289},{"style":227},[290],{"type":48,"value":253},{"type":43,"tag":215,"props":292,"children":293},{"style":222},[294],{"type":48,"value":258},{"type":43,"tag":215,"props":296,"children":297},{"style":227},[298],{"type":48,"value":230},{"type":43,"tag":215,"props":300,"children":301},{"style":265},[302],{"type":48,"value":268},{"type":43,"tag":215,"props":304,"children":305},{"style":227},[306],{"type":48,"value":273},{"type":43,"tag":215,"props":308,"children":310},{"class":217,"line":309},4,[311],{"type":43,"tag":215,"props":312,"children":313},{"style":227},[314],{"type":48,"value":315},"},\n",{"type":43,"tag":78,"props":317,"children":319},{"id":318},"a1-install-dependencies",[320],{"type":48,"value":321},"A1. Install dependencies",{"type":43,"tag":51,"props":323,"children":324},{},[325],{"type":48,"value":326},"For older storefronts without the integrations, install only the packages the user selected:",{"type":43,"tag":204,"props":328,"children":332},{"className":329,"code":330,"language":331,"meta":209,"style":209},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Both\npnpm add @vercel\u002Fanalytics @vercel\u002Fspeed-insights\n\n# Analytics only\npnpm add @vercel\u002Fanalytics\n\n# Speed Insights only\npnpm add @vercel\u002Fspeed-insights\n","bash",[333],{"type":43,"tag":57,"props":334,"children":335},{"__ignoreMap":209},[336,345,369,378,386,403,411,420],{"type":43,"tag":215,"props":337,"children":338},{"class":217,"line":218},[339],{"type":43,"tag":215,"props":340,"children":342},{"style":341},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[343],{"type":48,"value":344},"# Both\n",{"type":43,"tag":215,"props":346,"children":347},{"class":217,"line":238},[348,353,359,364],{"type":43,"tag":215,"props":349,"children":350},{"style":222},[351],{"type":48,"value":352},"pnpm",{"type":43,"tag":215,"props":354,"children":356},{"style":355},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[357],{"type":48,"value":358}," add",{"type":43,"tag":215,"props":360,"children":361},{"style":355},[362],{"type":48,"value":363}," @vercel\u002Fanalytics",{"type":43,"tag":215,"props":365,"children":366},{"style":355},[367],{"type":48,"value":368}," @vercel\u002Fspeed-insights\n",{"type":43,"tag":215,"props":370,"children":371},{"class":217,"line":276},[372],{"type":43,"tag":215,"props":373,"children":375},{"emptyLinePlaceholder":374},true,[376],{"type":48,"value":377},"\n",{"type":43,"tag":215,"props":379,"children":380},{"class":217,"line":309},[381],{"type":43,"tag":215,"props":382,"children":383},{"style":341},[384],{"type":48,"value":385},"# Analytics only\n",{"type":43,"tag":215,"props":387,"children":389},{"class":217,"line":388},5,[390,394,398],{"type":43,"tag":215,"props":391,"children":392},{"style":222},[393],{"type":48,"value":352},{"type":43,"tag":215,"props":395,"children":396},{"style":355},[397],{"type":48,"value":358},{"type":43,"tag":215,"props":399,"children":400},{"style":355},[401],{"type":48,"value":402}," @vercel\u002Fanalytics\n",{"type":43,"tag":215,"props":404,"children":406},{"class":217,"line":405},6,[407],{"type":43,"tag":215,"props":408,"children":409},{"emptyLinePlaceholder":374},[410],{"type":48,"value":377},{"type":43,"tag":215,"props":412,"children":414},{"class":217,"line":413},7,[415],{"type":43,"tag":215,"props":416,"children":417},{"style":341},[418],{"type":48,"value":419},"# Speed Insights only\n",{"type":43,"tag":215,"props":421,"children":423},{"class":217,"line":422},8,[424,428,432],{"type":43,"tag":215,"props":425,"children":426},{"style":222},[427],{"type":48,"value":352},{"type":43,"tag":215,"props":429,"children":430},{"style":355},[431],{"type":48,"value":358},{"type":43,"tag":215,"props":433,"children":434},{"style":355},[435],{"type":48,"value":368},{"type":43,"tag":51,"props":437,"children":438},{},[439],{"type":48,"value":440},"For older storefronts, create or update the root analytics component described below. Each library handles its own client-side behavior internally.",{"type":43,"tag":175,"props":442,"children":443},{},[],{"type":43,"tag":66,"props":445,"children":447},{"id":446},"part-b-google-tag-manager",[448],{"type":48,"value":449},"Part B: Google Tag Manager",{"type":43,"tag":51,"props":451,"children":452},{},[453],{"type":48,"value":454},"Skip this section if the user did not want GTM.",{"type":43,"tag":78,"props":456,"children":458},{"id":457},"b1-install-dependency",[459],{"type":48,"value":460},"B1. Install dependency",{"type":43,"tag":204,"props":462,"children":464},{"className":329,"code":463,"language":331,"meta":209,"style":209},"pnpm add @next\u002Fthird-parties\n",[465],{"type":43,"tag":57,"props":466,"children":467},{"__ignoreMap":209},[468],{"type":43,"tag":215,"props":469,"children":470},{"class":217,"line":218},[471,475,479],{"type":43,"tag":215,"props":472,"children":473},{"style":222},[474],{"type":48,"value":352},{"type":43,"tag":215,"props":476,"children":477},{"style":355},[478],{"type":48,"value":358},{"type":43,"tag":215,"props":480,"children":481},{"style":355},[482],{"type":48,"value":483}," @next\u002Fthird-parties\n",{"type":43,"tag":78,"props":485,"children":487},{"id":486},"b2-add-environment-variable",[488],{"type":48,"value":489},"B2. Add environment variable",{"type":43,"tag":51,"props":491,"children":492},{},[493,495,501],{"type":48,"value":494},"Add to ",{"type":43,"tag":57,"props":496,"children":498},{"className":497},[],[499],{"type":48,"value":500},".env.example",{"type":48,"value":230},{"type":43,"tag":204,"props":503,"children":507},{"className":504,"code":506,"language":48},[505],"language-text","# Google Tag Manager (optional)\nNEXT_PUBLIC_GTM_ID=\"GTM-XXXXXX\"\n",[508],{"type":43,"tag":57,"props":509,"children":510},{"__ignoreMap":209},[511],{"type":48,"value":506},{"type":43,"tag":51,"props":513,"children":514},{},[515,517,523],{"type":48,"value":516},"Set the actual value in ",{"type":43,"tag":57,"props":518,"children":520},{"className":519},[],[521],{"type":48,"value":522},".env.local",{"type":48,"value":524}," or in the Vercel dashboard under Environment Variables.",{"type":43,"tag":78,"props":526,"children":528},{"id":527},"b3-add-gtm-to-componentsanalyticstsx",[529,531],{"type":48,"value":530},"B3. Add GTM to ",{"type":43,"tag":57,"props":532,"children":534},{"className":533},[],[535],{"type":48,"value":536},"components\u002Fanalytics.tsx",{"type":43,"tag":51,"props":538,"children":539},{},[540,542,548,550,556,558,563,565,571,573,578],{"type":48,"value":541},"Import ",{"type":43,"tag":57,"props":543,"children":545},{"className":544},[],[546],{"type":48,"value":547},"GoogleTagManager",{"type":48,"value":549}," from ",{"type":43,"tag":57,"props":551,"children":553},{"className":552},[],[554],{"type":48,"value":555},"@next\u002Fthird-parties\u002Fgoogle",{"type":48,"value":557},". Read ",{"type":43,"tag":57,"props":559,"children":561},{"className":560},[],[562],{"type":48,"value":166},{"type":48,"value":564}," in the analytics component and render ",{"type":43,"tag":57,"props":566,"children":568},{"className":567},[],[569],{"type":48,"value":570},"\u003CGoogleTagManager gtmId={gtmId} \u002F>",{"type":48,"value":572}," only when the value exists. If the storefront extends ",{"type":43,"tag":57,"props":574,"children":576},{"className":575},[],[577],{"type":48,"value":62},{"type":48,"value":579}," with a GTM integration gate, apply that gate inside the same component.",{"type":43,"tag":175,"props":581,"children":582},{},[],{"type":43,"tag":66,"props":584,"children":586},{"id":585},"part-c-root-analytics-integration",[587],{"type":48,"value":588},"Part C: Root analytics integration",{"type":43,"tag":78,"props":590,"children":592},{"id":591},"c1-create-or-update-componentsanalyticstsx",[593,595],{"type":48,"value":594},"C1. Create or update ",{"type":43,"tag":57,"props":596,"children":598},{"className":597},[],[599],{"type":48,"value":536},{"type":43,"tag":51,"props":601,"children":602},{},[603],{"type":48,"value":604},"Compose the selected providers in the root analytics component and apply each integration gate there:",{"type":43,"tag":204,"props":606,"children":610},{"className":607,"code":608,"language":609,"meta":209,"style":209},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { GoogleTagManager } from \"@next\u002Fthird-parties\u002Fgoogle\";\nimport { Analytics } from \"@vercel\u002Fanalytics\u002Fnext\";\nimport { SpeedInsights } from \"@vercel\u002Fspeed-insights\u002Fnext\";\n\nimport { shopConfig } from \"@\u002Flib\u002Fconfig\";\n\nexport function AnalyticsComponents() {\n  const gtmId = process.env.NEXT_PUBLIC_GTM_ID;\n\n  return (\n    \u003C>\n      {shopConfig.analytics.vercel.enabled ? \u003CAnalytics \u002F> : null}\n      {shopConfig.analytics.speedInsights.enabled ? \u003CSpeedInsights \u002F> : null}\n      {gtmId ? \u003CGoogleTagManager gtmId={gtmId} \u002F> : null}\n    \u003C\u002F>\n  );\n}\n","tsx",[611],{"type":43,"tag":57,"props":612,"children":613},{"__ignoreMap":209},[614,662,703,744,751,792,799,828,873,880,895,904,972,1034,1086,1095,1108],{"type":43,"tag":215,"props":615,"children":616},{"class":217,"line":218},[617,623,627,633,638,643,648,652,657],{"type":43,"tag":215,"props":618,"children":620},{"style":619},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[621],{"type":48,"value":622},"import",{"type":43,"tag":215,"props":624,"children":625},{"style":227},[626],{"type":48,"value":253},{"type":43,"tag":215,"props":628,"children":630},{"style":629},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[631],{"type":48,"value":632}," GoogleTagManager",{"type":43,"tag":215,"props":634,"children":635},{"style":227},[636],{"type":48,"value":637}," }",{"type":43,"tag":215,"props":639,"children":640},{"style":619},[641],{"type":48,"value":642}," from",{"type":43,"tag":215,"props":644,"children":645},{"style":227},[646],{"type":48,"value":647}," \"",{"type":43,"tag":215,"props":649,"children":650},{"style":355},[651],{"type":48,"value":555},{"type":43,"tag":215,"props":653,"children":654},{"style":227},[655],{"type":48,"value":656},"\"",{"type":43,"tag":215,"props":658,"children":659},{"style":227},[660],{"type":48,"value":661},";\n",{"type":43,"tag":215,"props":663,"children":664},{"class":217,"line":238},[665,669,673,678,682,686,690,695,699],{"type":43,"tag":215,"props":666,"children":667},{"style":619},[668],{"type":48,"value":622},{"type":43,"tag":215,"props":670,"children":671},{"style":227},[672],{"type":48,"value":253},{"type":43,"tag":215,"props":674,"children":675},{"style":629},[676],{"type":48,"value":677}," Analytics",{"type":43,"tag":215,"props":679,"children":680},{"style":227},[681],{"type":48,"value":637},{"type":43,"tag":215,"props":683,"children":684},{"style":619},[685],{"type":48,"value":642},{"type":43,"tag":215,"props":687,"children":688},{"style":227},[689],{"type":48,"value":647},{"type":43,"tag":215,"props":691,"children":692},{"style":355},[693],{"type":48,"value":694},"@vercel\u002Fanalytics\u002Fnext",{"type":43,"tag":215,"props":696,"children":697},{"style":227},[698],{"type":48,"value":656},{"type":43,"tag":215,"props":700,"children":701},{"style":227},[702],{"type":48,"value":661},{"type":43,"tag":215,"props":704,"children":705},{"class":217,"line":276},[706,710,714,719,723,727,731,736,740],{"type":43,"tag":215,"props":707,"children":708},{"style":619},[709],{"type":48,"value":622},{"type":43,"tag":215,"props":711,"children":712},{"style":227},[713],{"type":48,"value":253},{"type":43,"tag":215,"props":715,"children":716},{"style":629},[717],{"type":48,"value":718}," SpeedInsights",{"type":43,"tag":215,"props":720,"children":721},{"style":227},[722],{"type":48,"value":637},{"type":43,"tag":215,"props":724,"children":725},{"style":619},[726],{"type":48,"value":642},{"type":43,"tag":215,"props":728,"children":729},{"style":227},[730],{"type":48,"value":647},{"type":43,"tag":215,"props":732,"children":733},{"style":355},[734],{"type":48,"value":735},"@vercel\u002Fspeed-insights\u002Fnext",{"type":43,"tag":215,"props":737,"children":738},{"style":227},[739],{"type":48,"value":656},{"type":43,"tag":215,"props":741,"children":742},{"style":227},[743],{"type":48,"value":661},{"type":43,"tag":215,"props":745,"children":746},{"class":217,"line":309},[747],{"type":43,"tag":215,"props":748,"children":749},{"emptyLinePlaceholder":374},[750],{"type":48,"value":377},{"type":43,"tag":215,"props":752,"children":753},{"class":217,"line":388},[754,758,762,767,771,775,779,784,788],{"type":43,"tag":215,"props":755,"children":756},{"style":619},[757],{"type":48,"value":622},{"type":43,"tag":215,"props":759,"children":760},{"style":227},[761],{"type":48,"value":253},{"type":43,"tag":215,"props":763,"children":764},{"style":629},[765],{"type":48,"value":766}," shopConfig",{"type":43,"tag":215,"props":768,"children":769},{"style":227},[770],{"type":48,"value":637},{"type":43,"tag":215,"props":772,"children":773},{"style":619},[774],{"type":48,"value":642},{"type":43,"tag":215,"props":776,"children":777},{"style":227},[778],{"type":48,"value":647},{"type":43,"tag":215,"props":780,"children":781},{"style":355},[782],{"type":48,"value":783},"@\u002Flib\u002Fconfig",{"type":43,"tag":215,"props":785,"children":786},{"style":227},[787],{"type":48,"value":656},{"type":43,"tag":215,"props":789,"children":790},{"style":227},[791],{"type":48,"value":661},{"type":43,"tag":215,"props":793,"children":794},{"class":217,"line":405},[795],{"type":43,"tag":215,"props":796,"children":797},{"emptyLinePlaceholder":374},[798],{"type":48,"value":377},{"type":43,"tag":215,"props":800,"children":801},{"class":217,"line":413},[802,807,813,819,824],{"type":43,"tag":215,"props":803,"children":804},{"style":619},[805],{"type":48,"value":806},"export",{"type":43,"tag":215,"props":808,"children":810},{"style":809},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[811],{"type":48,"value":812}," function",{"type":43,"tag":215,"props":814,"children":816},{"style":815},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[817],{"type":48,"value":818}," AnalyticsComponents",{"type":43,"tag":215,"props":820,"children":821},{"style":227},[822],{"type":48,"value":823},"()",{"type":43,"tag":215,"props":825,"children":826},{"style":227},[827],{"type":48,"value":235},{"type":43,"tag":215,"props":829,"children":830},{"class":217,"line":422},[831,836,841,846,851,856,861,865,869],{"type":43,"tag":215,"props":832,"children":833},{"style":809},[834],{"type":48,"value":835},"  const",{"type":43,"tag":215,"props":837,"children":838},{"style":629},[839],{"type":48,"value":840}," gtmId",{"type":43,"tag":215,"props":842,"children":843},{"style":227},[844],{"type":48,"value":845}," =",{"type":43,"tag":215,"props":847,"children":848},{"style":629},[849],{"type":48,"value":850}," process",{"type":43,"tag":215,"props":852,"children":853},{"style":227},[854],{"type":48,"value":855},".",{"type":43,"tag":215,"props":857,"children":858},{"style":629},[859],{"type":48,"value":860},"env",{"type":43,"tag":215,"props":862,"children":863},{"style":227},[864],{"type":48,"value":855},{"type":43,"tag":215,"props":866,"children":867},{"style":629},[868],{"type":48,"value":166},{"type":43,"tag":215,"props":870,"children":871},{"style":227},[872],{"type":48,"value":661},{"type":43,"tag":215,"props":874,"children":875},{"class":217,"line":30},[876],{"type":43,"tag":215,"props":877,"children":878},{"emptyLinePlaceholder":374},[879],{"type":48,"value":377},{"type":43,"tag":215,"props":881,"children":883},{"class":217,"line":882},10,[884,889],{"type":43,"tag":215,"props":885,"children":886},{"style":619},[887],{"type":48,"value":888},"  return",{"type":43,"tag":215,"props":890,"children":892},{"style":891},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[893],{"type":48,"value":894}," (\n",{"type":43,"tag":215,"props":896,"children":898},{"class":217,"line":897},11,[899],{"type":43,"tag":215,"props":900,"children":901},{"style":227},[902],{"type":48,"value":903},"    \u003C>\n",{"type":43,"tag":215,"props":905,"children":907},{"class":217,"line":906},12,[908,913,918,922,926,930,934,938,943,948,953,957,962,967],{"type":43,"tag":215,"props":909,"children":910},{"style":227},[911],{"type":48,"value":912},"      {",{"type":43,"tag":215,"props":914,"children":915},{"style":629},[916],{"type":48,"value":917},"shopConfig",{"type":43,"tag":215,"props":919,"children":920},{"style":227},[921],{"type":48,"value":855},{"type":43,"tag":215,"props":923,"children":924},{"style":629},[925],{"type":48,"value":25},{"type":43,"tag":215,"props":927,"children":928},{"style":227},[929],{"type":48,"value":855},{"type":43,"tag":215,"props":931,"children":932},{"style":629},[933],{"type":48,"value":8},{"type":43,"tag":215,"props":935,"children":936},{"style":227},[937],{"type":48,"value":855},{"type":43,"tag":215,"props":939,"children":940},{"style":629},[941],{"type":48,"value":942},"enabled ",{"type":43,"tag":215,"props":944,"children":945},{"style":227},[946],{"type":48,"value":947},"?",{"type":43,"tag":215,"props":949,"children":950},{"style":227},[951],{"type":48,"value":952}," \u003C",{"type":43,"tag":215,"props":954,"children":955},{"style":222},[956],{"type":48,"value":24},{"type":43,"tag":215,"props":958,"children":959},{"style":227},[960],{"type":48,"value":961}," \u002F>",{"type":43,"tag":215,"props":963,"children":964},{"style":227},[965],{"type":48,"value":966}," :",{"type":43,"tag":215,"props":968,"children":969},{"style":227},[970],{"type":48,"value":971}," null}\n",{"type":43,"tag":215,"props":973,"children":975},{"class":217,"line":974},13,[976,980,984,988,992,996,1001,1005,1009,1013,1017,1022,1026,1030],{"type":43,"tag":215,"props":977,"children":978},{"style":227},[979],{"type":48,"value":912},{"type":43,"tag":215,"props":981,"children":982},{"style":629},[983],{"type":48,"value":917},{"type":43,"tag":215,"props":985,"children":986},{"style":227},[987],{"type":48,"value":855},{"type":43,"tag":215,"props":989,"children":990},{"style":629},[991],{"type":48,"value":25},{"type":43,"tag":215,"props":993,"children":994},{"style":227},[995],{"type":48,"value":855},{"type":43,"tag":215,"props":997,"children":998},{"style":629},[999],{"type":48,"value":1000},"speedInsights",{"type":43,"tag":215,"props":1002,"children":1003},{"style":227},[1004],{"type":48,"value":855},{"type":43,"tag":215,"props":1006,"children":1007},{"style":629},[1008],{"type":48,"value":942},{"type":43,"tag":215,"props":1010,"children":1011},{"style":227},[1012],{"type":48,"value":947},{"type":43,"tag":215,"props":1014,"children":1015},{"style":227},[1016],{"type":48,"value":952},{"type":43,"tag":215,"props":1018,"children":1019},{"style":222},[1020],{"type":48,"value":1021},"SpeedInsights",{"type":43,"tag":215,"props":1023,"children":1024},{"style":227},[1025],{"type":48,"value":961},{"type":43,"tag":215,"props":1027,"children":1028},{"style":227},[1029],{"type":48,"value":966},{"type":43,"tag":215,"props":1031,"children":1032},{"style":227},[1033],{"type":48,"value":971},{"type":43,"tag":215,"props":1035,"children":1037},{"class":217,"line":1036},14,[1038,1042,1047,1051,1055,1059,1063,1068,1073,1078,1082],{"type":43,"tag":215,"props":1039,"children":1040},{"style":227},[1041],{"type":48,"value":912},{"type":43,"tag":215,"props":1043,"children":1044},{"style":629},[1045],{"type":48,"value":1046},"gtmId ",{"type":43,"tag":215,"props":1048,"children":1049},{"style":227},[1050],{"type":48,"value":947},{"type":43,"tag":215,"props":1052,"children":1053},{"style":227},[1054],{"type":48,"value":952},{"type":43,"tag":215,"props":1056,"children":1057},{"style":222},[1058],{"type":48,"value":547},{"type":43,"tag":215,"props":1060,"children":1061},{"style":809},[1062],{"type":48,"value":840},{"type":43,"tag":215,"props":1064,"children":1065},{"style":227},[1066],{"type":48,"value":1067},"={",{"type":43,"tag":215,"props":1069,"children":1070},{"style":629},[1071],{"type":48,"value":1072},"gtmId",{"type":43,"tag":215,"props":1074,"children":1075},{"style":227},[1076],{"type":48,"value":1077},"} \u002F>",{"type":43,"tag":215,"props":1079,"children":1080},{"style":227},[1081],{"type":48,"value":966},{"type":43,"tag":215,"props":1083,"children":1084},{"style":227},[1085],{"type":48,"value":971},{"type":43,"tag":215,"props":1087,"children":1089},{"class":217,"line":1088},15,[1090],{"type":43,"tag":215,"props":1091,"children":1092},{"style":227},[1093],{"type":48,"value":1094},"    \u003C\u002F>\n",{"type":43,"tag":215,"props":1096,"children":1098},{"class":217,"line":1097},16,[1099,1104],{"type":43,"tag":215,"props":1100,"children":1101},{"style":891},[1102],{"type":48,"value":1103},"  )",{"type":43,"tag":215,"props":1105,"children":1106},{"style":227},[1107],{"type":48,"value":661},{"type":43,"tag":215,"props":1109,"children":1111},{"class":217,"line":1110},17,[1112],{"type":43,"tag":215,"props":1113,"children":1114},{"style":227},[1115],{"type":48,"value":1116},"}\n",{"type":43,"tag":51,"props":1118,"children":1119},{},[1120],{"type":48,"value":1121},"Remove imports for integrations the storefront does not support.",{"type":43,"tag":78,"props":1123,"children":1125},{"id":1124},"c2-update-applayouttsx",[1126,1128],{"type":48,"value":1127},"C2. Update ",{"type":43,"tag":57,"props":1129,"children":1131},{"className":1130},[],[1132],{"type":48,"value":1133},"app\u002Flayout.tsx",{"type":43,"tag":51,"props":1135,"children":1136},{},[1137,1139,1145,1147,1153],{"type":48,"value":1138},"Always render the root analytics component inside ",{"type":43,"tag":57,"props":1140,"children":1142},{"className":1141},[],[1143],{"type":48,"value":1144},"\u003Cbody>",{"type":48,"value":1146}," after the ",{"type":43,"tag":57,"props":1148,"children":1150},{"className":1149},[],[1151],{"type":48,"value":1152},"\u003C\u002FNextIntlClientProvider>",{"type":48,"value":1154}," closing tag:",{"type":43,"tag":204,"props":1156,"children":1158},{"className":607,"code":1157,"language":609,"meta":209,"style":209},"import { AnalyticsComponents } from \"@\u002Fcomponents\u002Fanalytics\";\n",[1159],{"type":43,"tag":57,"props":1160,"children":1161},{"__ignoreMap":209},[1162],{"type":43,"tag":215,"props":1163,"children":1164},{"class":217,"line":218},[1165,1169,1173,1177,1181,1185,1189,1194,1198],{"type":43,"tag":215,"props":1166,"children":1167},{"style":619},[1168],{"type":48,"value":622},{"type":43,"tag":215,"props":1170,"children":1171},{"style":227},[1172],{"type":48,"value":253},{"type":43,"tag":215,"props":1174,"children":1175},{"style":629},[1176],{"type":48,"value":818},{"type":43,"tag":215,"props":1178,"children":1179},{"style":227},[1180],{"type":48,"value":637},{"type":43,"tag":215,"props":1182,"children":1183},{"style":619},[1184],{"type":48,"value":642},{"type":43,"tag":215,"props":1186,"children":1187},{"style":227},[1188],{"type":48,"value":647},{"type":43,"tag":215,"props":1190,"children":1191},{"style":355},[1192],{"type":48,"value":1193},"@\u002Fcomponents\u002Fanalytics",{"type":43,"tag":215,"props":1195,"children":1196},{"style":227},[1197],{"type":48,"value":656},{"type":43,"tag":215,"props":1199,"children":1200},{"style":227},[1201],{"type":48,"value":661},{"type":43,"tag":204,"props":1203,"children":1205},{"className":607,"code":1204,"language":609,"meta":209,"style":209},"\u003Cbody ...>\n  \u003Ca href=\"#main-content\" ...>...\u003C\u002Fa>\n  \u003CSiteSchema locale={locale} \u002F>\n  \u003CNextIntlClientProvider locale={locale} messages={messages}>\n    {\u002F* ... existing layout content ... *\u002F}\n  \u003C\u002FNextIntlClientProvider>\n  \u003CAnalyticsComponents \u002F>\n\u003C\u002Fbody>\n",[1206],{"type":43,"tag":57,"props":1207,"children":1208},{"__ignoreMap":209},[1209,1227,1263,1289,1338,1355,1372,1389],{"type":43,"tag":215,"props":1210,"children":1211},{"class":217,"line":218},[1212,1217,1222],{"type":43,"tag":215,"props":1213,"children":1214},{"style":227},[1215],{"type":48,"value":1216},"\u003C",{"type":43,"tag":215,"props":1218,"children":1219},{"style":891},[1220],{"type":48,"value":1221},"body",{"type":43,"tag":215,"props":1223,"children":1224},{"style":227},[1225],{"type":48,"value":1226}," ...>\n",{"type":43,"tag":215,"props":1228,"children":1229},{"class":217,"line":238},[1230,1235,1240,1245,1249,1254,1258],{"type":43,"tag":215,"props":1231,"children":1232},{"style":227},[1233],{"type":48,"value":1234},"  \u003Ca ",{"type":43,"tag":215,"props":1236,"children":1237},{"style":809},[1238],{"type":48,"value":1239},"href",{"type":43,"tag":215,"props":1241,"children":1242},{"style":227},[1243],{"type":48,"value":1244},"=",{"type":43,"tag":215,"props":1246,"children":1247},{"style":227},[1248],{"type":48,"value":656},{"type":43,"tag":215,"props":1250,"children":1251},{"style":355},[1252],{"type":48,"value":1253},"#main-content",{"type":43,"tag":215,"props":1255,"children":1256},{"style":227},[1257],{"type":48,"value":656},{"type":43,"tag":215,"props":1259,"children":1260},{"style":227},[1261],{"type":48,"value":1262}," ...>...\u003C\u002Fa>\n",{"type":43,"tag":215,"props":1264,"children":1265},{"class":217,"line":276},[1266,1271,1276,1280,1284],{"type":43,"tag":215,"props":1267,"children":1268},{"style":227},[1269],{"type":48,"value":1270},"  \u003CSiteSchema ",{"type":43,"tag":215,"props":1272,"children":1273},{"style":809},[1274],{"type":48,"value":1275},"locale",{"type":43,"tag":215,"props":1277,"children":1278},{"style":227},[1279],{"type":48,"value":1067},{"type":43,"tag":215,"props":1281,"children":1282},{"style":629},[1283],{"type":48,"value":1275},{"type":43,"tag":215,"props":1285,"children":1286},{"style":227},[1287],{"type":48,"value":1288},"} \u002F>\n",{"type":43,"tag":215,"props":1290,"children":1291},{"class":217,"line":309},[1292,1297,1302,1307,1311,1315,1320,1325,1329,1333],{"type":43,"tag":215,"props":1293,"children":1294},{"style":227},[1295],{"type":48,"value":1296},"  \u003C",{"type":43,"tag":215,"props":1298,"children":1299},{"style":222},[1300],{"type":48,"value":1301},"NextIntlClientProvider",{"type":43,"tag":215,"props":1303,"children":1304},{"style":809},[1305],{"type":48,"value":1306}," locale",{"type":43,"tag":215,"props":1308,"children":1309},{"style":227},[1310],{"type":48,"value":1067},{"type":43,"tag":215,"props":1312,"children":1313},{"style":629},[1314],{"type":48,"value":1275},{"type":43,"tag":215,"props":1316,"children":1317},{"style":227},[1318],{"type":48,"value":1319},"} ",{"type":43,"tag":215,"props":1321,"children":1322},{"style":809},[1323],{"type":48,"value":1324},"messages",{"type":43,"tag":215,"props":1326,"children":1327},{"style":227},[1328],{"type":48,"value":1067},{"type":43,"tag":215,"props":1330,"children":1331},{"style":629},[1332],{"type":48,"value":1324},{"type":43,"tag":215,"props":1334,"children":1335},{"style":227},[1336],{"type":48,"value":1337},"}>\n",{"type":43,"tag":215,"props":1339,"children":1340},{"class":217,"line":388},[1341,1346,1351],{"type":43,"tag":215,"props":1342,"children":1343},{"style":227},[1344],{"type":48,"value":1345},"    {",{"type":43,"tag":215,"props":1347,"children":1348},{"style":341},[1349],{"type":48,"value":1350},"\u002F* ... existing layout content ... *\u002F",{"type":43,"tag":215,"props":1352,"children":1353},{"style":227},[1354],{"type":48,"value":1116},{"type":43,"tag":215,"props":1356,"children":1357},{"class":217,"line":405},[1358,1363,1367],{"type":43,"tag":215,"props":1359,"children":1360},{"style":227},[1361],{"type":48,"value":1362},"  \u003C\u002F",{"type":43,"tag":215,"props":1364,"children":1365},{"style":222},[1366],{"type":48,"value":1301},{"type":43,"tag":215,"props":1368,"children":1369},{"style":227},[1370],{"type":48,"value":1371},">\n",{"type":43,"tag":215,"props":1373,"children":1374},{"class":217,"line":413},[1375,1379,1384],{"type":43,"tag":215,"props":1376,"children":1377},{"style":227},[1378],{"type":48,"value":1296},{"type":43,"tag":215,"props":1380,"children":1381},{"style":222},[1382],{"type":48,"value":1383},"AnalyticsComponents",{"type":43,"tag":215,"props":1385,"children":1386},{"style":227},[1387],{"type":48,"value":1388}," \u002F>\n",{"type":43,"tag":215,"props":1390,"children":1391},{"class":217,"line":422},[1392,1397,1401],{"type":43,"tag":215,"props":1393,"children":1394},{"style":227},[1395],{"type":48,"value":1396},"\u003C\u002F",{"type":43,"tag":215,"props":1398,"children":1399},{"style":629},[1400],{"type":48,"value":1221},{"type":43,"tag":215,"props":1402,"children":1403},{"style":227},[1404],{"type":48,"value":1371},{"type":43,"tag":51,"props":1406,"children":1407},{},[1408],{"type":48,"value":1409},"The root component remains mounted as the extension point for current and future analytics providers. Provider gates stay inside it so disabled integrations are not mounted.",{"type":43,"tag":66,"props":1411,"children":1413},{"id":1412},"guardrails",[1414],{"type":48,"value":1415},"Guardrails",{"type":43,"tag":85,"props":1417,"children":1418},{},[1419,1430,1443,1455,1475,1502],{"type":43,"tag":89,"props":1420,"children":1421},{},[1422,1424,1429],{"type":48,"value":1423},"Keep root analytics providers and their gates in ",{"type":43,"tag":57,"props":1425,"children":1427},{"className":1426},[],[1428],{"type":48,"value":536},{"type":48,"value":855},{"type":43,"tag":89,"props":1431,"children":1432},{},[1433,1435,1441],{"type":48,"value":1434},"Always mount ",{"type":43,"tag":57,"props":1436,"children":1438},{"className":1437},[],[1439],{"type":48,"value":1440},"\u003CAnalyticsComponents \u002F>",{"type":48,"value":1442}," from the root layout, even when every provider is disabled.",{"type":43,"tag":89,"props":1444,"children":1445},{},[1446,1448,1453],{"type":48,"value":1447},"The GTM container ID must come from ",{"type":43,"tag":57,"props":1449,"children":1451},{"className":1450},[],[1452],{"type":48,"value":166},{"type":48,"value":1454},", never hardcoded. The provider renders nothing if the env var is missing.",{"type":43,"tag":89,"props":1456,"children":1457},{},[1458,1460,1465,1467,1473],{"type":48,"value":1459},"Use ",{"type":43,"tag":57,"props":1461,"children":1463},{"className":1462},[],[1464],{"type":48,"value":555},{"type":48,"value":1466}," for GTM, not a manual ",{"type":43,"tag":57,"props":1468,"children":1470},{"className":1469},[],[1471],{"type":48,"value":1472},"\u003Cscript>",{"type":48,"value":1474}," tag. The Next.js component handles script loading and performance optimization.",{"type":43,"tag":89,"props":1476,"children":1477},{},[1478,1480,1485,1487,1492,1494,1500],{"type":48,"value":1479},"Import paths: use ",{"type":43,"tag":57,"props":1481,"children":1483},{"className":1482},[],[1484],{"type":48,"value":694},{"type":48,"value":1486}," and ",{"type":43,"tag":57,"props":1488,"children":1490},{"className":1489},[],[1491],{"type":48,"value":735},{"type":48,"value":1493}," (the ",{"type":43,"tag":57,"props":1495,"children":1497},{"className":1496},[],[1498],{"type":48,"value":1499},"\u002Fnext",{"type":48,"value":1501}," subpath), not the root package exports.",{"type":43,"tag":89,"props":1503,"children":1504},{},[1505,1507,1512,1514,1519],{"type":48,"value":1506},"Add ",{"type":43,"tag":57,"props":1508,"children":1510},{"className":1509},[],[1511],{"type":48,"value":166},{"type":48,"value":1513}," to ",{"type":43,"tag":57,"props":1515,"children":1517},{"className":1516},[],[1518],{"type":48,"value":500},{"type":48,"value":1520}," with a placeholder value so other developers know the variable exists.",{"type":43,"tag":1522,"props":1523,"children":1524},"style",{},[1525],{"type":48,"value":1526},"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":1528,"total":422},[1529,1549,1557,1574,1586,1600,1613],{"slug":1530,"name":1530,"fn":1531,"description":1532,"org":1533,"tags":1534,"stars":26,"repoUrl":27,"updatedAt":1548},"build-shop","build and adapt Shopify storefronts","Build or adapt a Shopify storefront with Vercel Shop source-backed patterns. Use when creating, redesigning, refactoring, or reviewing storefront routes, commerce data, rendering, caching, streaming, navigation, cart, account, mutations, product cards, media, loading states, or when applying Vercel Shop outside the template.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1535,1538,1541,1544,1547],{"name":1536,"slug":1537,"type":15},"Caching","caching",{"name":1539,"slug":1540,"type":15},"E-commerce","e-commerce",{"name":1542,"slug":1543,"type":15},"Frontend","frontend",{"name":1545,"slug":1546,"type":15},"Shopify","shopify",{"name":9,"slug":8,"type":15},"2026-07-01T08:07:40.865869",{"slug":4,"name":4,"fn":5,"description":6,"org":1550,"tags":1551,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1552,1553,1554,1555,1556],{"name":24,"slug":25,"type":15},{"name":18,"slug":19,"type":15},{"name":21,"slug":22,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"slug":1558,"name":1558,"fn":1559,"description":1560,"org":1561,"tags":1562,"stars":26,"repoUrl":27,"updatedAt":1573},"enable-i18n","enable multi-language support with next-intl","Enable next-intl-based i18n in the shop template — locale-prefixed URLs, per-locale message catalogs, and a locale switcher. Use when the user wants \"locale URLs\", \"multi-language\", or \"i18n\" without Shopify Markets integration. For full Shopify Markets multi-region commerce (region-aware pricing, inventory, payments), use `enable-shopify-markets` instead — this skill is the routing\u002Fi18n layer only.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1563,1564,1566,1569,1570],{"name":1542,"slug":1543,"type":15},{"name":1565,"slug":1565,"type":15},"i18n",{"name":1567,"slug":1568,"type":15},"Next.js","next-js",{"name":9,"slug":8,"type":15},{"name":1571,"slug":1572,"type":15},"Web Development","web-development","2026-07-30T05:31:22.633341",{"slug":1575,"name":1575,"fn":1576,"description":1577,"org":1578,"tags":1579,"stars":26,"repoUrl":27,"updatedAt":1585},"enable-shopify-markets","enable multi-locale support with Shopify Markets","Enable Shopify Markets with regional locales, localized Storefront API context, and next-intl routing. Supports locale-prefixed, invisible cookie-based, and per-domain routing without a separate market URL segment or market mapping.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1580,1581,1582,1583,1584],{"name":1539,"slug":1540,"type":15},{"name":1565,"slug":1565,"type":15},{"name":18,"slug":19,"type":15},{"name":1545,"slug":1546,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:31:19.636559",{"slug":1587,"name":1587,"fn":1588,"description":1589,"org":1590,"tags":1591,"stars":26,"repoUrl":27,"updatedAt":1599},"enable-shopify-menus","implement Shopify-powered navigation menus","Replace the hardcoded nav and footer menus with Shopify-powered menus.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1592,1595,1596,1597,1598],{"name":1593,"slug":1594,"type":15},"Design","design",{"name":1539,"slug":1540,"type":15},{"name":1542,"slug":1543,"type":15},{"name":1545,"slug":1546,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:31:21.651736",{"slug":1601,"name":1601,"fn":1602,"description":1603,"org":1604,"tags":1605,"stars":26,"repoUrl":27,"updatedAt":1612},"init-vercel-shop","initialize Vercel Shop storefront projects","Initialize a new Vercel Shop storefront with the official create-vercel-shop CLI. Use when the user wants to create, scaffold, start, or initialize a Vercel Shop project from a coding agent.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1606,1609,1610,1611],{"name":1607,"slug":1608,"type":15},"CLI","cli",{"name":1539,"slug":1540,"type":15},{"name":9,"slug":8,"type":15},{"name":1571,"slug":1572,"type":15},"2026-06-20T07:52:13.955072",{"slug":1614,"name":1614,"fn":1615,"description":1616,"org":1617,"tags":1618,"stars":26,"repoUrl":27,"updatedAt":1628},"shopify-graphql-reference","reference Shopify GraphQL patterns and fragments","Integrate Shopify-validated Storefront or Customer Account GraphQL into Vercel Shop. Use after Shopify AI Toolkit has supplied and validated an API operation, or when adapting existing GraphQL to the template's operation placement, fragments, domain transforms, locale flow, cache role, invalidation, and route architecture.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1619,1622,1623,1626,1627],{"name":1620,"slug":1621,"type":15},"Documentation","documentation",{"name":1539,"slug":1540,"type":15},{"name":1624,"slug":1625,"type":15},"GraphQL","graphql",{"name":1545,"slug":1546,"type":15},{"name":9,"slug":8,"type":15},"2026-04-19T04:56:32.035454",{"items":1630,"total":1797},[1631,1647,1659,1676,1687,1702,1718,1736,1748,1765,1777,1787],{"slug":1632,"name":1632,"fn":1633,"description":1634,"org":1635,"tags":1636,"stars":1644,"repoUrl":1645,"updatedAt":1646},"next-cache-components-adoption","enable and migrate to Next.js Cache Components","Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the `cacheComponents` flag, work through a flood of blocking-prerender \u002F instant validation errors, run the `cache-components-instant-false` codemod, or decide between opting routes out with `export const instant = false` and fixing them in place.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1637,1638,1639,1642,1643],{"name":1536,"slug":1537,"type":15},{"name":1542,"slug":1543,"type":15},{"name":1640,"slug":1641,"type":15},"Migration","migration",{"name":1567,"slug":1568,"type":15},{"name":9,"slug":8,"type":15},141208,"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fnext.js","2026-07-24T05:38:30.118542",{"slug":1648,"name":1648,"fn":1649,"description":1650,"org":1651,"tags":1652,"stars":1644,"repoUrl":1645,"updatedAt":1658},"next-cache-components-optimizer","optimize Next.js cache components","Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components \u002F PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next\u002Fplaywright instant() e2e and work it to green, one verified route at a time; the shipped test then guards against regression. Use when asked to make a route's navigation instant (its static shell commits immediately), fix a route whose static shell isn't prerendered\u002Fserved\u002Fprefetched, grow a route's static shell or fix its slow first paint, diagnose which Suspense boundary keeps a route out of its static shell, or write the instant() e2e guard for one. Requires Next.js 16.3+ with cacheComponents; directs an upgrade if older.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1653,1654,1655,1656,1657],{"name":1536,"slug":1537,"type":15},{"name":1542,"slug":1543,"type":15},{"name":1567,"slug":1568,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:31:10.674078",{"slug":1660,"name":1660,"fn":1661,"description":1662,"org":1663,"tags":1664,"stars":1644,"repoUrl":1645,"updatedAt":1675},"next-dev-loop","verify Next.js runtime behavior","Verify Next.js runtime behavior after editing app code. Use this skill to confirm a change actually works in a running app — not just that it compiles or type-checks. Combines \u002F_next\u002Fmcp (Next.js's view) with agent-browser (the browser's view). Requires a running `next dev`.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1665,1668,1669,1672,1673,1674],{"name":1666,"slug":1667,"type":15},"Debugging","debugging",{"name":1542,"slug":1543,"type":15},{"name":1670,"slug":1671,"type":15},"Local Development","local-development",{"name":1567,"slug":1568,"type":15},{"name":9,"slug":8,"type":15},{"name":1571,"slug":1572,"type":15},"2026-05-22T06:45:28.627735",{"slug":1677,"name":1677,"fn":1678,"description":1679,"org":1680,"tags":1681,"stars":1644,"repoUrl":1645,"updatedAt":1686},"next-partial-prefetching-adoption","adopt Partial Prefetching in Next.js apps","Turn on Partial Prefetching in a Next.js app and work through the insights it surfaces. Use when the user wants to enable or adopt Partial Prefetching, flip the `partialPrefetching` flag, opt routes in with `export const prefetch = 'partial'`, audit `\u003CLink prefetch={true}>` calls, or resolve the link-prefetch-partial and instant-shell-url-data insights.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1682,1683,1684,1685],{"name":1542,"slug":1543,"type":15},{"name":1567,"slug":1568,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:31:11.591864",{"slug":1688,"name":1688,"fn":1689,"description":1690,"org":1691,"tags":1692,"stars":1699,"repoUrl":1700,"updatedAt":1701},"turborepo","manage monorepos with Turborepo","Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines,\ndependsOn, caching, remote cache, the \"turbo\" CLI, --filter, --affected, CI optimization, environment\nvariables, internal packages, monorepo structure\u002Fbest practices, and boundaries.\n\nUse when user: configures tasks\u002Fworkflows\u002Fpipelines, creates packages, sets up\nmonorepo, shares code between apps, runs changed\u002Faffected packages, debugs cache,\nor has apps\u002Fpackages directories.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1693,1696,1697],{"name":1694,"slug":1695,"type":15},"CI\u002FCD","ci-cd",{"name":13,"slug":14,"type":15},{"name":1698,"slug":1688,"type":15},"Turborepo",30809,"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fturborepo","2026-07-30T05:32:14.920116",{"slug":1703,"name":1703,"fn":1704,"description":1705,"org":1706,"tags":1707,"stars":1715,"repoUrl":1716,"updatedAt":1717},"add-function-examples","add AI function examples for testing","Guide for adding new AI function examples, for testing specific features against the actual provider APIs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1708,1711,1714],{"name":1709,"slug":1710,"type":15},"AI SDK","ai-sdk",{"name":1712,"slug":1713,"type":15},"Testing","testing",{"name":9,"slug":8,"type":15},25670,"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fai","2026-04-06T18:55:51.318866",{"slug":1719,"name":1719,"fn":1720,"description":1721,"org":1722,"tags":1723,"stars":1715,"repoUrl":1716,"updatedAt":1735},"add-harness-package","add AI SDK harness packages","Guide for adding new AI SDK harness packages. Use when creating a new @ai-sdk\u002Fharness-\u003Cname> package that adapts a coding-agent runtime to HarnessV1.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1724,1727,1728,1731,1734],{"name":1725,"slug":1726,"type":15},"Agents","agents",{"name":1709,"slug":1710,"type":15},{"name":1729,"slug":1730,"type":15},"Harness","harness",{"name":1732,"slug":1733,"type":15},"SDK","sdk",{"name":9,"slug":8,"type":15},"2026-06-18T08:29:19.858737",{"slug":1737,"name":1737,"fn":1738,"description":1739,"org":1740,"tags":1741,"stars":1715,"repoUrl":1716,"updatedAt":1747},"add-provider-package","add new provider packages to AI SDK","Guide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk\u002F\u003Cprovider> package to integrate an AI service into the SDK.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1742,1743,1746],{"name":1709,"slug":1710,"type":15},{"name":1744,"slug":1745,"type":15},"API Development","api-development",{"name":9,"slug":8,"type":15},"2026-04-06T18:55:47.45549",{"slug":1749,"name":1749,"fn":1750,"description":1751,"org":1752,"tags":1753,"stars":1715,"repoUrl":1716,"updatedAt":1764},"adr-skill","create and maintain architecture decision records","Create and maintain Architecture Decision Records (ADRs) optimized for agentic coding workflows. Use when you need to propose, write, update, accept\u002Freject, deprecate, or supersede an ADR; bootstrap an adr folder and index; consult existing ADRs before implementing changes; or enforce ADR conventions. This skill uses Socratic questioning to capture intent before drafting, and validates output against an agent-readiness checklist.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1754,1757,1760,1761],{"name":1755,"slug":1756,"type":15},"ADR","adr",{"name":1758,"slug":1759,"type":15},"Architecture","architecture",{"name":1620,"slug":1621,"type":15},{"name":1762,"slug":1763,"type":15},"Engineering","engineering","2026-04-06T18:55:50.043694",{"slug":1710,"name":1710,"fn":1766,"description":1767,"org":1768,"tags":1769,"stars":1715,"repoUrl":1716,"updatedAt":1776},"build AI features with Vercel AI SDK","Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: \"AI SDK\", \"Vercel AI SDK\", \"generateText\", \"streamText\", \"add AI to my app\", \"build an agent\", \"tool calling\", \"structured output\", \"useChat\".",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1770,1771,1772,1775],{"name":1725,"slug":1726,"type":15},{"name":1709,"slug":1710,"type":15},{"name":1773,"slug":1774,"type":15},"LLM","llm",{"name":9,"slug":8,"type":15},"2026-04-06T18:55:48.739463",{"slug":1778,"name":1778,"fn":1779,"description":1780,"org":1781,"tags":1782,"stars":1715,"repoUrl":1716,"updatedAt":1786},"capture-api-response-test-fixture","capture API response test fixtures","Capture API response test fixture.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1783,1784,1785],{"name":1744,"slug":1745,"type":15},{"name":1712,"slug":1713,"type":15},{"name":9,"slug":8,"type":15},"2026-04-06T18:55:56.374433",{"slug":1788,"name":1788,"fn":1789,"description":1790,"org":1791,"tags":1792,"stars":1715,"repoUrl":1716,"updatedAt":1796},"develop-ai-functions-example","develop AI SDK function examples","Develop examples for AI SDK functions. Use when creating, running, or modifying examples under examples\u002Fai-functions\u002Fsrc to validate provider support, demonstrate features, or create test fixtures.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1793,1794,1795],{"name":1709,"slug":1710,"type":15},{"name":1712,"slug":1713,"type":15},{"name":9,"slug":8,"type":15},"2026-04-06T18:55:55.088956",68]