Royal Blue Pet Store

---
name: bs-royal-blue-pet-store
description: Build a complete multi-page pet store website with a royal-blue frame, blue serif headings, a golden-retriever hero, category tiles and seasonal pet banners. Includes catalogue, product, cart, checkout, care-guide and content pages with working controls, plus a reusable visual system for new brands and content.
---

# Royal Blue Pet Store

Build a premium, complete pet store: a white site inside a royal-blue frame,
blue Newsreader headings, a calm split hero with a golden-retriever portrait, six
category tiles, a royal seasonal banner and a comfort banner, one coherent
catalogue of product cut-outs, and a working shop (filters, variants, mini
cart, demo checkout). The worked example is the fictional Dunmere Pet Supply
with 39 routes. `references/template.html` is the visual and behavioural
blueprint: copy it for a single-file store, or translate it when the buyer
has a framework project.

## Workflow

### 1. Establish the content and output location

Read the target repository and its instructions first. Identify the brand,
audience, products, policies and pages needed. Ask only for information that
blocks progress; otherwise draft clearly fictional, specific content (real
sizes, materials, prices, cut-off times, addresses that are plausible but not
real businesses). Keep unrelated files intact; put a standalone site in its
own directory; never silently migrate an existing app to another framework.

### 2. Choose the deliverable

No existing project and no named stack: build **one self-contained HTML
file** from the template, like the store demo. This is the default; do not
ask a stack question. The buyer has a framework project or asks for one:
inspect it first, never silently migrate an application, and port per
`references/framework-adaptation.md` (Next.js App Router with TypeScript
when a framework is wanted but not named): real components, content modules
and framework routes. Never wrap the template in an iframe or inject it as
raw HTML; the hash router belongs to the single-file build only.

### 3. Read the visual system

Read `references/style-guide.md` and `references/visual-contract.md`, then
open `references/template.html` (it runs as-is; images sit in
`references/images/` and fonts load from the fontsource CDN). Note the tokens, type scale,
frame band, the hero's split card and type ceiling, banner masks and
grading, multiply product stages, radius scale and breakpoints. Keep these signature structures: `.frame-top` frame,
`.pet-hero`, `.cat-tile`, `.spring`, `.comfort`, `.cats`, `.p-card` with
`.wishlist`, the cart drawer. New copy may need a line-break tweak, never a
new style.

Fonts: Newsreader (variable, roman and italic) and Instrument Sans
(variable). The template loads them from the fontsource CDN. In a framework
project install `@fontsource-variable/newsreader` and
`@fontsource-variable/instrument-sans` or use `next/font/google`
(`Newsreader`, `Instrument_Sans`); for the single-file deliverable embed the
woff2 files as data URIs (see Single-file demo constraints).

### 4. Plan the page family

Read `references/page-library.md`, `references/route-inventory.md` and
`references/interior-pages.md`. List every nav item, tile, card, footer link
and form destination, and give each a real page. Products, categories,
articles, FAQ items and reviews live in typed data collections rendered by
small components. A detail page needs its own sections and a way back. Keep
a designed 404.

### 5. Plan and produce the images

Read `references/image-plan.md` before generating anything.

- Write one art direction for the whole site and assign every slot a role
  (hero, seasonal banner, comfort lifestyle, cat portrait, story, editorial,
  product cut-out) with an aspect and a crop focus.
- Generate products as one catalogue shoot: two products per sheet on
  seamless white, same light and angle; split into 720 x 900 crops with a
  consistent object scale; push the background to pure white; stage them on
  `--mist` with `mix-blend-mode: multiply`.
- Grade blue-backdrop photos to the brand royal so they melt into royal
  panels; fade photo edges into panels with a mask instead of hard seams.
- Look at every image before use. Regenerate anything with text, logos,
  artefacts, cut-off heads or paws, or a subject that does not match its text.
- One image per entity. Reuse a photo only for the same entity (an article's
  card and page; a banner as the "In use" view of the exact product shown).
- Export WebP; alt text describes the subject; set width/height; lazy-load
  below the fold.

### 6. Build the structure

Shared components: frame, header (sticky, condenses on scroll, active nav),
footer (columns, newsletter, legal), buttons, chips, fields, product card,
mini cart, drawers, dialog, toast. Semantic landmarks, skip link, one H1 per
route, labelled inputs, `aria-*` on custom widgets. Cart and saved items are
shared state; everything else stays local to its component.

### 7. Apply the motion system

Follow `references/motion-system.md`: CSS hero entrance under a second,
route fade + scroll to top + H1 focus, once-only reveals with a visible-by-
default fallback, 140ms press feedback, drawer sheets on the drawer curve,
commerce feedback (bag bump, quick-add check, button loading/success). Only
transform and opacity animate. Honour `prefers-reduced-motion`.

### 8. Wire every interaction

