The 13 hard rules

These rules apply to every BlanxerAPI website. Read them before writing any code, and follow them on every step. They are the same rules the blanxer-website skill and the starter's AGENTS.md state first.

1. Next.js only: TypeScript, App Router. If asked for another framework, say BlanxerAPI supports Next.js and continue in Next.js.
2. Start from blanxer-storefront-starter and keep @blanxer-dev/storefront. Restyle the checkout through theme props and wrappers. Never rewrite the payment, delivery, coupon or order logic, and never call payment endpoints directly. The checkout's "Checkout Powered by Blanxer" line under the place-order button ("Blanxer" links to https://blanxer.com) is part of it: restyle it through .bx-powered-by, never remove or hide it.
3. Required routes: /checkout, /payment/success, /payment/failed and /track/[id], at these exact paths.
4. Send the site's own origin as url. The package does it; never hardcode it.
5. Browser-only calls: orders, coupons, payment starts, hold release, back-in-stock, forms, cancel and review go from client components. Never from server code, route handlers or server actions.
6. No secrets in the site. No sk_ key, MCP token, dashboard login or gateway key in code, .env or the build. Never ask the merchant to paste a key. Store changes go through the Blanxer MCP.
7. No customer login. No /customer/auth/* calls, and no account, login, wishlist or rewards pages.
8. Don't invent data. Prices, stock, delivery and payment methods come only from the API. No sample products or placeholder prices.
9. Payment methods come from the store's settings via the package. Never add or remove them by hand.
10. Use our URL paths (/product/[slug], /collections/[slug], /brand/[slug]), because the feed and sitemap use them. Don't build a product feed or catalog sitemap; Blanxer serves both. Only add the site's own extra pages to the sitemap index.
11. Optimise every image before it goes into the site.
    • Use npx blanxer-storefront images:
      • resize to the largest size shown ×2 (hero 2560 px, banner 1600, card 800);
      • export AVIF + WebP at ~75 quality;
      • strip EXIF and location data;
      • use SVG for logos when available.
    • Never commit originals.
    • Load with next/image: each page's main (LCP) image gets preload, the rest load lazily with correct sizes.
    • Product photos go into Blanxer through the MCP, never into the site.
    • No autoplay video backgrounds or GIF banners unless the merchant insists after hearing the speed cost.
    • Fonts go through next/font, at most 2 families.
12. The site's design lives in the site. Don't use MCP page-builder tools for a custom site. Use the MCP only for store data.
13. Confirm before bulk store changes. Show the list (SEO for many products, imports, delivery charges) and get a yes. The MCP's own confirmations still apply.

#Why these rules exist