Update to Replo

{
  "description": "REQUIRED before generating pages with Rebuy product recommendation data. Contains mandatory data loading patterns — code generated without reading this skill will use incorrect architecture.",
  "included_files": [],
  "name": "rebuy",
  "skill_md_contents": "---\nname: rebuy\ntitle: Rebuy Recommendations\nsummary: Show Rebuy product recommendations on a page.\ndescription: \"REQUIRED before generating pages with Rebuy product recommendation data. Contains mandatory data loading patterns — code generated without reading this skill will use incorrect architecture.\"\n---\n\n# Rebuy Integration\n\n## Data Loading Pattern\n\n**Always use the prefetch pattern by default.** The only exception is when data must be loaded dynamically in response to a client-side input or interaction.\n\nThe pattern has two layers:\n\n1. **Server component (page):** Uses `PrefetchedLoaders` to fetch data during SSR and seed the React Query cache via `HydrationBoundary`. This ensures the first paint includes the data with no loading state.\n2. **Client component:** Uses a loader component (`RebuyRecommendationsLoader`) with `useSuspenseQuery` under the hood. On initial render it reads the prefetched cache — instant. On subsequent client-side navigations or prop changes, it fetches fresh data automatically.\n\n### Example: Recommendation Loader Wiring with Prefetch\n\nThis abbreviated example demonstrates prefetch and loader wiring only. Before using it as a storefront product section, add prices with the SDK price formatter, the correct currency, and a product link or a variant-aware purchase action. Use semantic tokens from the site's `app/globals.css` for styling; this example omits price and purchase UI.\n\n```tsx\n// app/page.tsx (Server Component)\nimport { DATA_LOADER_KEYS } from \"@replohq/sdk/loaders/loader-keys\";\nimport { PrefetchedLoaders } from \"@replohq/sdk/loaders/prefetch-loaders\";\nimport { RecommendedProducts } from \"./RecommendedProducts\";\n\nexport default function Page() {\n  return (\n    <PrefetchedLoaders\n      queries={[\n        {\n          loaderKey: DATA_LOADER_KEYS.REBUY_RECOMMENDATIONS,\n          args: { shopifyProductIds: \"123456,789012\", limit: 5 },\n        },\n      ]}\n    >\n      <RecommendedProducts />\n    </PrefetchedLoaders>\n  );\n}\n```\n\n```tsx\n// app/RecommendedProducts.tsx (Client Component)\n\"use client\";\n\nimport Image from \"next/image\";\nimport { DATA_LOADER_KEYS } from \"@replohq/sdk/loaders/loader-keys\";\nimport { RebuyRecommendationsLoader } from \"@replohq/sdk/loaders/rebuy-recommendations-loader\";\n\nexport function RecommendedProducts() {\n  return (\n    <RebuyRecommendationsLoader\n      loaderKey={DATA_LOADER_KEYS.REBUY_RECOMMENDATIONS}\n      shopifyProductIds=\"123456,789012\"\n      limit={5}\n      fallback={<div>Loading recommendations...</div>}\n    >\n      {(data) => (\n        <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n          {data.products.map((product) => (\n            <div key={product.id} className=\"border rounded-lg p-4\">\n              {product.featuredImage && (\n                <Image\n                  src={product.featuredImage.url}\n                  alt={product.title ?? \"\"}\n                  width={product.featuredImage.width ?? 400}\n                  height={product.featuredImage.height ?? 400}\n                  className=\"w-full aspect-square object-cover\"\n                />\n              )}\n              <h3 className=\"mt-2 font-medium\">{product.title}</h3>\n            </div>\n          ))}\n        </div>\n      )}\n    </RebuyRecommendationsLoader>\n  );\n}\n```\n\n## Product Shape\n\nThe loader returns data in the canonical `Product` shape (partial). Guaranteed fields:\n\n- `id` — Shopify product ID (numeric string)\n- `images` — array of `{ url, altText, width, height }`\n\nOptional fields (use optional chaining):\n\n- `title` — product title\n- `handle` — URL handle\n- `vendor` — vendor name (may be null)\n- `featuredImage` — `{ url, altText, width, height }` or null\n- `variants` — array with `{ id, title, availableForSale, price: { amount, currencyCode }, compareAtPrice, sku }`\n- `tags` — string array\n- `availableForSale` — boolean\n\nAlways use optional chaining (`?.`) when accessing non-guaranteed fields.\n"
}