Use `references/quality-checklist.md` as the contract. At minimum: mobile
menu sheet with focus trap and Escape; shop filters with live counts, sort,
search, removable chips and an empty state; variants that change price and
handle sold out; quantity stepper; add to bag with loading and success;
mini-cart drawer with quantities, free-delivery meter and running subtotal;
bag page with promo code; demo checkout with validation, delivery method
totals, an explicit no-payment notice and a confirmation page; wishlist;
refill planner; FAQ accordion; review carousel with buttons, swipe and keys;
search dialog; contact and newsletter forms with inline errors and success.
Never claim a message was sent or a payment taken unless a real backend was
requested and connected.

### 9. Apply the icon grammar

Read `references/icon-library.md`. Inline SVG in Lucide grammar only (or
`lucide-react` in React). No emoji, dingbats, icon fonts or real company
logos. Icon-only buttons get state-aware accessible names.

### 10. Build and validate

Keep your source page next to an `images/` folder (copy the template there
with the images you use), then build the deliverable and validate it:

```bash
node scripts/inline-assets.mjs store/index.src.html store/index.html
node scripts/validate-design.mjs store/index.html
```

`inline-assets.mjs` embeds every `images/` file and the fontsource woff2
files named in `@font-face` as data URIs (it stops if a font cannot be
downloaded) and stores a repeated image once. The validator checks offline
self-containment, sandbox safety (network, dialogs, storage guards, native
submits), emoji and dashes, alt text, labels, landmarks, reduced motion,
focus styles, store structure (home and 404, at least 10 pages, a collection
with detail routes, every `#/` link and `data-nav` resolves, one h1 per
page), the signature structures and the size budget, and it fails if any of
the worked example's brand, people, address, phone or product names are
left. Flags: `--files` for a deployed site that keeps `images/` and
`fonts/` beside the page; `--template` for the template or your unbuilt
source; `--demo` only for the fictional store demo. For a framework output,
run the project's own type check and build instead.

### 11. Review in a real browser

Open home and every route family at 1440, 1024, 768 and 390 px. Compare the
frame, hero crop, heading scale and section rhythm with the template. Click
every control, try empty and invalid states, and check there is no horizontal
overflow, hidden content, covered text, blank image or console error. Take
screenshots, critique them as a demanding designer, fix, and look again.

### 12. Deliver clearly

Report the output path, the stack, what was validated programmatically and
what was reviewed in the browser. List every drafted fact the buyer must
confirm or replace (see below) and every stand-in image. Do not claim
deployment, publication, payments or rights clearance that did not happen.

## Adapting to a real brief

- **Counts flex; the grammar does not.** Products, categories, articles,
  FAQ topics and reviews are JS arrays (`PRODUCTS`, `CATEGORIES`,
  `ARTICLES`, `FAQ`, `QUOTES`); cards, filters, counts, search and detail
  routes render from them. Shop and related grids (`.p-grid`) wrap any
  number. The home `.cat-tiles` row renders one tile per category and is
  set for six (`repeat(6, ...)`, three per row below 1180 px, a swipe rail
  on phones): with four or five set `repeat(n, ...)` and keep the 1180 px
  rule at 2 or 3; with three, `repeat(3, ...)` at every width above the
  phone rail. Favourites show up to 8 (4 on the cat and new tabs): delete a
  `data-fav` tab whose filter would be empty (no cat products, no `isNew`). Also update `LOW`, `PLAN_ITEMS`, `CAT_GUIDE`, `FIT`, the
  drawer suggestions and each article's `products` when ids change.
- **Set the market first.** `SITE` and `MARKET` sit after `SHIP_NEXT` in
  the script: currency, locale, `tax.mode` (`none`, `added` for US-style
  sales tax, `included` for VAT/GST with an "Includes 20% VAT" line),
  postcode rule, order prefix, pickup point, cut-off. Then change the
  checkout's ZIP label, `inputmode`, error text and the State select to the
  market's own fields, and the static prices in the Replace checklist.
- **Map the sections to the business.** A cat-only boutique: drop the dog
  hero tiles and use the `.cats` edit as the second banner. A grooming salon
  or vet clinic that also sells: products stay in the shop, Refills become
  Memberships or Plans, the Delivery page becomes Services and prices, and
  the visit card and contact page carry bookings (a demo enquiry form, never
  a claimed booking). A food subscription brand: Refills lead the nav and
  the planner moves above the favourites.
- **Real facts only.** For a real business, prices, addresses, hours,
  delivery terms, reviews, staff, figures ("3,480 households") and dates
  come from the brief. Anything missing is drafted as clearly plausible
  placeholder copy and listed in the final reply. No invented vet
  endorsements, certifications, awards, regulatory, safety or sourcing
  claims; remove the "Reviewed by our vet nurse" perk unless it is true.
- **People and shop photos.** If the site presents real staff, a real shop
  or a real shop pet, ask for their photos. Generated stand-ins must be
  called out in the final reply.
