[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-vercel-build-shop":3,"mdc-vgptb-key":37,"related-repo-vercel-build-shop":751,"related-org-vercel-build-shop":854},{"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},"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},"vercel","Vercel","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fvercel.png",[12,14,17,20,23],{"name":9,"slug":8,"type":13},"tag",{"name":15,"slug":16,"type":13},"E-commerce","e-commerce",{"name":18,"slug":19,"type":13},"Shopify","shopify",{"name":21,"slug":22,"type":13},"Caching","caching",{"name":24,"slug":25,"type":13},"Frontend","frontend",32,"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fshop","2026-07-01T08:07:40.865869",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\u002Fbuild-shop","---\nname: build-shop\ndescription: 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.\n---\n\n# Build with Vercel Shop\n\nBuild the shop around commerce truth first: what product or collection is being shown, what the customer has selected, what can be bought now, what price is authoritative, and what state belongs in the URL, Shopify, the server cache, or the browser. Use Vercel Shop's template as the reference implementation, but adapt the behavior to the current storefront instead of copying files blindly.\n\n## Ground the work in source\n\n1. Read the project's `AGENTS.md`, the target route, its view contract, and every operation it calls.\n2. If the Vercel Shop template source is available, inspect it before relying on this prose:\n   - Template rules: `apps\u002Ftemplate\u002FAGENTS.md`\n   - Route\u002Flayout shell: `apps\u002Ftemplate\u002Fapp\u002Flayout.tsx`, `apps\u002Ftemplate\u002Fapp\u002Fpage.tsx`\n   - Shopify boundary: `apps\u002Ftemplate\u002Flib\u002Fshopify\u002Fstorefront.ts`, `apps\u002Ftemplate\u002Flib\u002Fshopify\u002Foperations\u002F`, `apps\u002Ftemplate\u002Flib\u002Fshopify\u002Ftransforms\u002F`, `apps\u002Ftemplate\u002Flib\u002Ftypes.ts`\n   - Shared UI layout primitives: `apps\u002Ftemplate\u002Fcomponents\u002Fui\u002Fcontainer.tsx`, `apps\u002Ftemplate\u002Fcomponents\u002Fui\u002Fpage.tsx`, `apps\u002Ftemplate\u002Fcomponents\u002Fui\u002Fsections.tsx`\n   - Public source fallback: [apps\u002Ftemplate source](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fshop\u002Ftree\u002Fmain\u002Fapps\u002Ftemplate)\n3. Use the docs to orient before editing unfamiliar areas:\n   - [Architecture docs](https:\u002F\u002Fvercel.shop\u002Fdocs\u002Fanatomy)\n   - [Route reference](https:\u002F\u002Fvercel.shop\u002Fdocs\u002Freference\u002Froutes)\n   - [Shopify integration docs](https:\u002F\u002Fvercel.shop\u002Fdocs\u002Fshopify)\n   - [API boundary docs](https:\u002F\u002Fvercel.shop\u002Fdocs\u002Freference\u002Fstorefront-api)\n4. Read the local Next.js documentation under `node_modules\u002Fnext\u002Fdist\u002Fdocs\u002F` for any API being changed. This template may use newer Cache Components and prefetch behavior than model knowledge.\n5. Preserve existing cache directives, promises, invalidation tags, auth gates, redirects, metadata, and `notFound()` behavior unless the task explicitly changes the domain behavior.\n\n## Route the work\n\nRead `references\u002Frendering-architecture.md` for every route. Then read only the route references that apply:\n\n- Commerce behavior and end-to-end flows: `references\u002Fcommerce-flows.md`\n- Home and marketing routes: `references\u002Fhome.md`\n- Collection and search routes: `references\u002Fplp-search.md`\n- Product routes: `references\u002Fpdp.md`\n- Cart and authenticated account routes: `references\u002Fcart-account.md`\n- Cart provider, bootstrap, optimistic state, and mutations: `references\u002Fcart-provider.md`\n\n## Model the route\n\nWrite down the route as five layers before editing, using commerce nouns instead of generic component names:\n\n1. **Route orchestration** — resolve handles, locale, selected options, filters, pagination, redirects, metadata, auth, and real 404s.\n2. **Data operation** — fetch Shopify data, transform provider types into shop domain types, and own cache scope, tags, and invalidation names.\n3. **Server composition** — render the stable catalog shell first and place independent sections like recommendations, facets, reviews, and account\u002Fcart details behind granular boundaries.\n4. **Client island** — own only selection, optimistic intent, browser APIs, effects, and event handlers: variant pickers, galleries, filter controls, carts, and forms.\n5. **Server action** — perform server mutations, return canonical Shopify state and warnings, invalidate the right domain cache, and reconcile optimistic state without double-applying it.\n\nFor each layer's full ownership boundary, see the responsibility table in `references\u002Frendering-architecture.md`. For every dependency, classify it as cacheable shell content, request-time shared content, request-time personalized content, or client-only state. Draw an edge only when one result genuinely requires another. Start all other work concurrently.\n\n## Storefront gotchas\n\n- Product selection must round-trip through direct visits, links, refreshes, and client navigation, then drive media, price, availability, add-to-cart payloads, and canonical links.\n- Collection\u002Fsearch URLs are the source of truth for browsing. Empty results, unavailable facets, and back\u002Fforward navigation are not optional states.\n- Cart UI must keep confirmed Shopify state separate from pending optimistic intent so concurrent mutations, bootstrap, errors, and warnings cannot double-apply or disappear.\n- Customer, account, cart identity, and authorization state must never leak into shared product, collection, menu, page, or recommendation caches.\n- Missing images, deleted products, sold-out variants, empty collections, partial Shopify failures, and disabled auth are normal storefront cases. Represent them deliberately.\n\n## Keep the Shopify boundary explicit\n\nUse the installed Shopify AI Toolkit for Shopify API documentation, schema facts, operation design, and validation. Invoke its API-specific skill before adding or changing Storefront or Customer Account GraphQL. For metafields or metaobjects, use its custom-data skill first.\n\nUse `\u002Fvercel-shop:shopify-graphql-reference` only after Shopify validation to apply Vercel Shop conventions: operation placement, domain transforms, cache role, locale flow, invalidation, and route integration. Never treat this architecture skill as a substitute for authoritative Shopify validation.\n\n## Prevent blocking\n\n1. Keep route identity, stable headings, primary media, selected price\u002Favailability, and likely LCP content in the earliest shell the data contract permits.\n2. Resolve route identity early only when it is required for correctness or shell coherence.\n3. Pass request-dependent promises downward unawaited. Resolve them in the smallest component that needs them and place Suspense there.\n4. Use sibling boundaries for independent work. Do not put the whole page behind the slowest Shopify request.\n5. Give every visible fallback the same outer geometry as its resolved content.\n6. Keep components server-rendered by default. Do not move reads into client effects or internal HTTP endpoints.\n7. Keep cache policy in the data layer and personalized data out of shared caches.\n8. Treat prefetching as a traffic-versus-latency decision, not a default fix for blocking architecture.\n\n## Use a browser feedback loop\n\nFor visible storefront changes, close the loop in a real browser before calling the work done. Use the agent's built-in browser when available; otherwise use the standalone `agent-browser` CLI.\n\n1. Start the local storefront and open each affected route: `agent-browser open http:\u002F\u002Flocalhost:3000\u002F...`.\n2. Capture the current state: `agent-browser wait --load networkidle`, `agent-browser snapshot`, and `agent-browser screenshot --full`.\n3. Exercise the commerce interaction through the UI: variant selection, filtering, pagination, add\u002Fupdate\u002Fremove cart, auth redirects, or the changed control.\n4. Re-snapshot after every navigation or DOM change before reusing element refs.\n5. Repeat on mobile and desktop viewports when layout, media, overlays, filters, cart, or primary actions changed.\n6. Iterate on the implementation until the browser outcome matches the intended commerce behavior. If `agent-browser` is unavailable, say so and report the fallback checks used.\n\n## Verify the architecture\n\nRun the static hotspot scan from the skill directory:\n\n```bash\nnode scripts\u002Faudit-storefront.mjs \u003Cstorefront-root>\n```\n\nTreat its output as review prompts, not measurements. Then:\n\n1. Run targeted lint, typecheck, tests, and affected flows available in the current environment.\n2. Test direct visits, client navigations, back\u002Fforward navigation, and URL round-trips for the routes changed.\n3. Verify that non-critical Shopify work does not delay the shell, primary media, selected price\u002Favailability, or primary interaction.\n4. Run every affected flow in `references\u002Fcommerce-flows.md`, including failure, empty, sold-out, and missing-media states.\n5. Inspect failed requests, layout shifts, LCP discovery, hydration, and interaction behavior when relevant.\n6. Require a production build only when build, prerendering, caching, bundling, deployment behavior, or release readiness is in scope.\n7. Use bundle analysis or deployed field data only for an explicit performance investigation when those tools and data are available. Do not request them as routine completion work or claim measured improvement from code inspection.\n\nReport the final layer boundaries, blocking dependencies, cache ownership, and remaining risks.\n",{"data":38,"body":39},{"name":4,"description":6},{"type":40,"children":41},"root",[42,51,57,64,267,273,286,355,361,366,420,432,438,466,472,477,490,496,539,545,558,628,634,639,690,695,740,745],{"type":43,"tag":44,"props":45,"children":47},"element","h1",{"id":46},"build-with-vercel-shop",[48],{"type":49,"value":50},"text","Build with Vercel Shop",{"type":43,"tag":52,"props":53,"children":54},"p",{},[55],{"type":49,"value":56},"Build the shop around commerce truth first: what product or collection is being shown, what the customer has selected, what can be bought now, what price is authoritative, and what state belongs in the URL, Shopify, the server cache, or the browser. Use Vercel Shop's template as the reference implementation, but adapt the behavior to the current storefront instead of copying files blindly.",{"type":43,"tag":58,"props":59,"children":61},"h2",{"id":60},"ground-the-work-in-source",[62],{"type":49,"value":63},"Ground the work in source",{"type":43,"tag":65,"props":66,"children":67},"ol",{},[68,83,193,241,254],{"type":43,"tag":69,"props":70,"children":71},"li",{},[72,74,81],{"type":49,"value":73},"Read the project's ",{"type":43,"tag":75,"props":76,"children":78},"code",{"className":77},[],[79],{"type":49,"value":80},"AGENTS.md",{"type":49,"value":82},", the target route, its view contract, and every operation it calls.",{"type":43,"tag":69,"props":84,"children":85},{},[86,88],{"type":49,"value":87},"If the Vercel Shop template source is available, inspect it before relying on this prose:\n",{"type":43,"tag":89,"props":90,"children":91},"ul",{},[92,103,122,154,179],{"type":43,"tag":69,"props":93,"children":94},{},[95,97],{"type":49,"value":96},"Template rules: ",{"type":43,"tag":75,"props":98,"children":100},{"className":99},[],[101],{"type":49,"value":102},"apps\u002Ftemplate\u002FAGENTS.md",{"type":43,"tag":69,"props":104,"children":105},{},[106,108,114,116],{"type":49,"value":107},"Route\u002Flayout shell: ",{"type":43,"tag":75,"props":109,"children":111},{"className":110},[],[112],{"type":49,"value":113},"apps\u002Ftemplate\u002Fapp\u002Flayout.tsx",{"type":49,"value":115},", ",{"type":43,"tag":75,"props":117,"children":119},{"className":118},[],[120],{"type":49,"value":121},"apps\u002Ftemplate\u002Fapp\u002Fpage.tsx",{"type":43,"tag":69,"props":123,"children":124},{},[125,127,133,134,140,141,147,148],{"type":49,"value":126},"Shopify boundary: ",{"type":43,"tag":75,"props":128,"children":130},{"className":129},[],[131],{"type":49,"value":132},"apps\u002Ftemplate\u002Flib\u002Fshopify\u002Fstorefront.ts",{"type":49,"value":115},{"type":43,"tag":75,"props":135,"children":137},{"className":136},[],[138],{"type":49,"value":139},"apps\u002Ftemplate\u002Flib\u002Fshopify\u002Foperations\u002F",{"type":49,"value":115},{"type":43,"tag":75,"props":142,"children":144},{"className":143},[],[145],{"type":49,"value":146},"apps\u002Ftemplate\u002Flib\u002Fshopify\u002Ftransforms\u002F",{"type":49,"value":115},{"type":43,"tag":75,"props":149,"children":151},{"className":150},[],[152],{"type":49,"value":153},"apps\u002Ftemplate\u002Flib\u002Ftypes.ts",{"type":43,"tag":69,"props":155,"children":156},{},[157,159,165,166,172,173],{"type":49,"value":158},"Shared UI layout primitives: ",{"type":43,"tag":75,"props":160,"children":162},{"className":161},[],[163],{"type":49,"value":164},"apps\u002Ftemplate\u002Fcomponents\u002Fui\u002Fcontainer.tsx",{"type":49,"value":115},{"type":43,"tag":75,"props":167,"children":169},{"className":168},[],[170],{"type":49,"value":171},"apps\u002Ftemplate\u002Fcomponents\u002Fui\u002Fpage.tsx",{"type":49,"value":115},{"type":43,"tag":75,"props":174,"children":176},{"className":175},[],[177],{"type":49,"value":178},"apps\u002Ftemplate\u002Fcomponents\u002Fui\u002Fsections.tsx",{"type":43,"tag":69,"props":180,"children":181},{},[182,184],{"type":49,"value":183},"Public source fallback: ",{"type":43,"tag":185,"props":186,"children":190},"a",{"href":187,"rel":188},"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fshop\u002Ftree\u002Fmain\u002Fapps\u002Ftemplate",[189],"nofollow",[191],{"type":49,"value":192},"apps\u002Ftemplate source",{"type":43,"tag":69,"props":194,"children":195},{},[196,198],{"type":49,"value":197},"Use the docs to orient before editing unfamiliar areas:\n",{"type":43,"tag":89,"props":199,"children":200},{},[201,211,221,231],{"type":43,"tag":69,"props":202,"children":203},{},[204],{"type":43,"tag":185,"props":205,"children":208},{"href":206,"rel":207},"https:\u002F\u002Fvercel.shop\u002Fdocs\u002Fanatomy",[189],[209],{"type":49,"value":210},"Architecture docs",{"type":43,"tag":69,"props":212,"children":213},{},[214],{"type":43,"tag":185,"props":215,"children":218},{"href":216,"rel":217},"https:\u002F\u002Fvercel.shop\u002Fdocs\u002Freference\u002Froutes",[189],[219],{"type":49,"value":220},"Route reference",{"type":43,"tag":69,"props":222,"children":223},{},[224],{"type":43,"tag":185,"props":225,"children":228},{"href":226,"rel":227},"https:\u002F\u002Fvercel.shop\u002Fdocs\u002Fshopify",[189],[229],{"type":49,"value":230},"Shopify integration docs",{"type":43,"tag":69,"props":232,"children":233},{},[234],{"type":43,"tag":185,"props":235,"children":238},{"href":236,"rel":237},"https:\u002F\u002Fvercel.shop\u002Fdocs\u002Freference\u002Fstorefront-api",[189],[239],{"type":49,"value":240},"API boundary docs",{"type":43,"tag":69,"props":242,"children":243},{},[244,246,252],{"type":49,"value":245},"Read the local Next.js documentation under ",{"type":43,"tag":75,"props":247,"children":249},{"className":248},[],[250],{"type":49,"value":251},"node_modules\u002Fnext\u002Fdist\u002Fdocs\u002F",{"type":49,"value":253}," for any API being changed. This template may use newer Cache Components and prefetch behavior than model knowledge.",{"type":43,"tag":69,"props":255,"children":256},{},[257,259,265],{"type":49,"value":258},"Preserve existing cache directives, promises, invalidation tags, auth gates, redirects, metadata, and ",{"type":43,"tag":75,"props":260,"children":262},{"className":261},[],[263],{"type":49,"value":264},"notFound()",{"type":49,"value":266}," behavior unless the task explicitly changes the domain behavior.",{"type":43,"tag":58,"props":268,"children":270},{"id":269},"route-the-work",[271],{"type":49,"value":272},"Route the work",{"type":43,"tag":52,"props":274,"children":275},{},[276,278,284],{"type":49,"value":277},"Read ",{"type":43,"tag":75,"props":279,"children":281},{"className":280},[],[282],{"type":49,"value":283},"references\u002Frendering-architecture.md",{"type":49,"value":285}," for every route. Then read only the route references that apply:",{"type":43,"tag":89,"props":287,"children":288},{},[289,300,311,322,333,344],{"type":43,"tag":69,"props":290,"children":291},{},[292,294],{"type":49,"value":293},"Commerce behavior and end-to-end flows: ",{"type":43,"tag":75,"props":295,"children":297},{"className":296},[],[298],{"type":49,"value":299},"references\u002Fcommerce-flows.md",{"type":43,"tag":69,"props":301,"children":302},{},[303,305],{"type":49,"value":304},"Home and marketing routes: ",{"type":43,"tag":75,"props":306,"children":308},{"className":307},[],[309],{"type":49,"value":310},"references\u002Fhome.md",{"type":43,"tag":69,"props":312,"children":313},{},[314,316],{"type":49,"value":315},"Collection and search routes: ",{"type":43,"tag":75,"props":317,"children":319},{"className":318},[],[320],{"type":49,"value":321},"references\u002Fplp-search.md",{"type":43,"tag":69,"props":323,"children":324},{},[325,327],{"type":49,"value":326},"Product routes: ",{"type":43,"tag":75,"props":328,"children":330},{"className":329},[],[331],{"type":49,"value":332},"references\u002Fpdp.md",{"type":43,"tag":69,"props":334,"children":335},{},[336,338],{"type":49,"value":337},"Cart and authenticated account routes: ",{"type":43,"tag":75,"props":339,"children":341},{"className":340},[],[342],{"type":49,"value":343},"references\u002Fcart-account.md",{"type":43,"tag":69,"props":345,"children":346},{},[347,349],{"type":49,"value":348},"Cart provider, bootstrap, optimistic state, and mutations: ",{"type":43,"tag":75,"props":350,"children":352},{"className":351},[],[353],{"type":49,"value":354},"references\u002Fcart-provider.md",{"type":43,"tag":58,"props":356,"children":358},{"id":357},"model-the-route",[359],{"type":49,"value":360},"Model the route",{"type":43,"tag":52,"props":362,"children":363},{},[364],{"type":49,"value":365},"Write down the route as five layers before editing, using commerce nouns instead of generic component names:",{"type":43,"tag":65,"props":367,"children":368},{},[369,380,390,400,410],{"type":43,"tag":69,"props":370,"children":371},{},[372,378],{"type":43,"tag":373,"props":374,"children":375},"strong",{},[376],{"type":49,"value":377},"Route orchestration",{"type":49,"value":379}," — resolve handles, locale, selected options, filters, pagination, redirects, metadata, auth, and real 404s.",{"type":43,"tag":69,"props":381,"children":382},{},[383,388],{"type":43,"tag":373,"props":384,"children":385},{},[386],{"type":49,"value":387},"Data operation",{"type":49,"value":389}," — fetch Shopify data, transform provider types into shop domain types, and own cache scope, tags, and invalidation names.",{"type":43,"tag":69,"props":391,"children":392},{},[393,398],{"type":43,"tag":373,"props":394,"children":395},{},[396],{"type":49,"value":397},"Server composition",{"type":49,"value":399}," — render the stable catalog shell first and place independent sections like recommendations, facets, reviews, and account\u002Fcart details behind granular boundaries.",{"type":43,"tag":69,"props":401,"children":402},{},[403,408],{"type":43,"tag":373,"props":404,"children":405},{},[406],{"type":49,"value":407},"Client island",{"type":49,"value":409}," — own only selection, optimistic intent, browser APIs, effects, and event handlers: variant pickers, galleries, filter controls, carts, and forms.",{"type":43,"tag":69,"props":411,"children":412},{},[413,418],{"type":43,"tag":373,"props":414,"children":415},{},[416],{"type":49,"value":417},"Server action",{"type":49,"value":419}," — perform server mutations, return canonical Shopify state and warnings, invalidate the right domain cache, and reconcile optimistic state without double-applying it.",{"type":43,"tag":52,"props":421,"children":422},{},[423,425,430],{"type":49,"value":424},"For each layer's full ownership boundary, see the responsibility table in ",{"type":43,"tag":75,"props":426,"children":428},{"className":427},[],[429],{"type":49,"value":283},{"type":49,"value":431},". For every dependency, classify it as cacheable shell content, request-time shared content, request-time personalized content, or client-only state. Draw an edge only when one result genuinely requires another. Start all other work concurrently.",{"type":43,"tag":58,"props":433,"children":435},{"id":434},"storefront-gotchas",[436],{"type":49,"value":437},"Storefront gotchas",{"type":43,"tag":89,"props":439,"children":440},{},[441,446,451,456,461],{"type":43,"tag":69,"props":442,"children":443},{},[444],{"type":49,"value":445},"Product selection must round-trip through direct visits, links, refreshes, and client navigation, then drive media, price, availability, add-to-cart payloads, and canonical links.",{"type":43,"tag":69,"props":447,"children":448},{},[449],{"type":49,"value":450},"Collection\u002Fsearch URLs are the source of truth for browsing. Empty results, unavailable facets, and back\u002Fforward navigation are not optional states.",{"type":43,"tag":69,"props":452,"children":453},{},[454],{"type":49,"value":455},"Cart UI must keep confirmed Shopify state separate from pending optimistic intent so concurrent mutations, bootstrap, errors, and warnings cannot double-apply or disappear.",{"type":43,"tag":69,"props":457,"children":458},{},[459],{"type":49,"value":460},"Customer, account, cart identity, and authorization state must never leak into shared product, collection, menu, page, or recommendation caches.",{"type":43,"tag":69,"props":462,"children":463},{},[464],{"type":49,"value":465},"Missing images, deleted products, sold-out variants, empty collections, partial Shopify failures, and disabled auth are normal storefront cases. Represent them deliberately.",{"type":43,"tag":58,"props":467,"children":469},{"id":468},"keep-the-shopify-boundary-explicit",[470],{"type":49,"value":471},"Keep the Shopify boundary explicit",{"type":43,"tag":52,"props":473,"children":474},{},[475],{"type":49,"value":476},"Use the installed Shopify AI Toolkit for Shopify API documentation, schema facts, operation design, and validation. Invoke its API-specific skill before adding or changing Storefront or Customer Account GraphQL. For metafields or metaobjects, use its custom-data skill first.",{"type":43,"tag":52,"props":478,"children":479},{},[480,482,488],{"type":49,"value":481},"Use ",{"type":43,"tag":75,"props":483,"children":485},{"className":484},[],[486],{"type":49,"value":487},"\u002Fvercel-shop:shopify-graphql-reference",{"type":49,"value":489}," only after Shopify validation to apply Vercel Shop conventions: operation placement, domain transforms, cache role, locale flow, invalidation, and route integration. Never treat this architecture skill as a substitute for authoritative Shopify validation.",{"type":43,"tag":58,"props":491,"children":493},{"id":492},"prevent-blocking",[494],{"type":49,"value":495},"Prevent blocking",{"type":43,"tag":65,"props":497,"children":498},{},[499,504,509,514,519,524,529,534],{"type":43,"tag":69,"props":500,"children":501},{},[502],{"type":49,"value":503},"Keep route identity, stable headings, primary media, selected price\u002Favailability, and likely LCP content in the earliest shell the data contract permits.",{"type":43,"tag":69,"props":505,"children":506},{},[507],{"type":49,"value":508},"Resolve route identity early only when it is required for correctness or shell coherence.",{"type":43,"tag":69,"props":510,"children":511},{},[512],{"type":49,"value":513},"Pass request-dependent promises downward unawaited. Resolve them in the smallest component that needs them and place Suspense there.",{"type":43,"tag":69,"props":515,"children":516},{},[517],{"type":49,"value":518},"Use sibling boundaries for independent work. Do not put the whole page behind the slowest Shopify request.",{"type":43,"tag":69,"props":520,"children":521},{},[522],{"type":49,"value":523},"Give every visible fallback the same outer geometry as its resolved content.",{"type":43,"tag":69,"props":525,"children":526},{},[527],{"type":49,"value":528},"Keep components server-rendered by default. Do not move reads into client effects or internal HTTP endpoints.",{"type":43,"tag":69,"props":530,"children":531},{},[532],{"type":49,"value":533},"Keep cache policy in the data layer and personalized data out of shared caches.",{"type":43,"tag":69,"props":535,"children":536},{},[537],{"type":49,"value":538},"Treat prefetching as a traffic-versus-latency decision, not a default fix for blocking architecture.",{"type":43,"tag":58,"props":540,"children":542},{"id":541},"use-a-browser-feedback-loop",[543],{"type":49,"value":544},"Use a browser feedback loop",{"type":43,"tag":52,"props":546,"children":547},{},[548,550,556],{"type":49,"value":549},"For visible storefront changes, close the loop in a real browser before calling the work done. Use the agent's built-in browser when available; otherwise use the standalone ",{"type":43,"tag":75,"props":551,"children":553},{"className":552},[],[554],{"type":49,"value":555},"agent-browser",{"type":49,"value":557}," CLI.",{"type":43,"tag":65,"props":559,"children":560},{},[561,574,601,606,611,616],{"type":43,"tag":69,"props":562,"children":563},{},[564,566,572],{"type":49,"value":565},"Start the local storefront and open each affected route: ",{"type":43,"tag":75,"props":567,"children":569},{"className":568},[],[570],{"type":49,"value":571},"agent-browser open http:\u002F\u002Flocalhost:3000\u002F...",{"type":49,"value":573},".",{"type":43,"tag":69,"props":575,"children":576},{},[577,579,585,586,592,594,600],{"type":49,"value":578},"Capture the current state: ",{"type":43,"tag":75,"props":580,"children":582},{"className":581},[],[583],{"type":49,"value":584},"agent-browser wait --load networkidle",{"type":49,"value":115},{"type":43,"tag":75,"props":587,"children":589},{"className":588},[],[590],{"type":49,"value":591},"agent-browser snapshot",{"type":49,"value":593},", and ",{"type":43,"tag":75,"props":595,"children":597},{"className":596},[],[598],{"type":49,"value":599},"agent-browser screenshot --full",{"type":49,"value":573},{"type":43,"tag":69,"props":602,"children":603},{},[604],{"type":49,"value":605},"Exercise the commerce interaction through the UI: variant selection, filtering, pagination, add\u002Fupdate\u002Fremove cart, auth redirects, or the changed control.",{"type":43,"tag":69,"props":607,"children":608},{},[609],{"type":49,"value":610},"Re-snapshot after every navigation or DOM change before reusing element refs.",{"type":43,"tag":69,"props":612,"children":613},{},[614],{"type":49,"value":615},"Repeat on mobile and desktop viewports when layout, media, overlays, filters, cart, or primary actions changed.",{"type":43,"tag":69,"props":617,"children":618},{},[619,621,626],{"type":49,"value":620},"Iterate on the implementation until the browser outcome matches the intended commerce behavior. If ",{"type":43,"tag":75,"props":622,"children":624},{"className":623},[],[625],{"type":49,"value":555},{"type":49,"value":627}," is unavailable, say so and report the fallback checks used.",{"type":43,"tag":58,"props":629,"children":631},{"id":630},"verify-the-architecture",[632],{"type":49,"value":633},"Verify the architecture",{"type":43,"tag":52,"props":635,"children":636},{},[637],{"type":49,"value":638},"Run the static hotspot scan from the skill directory:",{"type":43,"tag":640,"props":641,"children":646},"pre",{"className":642,"code":643,"language":644,"meta":645,"style":645},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","node scripts\u002Faudit-storefront.mjs \u003Cstorefront-root>\n","bash","",[647],{"type":43,"tag":75,"props":648,"children":649},{"__ignoreMap":645},[650],{"type":43,"tag":651,"props":652,"children":655},"span",{"class":653,"line":654},"line",1,[656,662,668,674,679,685],{"type":43,"tag":651,"props":657,"children":659},{"style":658},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[660],{"type":49,"value":661},"node",{"type":43,"tag":651,"props":663,"children":665},{"style":664},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[666],{"type":49,"value":667}," scripts\u002Faudit-storefront.mjs",{"type":43,"tag":651,"props":669,"children":671},{"style":670},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[672],{"type":49,"value":673}," \u003C",{"type":43,"tag":651,"props":675,"children":676},{"style":664},[677],{"type":49,"value":678},"storefront-roo",{"type":43,"tag":651,"props":680,"children":682},{"style":681},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[683],{"type":49,"value":684},"t",{"type":43,"tag":651,"props":686,"children":687},{"style":670},[688],{"type":49,"value":689},">\n",{"type":43,"tag":52,"props":691,"children":692},{},[693],{"type":49,"value":694},"Treat its output as review prompts, not measurements. Then:",{"type":43,"tag":65,"props":696,"children":697},{},[698,703,708,713,725,730,735],{"type":43,"tag":69,"props":699,"children":700},{},[701],{"type":49,"value":702},"Run targeted lint, typecheck, tests, and affected flows available in the current environment.",{"type":43,"tag":69,"props":704,"children":705},{},[706],{"type":49,"value":707},"Test direct visits, client navigations, back\u002Fforward navigation, and URL round-trips for the routes changed.",{"type":43,"tag":69,"props":709,"children":710},{},[711],{"type":49,"value":712},"Verify that non-critical Shopify work does not delay the shell, primary media, selected price\u002Favailability, or primary interaction.",{"type":43,"tag":69,"props":714,"children":715},{},[716,718,723],{"type":49,"value":717},"Run every affected flow in ",{"type":43,"tag":75,"props":719,"children":721},{"className":720},[],[722],{"type":49,"value":299},{"type":49,"value":724},", including failure, empty, sold-out, and missing-media states.",{"type":43,"tag":69,"props":726,"children":727},{},[728],{"type":49,"value":729},"Inspect failed requests, layout shifts, LCP discovery, hydration, and interaction behavior when relevant.",{"type":43,"tag":69,"props":731,"children":732},{},[733],{"type":49,"value":734},"Require a production build only when build, prerendering, caching, bundling, deployment behavior, or release readiness is in scope.",{"type":43,"tag":69,"props":736,"children":737},{},[738],{"type":49,"value":739},"Use bundle analysis or deployed field data only for an explicit performance investigation when those tools and data are available. Do not request them as routine completion work or claim measured improvement from code inspection.",{"type":43,"tag":52,"props":741,"children":742},{},[743],{"type":49,"value":744},"Report the final layer boundaries, blocking dependencies, cache ownership, and remaining risks.",{"type":43,"tag":746,"props":747,"children":748},"style",{},[749],{"type":49,"value":750},"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":752,"total":853},[753,761,781,798,810,824,837],{"slug":4,"name":4,"fn":5,"description":6,"org":754,"tags":755,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[756,757,758,759,760],{"name":21,"slug":22,"type":13},{"name":15,"slug":16,"type":13},{"name":24,"slug":25,"type":13},{"name":18,"slug":19,"type":13},{"name":9,"slug":8,"type":13},{"slug":762,"name":762,"fn":763,"description":764,"org":765,"tags":766,"stars":26,"repoUrl":27,"updatedAt":780},"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},[767,770,773,776,779],{"name":768,"slug":769,"type":13},"Analytics","analytics",{"name":771,"slug":772,"type":13},"Marketing","marketing",{"name":774,"slug":775,"type":13},"Monitoring","monitoring",{"name":777,"slug":778,"type":13},"Performance","performance",{"name":9,"slug":8,"type":13},"2026-07-30T05:31:20.646283",{"slug":782,"name":782,"fn":783,"description":784,"org":785,"tags":786,"stars":26,"repoUrl":27,"updatedAt":797},"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},[787,788,790,793,794],{"name":24,"slug":25,"type":13},{"name":789,"slug":789,"type":13},"i18n",{"name":791,"slug":792,"type":13},"Next.js","next-js",{"name":9,"slug":8,"type":13},{"name":795,"slug":796,"type":13},"Web Development","web-development","2026-07-30T05:31:22.633341",{"slug":799,"name":799,"fn":800,"description":801,"org":802,"tags":803,"stars":26,"repoUrl":27,"updatedAt":809},"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},[804,805,806,807,808],{"name":15,"slug":16,"type":13},{"name":789,"slug":789,"type":13},{"name":771,"slug":772,"type":13},{"name":18,"slug":19,"type":13},{"name":9,"slug":8,"type":13},"2026-07-30T05:31:19.636559",{"slug":811,"name":811,"fn":812,"description":813,"org":814,"tags":815,"stars":26,"repoUrl":27,"updatedAt":823},"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},[816,819,820,821,822],{"name":817,"slug":818,"type":13},"Design","design",{"name":15,"slug":16,"type":13},{"name":24,"slug":25,"type":13},{"name":18,"slug":19,"type":13},{"name":9,"slug":8,"type":13},"2026-07-30T05:31:21.651736",{"slug":825,"name":825,"fn":826,"description":827,"org":828,"tags":829,"stars":26,"repoUrl":27,"updatedAt":836},"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},[830,833,834,835],{"name":831,"slug":832,"type":13},"CLI","cli",{"name":15,"slug":16,"type":13},{"name":9,"slug":8,"type":13},{"name":795,"slug":796,"type":13},"2026-06-20T07:52:13.955072",{"slug":838,"name":838,"fn":839,"description":840,"org":841,"tags":842,"stars":26,"repoUrl":27,"updatedAt":852},"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},[843,846,847,850,851],{"name":844,"slug":845,"type":13},"Documentation","documentation",{"name":15,"slug":16,"type":13},{"name":848,"slug":849,"type":13},"GraphQL","graphql",{"name":18,"slug":19,"type":13},{"name":9,"slug":8,"type":13},"2026-04-19T04:56:32.035454",8,{"items":855,"total":1022},[856,872,884,901,912,927,943,961,973,990,1002,1012],{"slug":857,"name":857,"fn":858,"description":859,"org":860,"tags":861,"stars":869,"repoUrl":870,"updatedAt":871},"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},[862,863,864,867,868],{"name":21,"slug":22,"type":13},{"name":24,"slug":25,"type":13},{"name":865,"slug":866,"type":13},"Migration","migration",{"name":791,"slug":792,"type":13},{"name":9,"slug":8,"type":13},141208,"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fnext.js","2026-07-24T05:38:30.118542",{"slug":873,"name":873,"fn":874,"description":875,"org":876,"tags":877,"stars":869,"repoUrl":870,"updatedAt":883},"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},[878,879,880,881,882],{"name":21,"slug":22,"type":13},{"name":24,"slug":25,"type":13},{"name":791,"slug":792,"type":13},{"name":777,"slug":778,"type":13},{"name":9,"slug":8,"type":13},"2026-07-30T05:31:10.674078",{"slug":885,"name":885,"fn":886,"description":887,"org":888,"tags":889,"stars":869,"repoUrl":870,"updatedAt":900},"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},[890,893,894,897,898,899],{"name":891,"slug":892,"type":13},"Debugging","debugging",{"name":24,"slug":25,"type":13},{"name":895,"slug":896,"type":13},"Local Development","local-development",{"name":791,"slug":792,"type":13},{"name":9,"slug":8,"type":13},{"name":795,"slug":796,"type":13},"2026-05-22T06:45:28.627735",{"slug":902,"name":902,"fn":903,"description":904,"org":905,"tags":906,"stars":869,"repoUrl":870,"updatedAt":911},"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},[907,908,909,910],{"name":24,"slug":25,"type":13},{"name":791,"slug":792,"type":13},{"name":777,"slug":778,"type":13},{"name":9,"slug":8,"type":13},"2026-07-30T05:31:11.591864",{"slug":913,"name":913,"fn":914,"description":915,"org":916,"tags":917,"stars":924,"repoUrl":925,"updatedAt":926},"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},[918,921,922],{"name":919,"slug":920,"type":13},"CI\u002FCD","ci-cd",{"name":777,"slug":778,"type":13},{"name":923,"slug":913,"type":13},"Turborepo",30809,"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fturborepo","2026-07-30T05:32:14.920116",{"slug":928,"name":928,"fn":929,"description":930,"org":931,"tags":932,"stars":940,"repoUrl":941,"updatedAt":942},"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},[933,936,939],{"name":934,"slug":935,"type":13},"AI SDK","ai-sdk",{"name":937,"slug":938,"type":13},"Testing","testing",{"name":9,"slug":8,"type":13},25670,"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fai","2026-04-06T18:55:51.318866",{"slug":944,"name":944,"fn":945,"description":946,"org":947,"tags":948,"stars":940,"repoUrl":941,"updatedAt":960},"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},[949,952,953,956,959],{"name":950,"slug":951,"type":13},"Agents","agents",{"name":934,"slug":935,"type":13},{"name":954,"slug":955,"type":13},"Harness","harness",{"name":957,"slug":958,"type":13},"SDK","sdk",{"name":9,"slug":8,"type":13},"2026-06-18T08:29:19.858737",{"slug":962,"name":962,"fn":963,"description":964,"org":965,"tags":966,"stars":940,"repoUrl":941,"updatedAt":972},"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},[967,968,971],{"name":934,"slug":935,"type":13},{"name":969,"slug":970,"type":13},"API Development","api-development",{"name":9,"slug":8,"type":13},"2026-04-06T18:55:47.45549",{"slug":974,"name":974,"fn":975,"description":976,"org":977,"tags":978,"stars":940,"repoUrl":941,"updatedAt":989},"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},[979,982,985,986],{"name":980,"slug":981,"type":13},"ADR","adr",{"name":983,"slug":984,"type":13},"Architecture","architecture",{"name":844,"slug":845,"type":13},{"name":987,"slug":988,"type":13},"Engineering","engineering","2026-04-06T18:55:50.043694",{"slug":935,"name":935,"fn":991,"description":992,"org":993,"tags":994,"stars":940,"repoUrl":941,"updatedAt":1001},"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},[995,996,997,1000],{"name":950,"slug":951,"type":13},{"name":934,"slug":935,"type":13},{"name":998,"slug":999,"type":13},"LLM","llm",{"name":9,"slug":8,"type":13},"2026-04-06T18:55:48.739463",{"slug":1003,"name":1003,"fn":1004,"description":1005,"org":1006,"tags":1007,"stars":940,"repoUrl":941,"updatedAt":1011},"capture-api-response-test-fixture","capture API response test fixtures","Capture API response test fixture.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1008,1009,1010],{"name":969,"slug":970,"type":13},{"name":937,"slug":938,"type":13},{"name":9,"slug":8,"type":13},"2026-04-06T18:55:56.374433",{"slug":1013,"name":1013,"fn":1014,"description":1015,"org":1016,"tags":1017,"stars":940,"repoUrl":941,"updatedAt":1021},"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},[1018,1019,1020],{"name":934,"slug":935,"type":13},{"name":937,"slug":938,"type":13},{"name":9,"slug":8,"type":13},"2026-04-06T18:55:55.088956",68]