- **Shipped images.** Reuse as neutral art: `hero-portrait` (the signature
  retriever), `cat-blue`, `banner-sundays` (comfort scene), and
  `journal-bath`, `journal-walk`, `journal-kitten` for articles on those
  subjects. Sample-specific, regenerate: `about-shop` (the sample's own shop
  and shop dog), `banner-spring` (the sample's raincoat product), and all
  fourteen `p-*.webp` cut-outs (the sample catalogue; never present them as
  the buyer's products). With a small image budget follow the priority
  order in `references/image-plan.md`.
- **Deliverable.** No project: the single HTML file built with
  `scripts/inline-assets.mjs`, safe in a sandboxed preview. A normal
  deployed site may keep `images/` and `fonts/` beside the page (validate
  with `--files`). A framework project: port per
  `references/framework-adaptation.md` with local image and font files.
- **Routes rename freely.** Change `data-page`, `data-title`, every
  `#/slug` in markup and script, `data-nav`, the router's `parts[0] ===`
  line for collections, `case` labels in `render()` and `NAV_OF`. New
  simple pages need only a `<section class="page" data-page="...">`.

## Replace checklist

Strings outside the data arrays and `SITE`/`MARKET`; the validator names any
sample leftover it finds.

- `<title>`, meta description, Open Graph tags, the header comment and every
  page's `data-title` ("| Dunmere Pet Supply").
- Brand word and `aria-label` in the header, footer and menu sheet; the
  footer address, phone, column headings, copyright and "Prices in USD";
  the menu-sheet address and opening line.
- Announcement bar and assurance strip ("Free delivery on orders over $75",
  "Pickup in two hours from ..."), the spring banner price ("From $58"),
  the visit card and its hours, the About story, figures and timeline.
- Delivery page fees, zones table and cut-off; the FAQ answers; Privacy and
  Terms (state, sales tax, contact email).
- Contact page address, hours, phone, email and the vet-nurse line; the
  contact form's topics and order-number placeholder.
- Checkout: ZIP label and message, State select, the static "$12.00"
  next-day fee and "Pickup on Alder Street" radio.
- Article authors, roles and dates in `ARTICLES`; reviewer names and pets in
  `QUOTES`; "Salem, Oregon" and other origin claims in product copy.

## Single-file constraints

The single-file store must: inline all CSS, JS, fonts and images (target
5 MB, cap 8 MB); make zero network requests; run inside
`<iframe sandbox="allow-scripts">` with route state held in JS and
`history` calls in try/catch; wrap storage in try/catch with an in-memory
fallback; use `type="button"` plus click and Enter handlers instead of
native form submission; avoid `alert`, `confirm`, `prompt` and `window.open`;
and intercept in-page anchors with `scrollIntoView`. `scripts/inline-assets.mjs`
downloads each fontsource woff2 named in the `@font-face` rules once and
inlines it as a `data:font/woff2;base64,` URI; if a download fails
(offline), it stops, so never ship a CDN link or a fallback font. Sandbox
restrictions apply when the page is previewed inside a sandboxed iframe (a
single-file demo). A deployed site or framework project does not need them.

## Files

- references/template.html: complete editable blueprint (vanilla HTML/CSS/JS).
- references/images/: the 22 WebP images the template uses.
- references/style-guide.md: identity, tokens, type, layout, components, do/don't.
- references/visual-contract.md: exact values for frame, hero, banners, imagery, grids.
- references/image-plan.md: art direction, slot table, prompts, post-processing.
- references/motion-system.md: motion tokens, reveal pattern, reduced motion.
- references/quality-checklist.md: pre-delivery checklist.
- references/page-library.md: page types and required content.
- references/route-inventory.md: all routes and routing rules.
- references/interior-pages.md: depth requirements for inner pages.
- references/framework-adaptation.md: stack choice and component mapping.
- references/reui-components.md: ReUI mapping for React outputs.
- references/icon-library.md: icon set and accessibility rules.
- scripts/inline-assets.mjs: builds the single file (images, CDN fonts as data URIs).
- scripts/validate-design.mjs: validator for your store (default), `--files`, `--template`, `--demo`.

<!-- reui:stack -->
#### Interface components come from ReUI (React outputs)

When the output is React or Next.js, every generic control (buttons, fields,
selects, radio groups, toggles, tabs, accordions, sheets, dialogs, toasts) is
a [ReUI](https://reui.io) component, not a hand-written control. The template
is vanilla HTML only so it can run as one file; `references/reui-components.md`
maps each of its controls to a ReUI component.

- Install from the official registry and use the real source
  (`npx shadcn@latest add @reui/button`, and so on). The source also lives
  at https://github.com/keenthemes/reui.
- Do not substitute a native `<select>`, a hand-rolled popover or a `div`
  styled to match. If a control needs behaviour ReUI lacks (the quantity
  stepper), build it explicitly and say so.
- Style through tokens, not forks: point ReUI's custom properties
  (`--primary`, `--background`, `--border`, `--radius`) at this palette and
  keep the template's class names on rendered controls.
- In a non-React stack, check ReUI's real support before promising it. Astro
  can mount React islands; Vue or Svelte cannot use ReUI directly. Raise the
  conflict rather than switching stacks or silently swapping libraries.
<!-- /reui:stack -->