create-magic-storefront 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-magic-storefront",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Scaffold a Next.js storefront on the MagicStore Storefront API v2",
   "license": "MIT",
   "type": "module",

package/template/.claude/skills/storefront-design/SKILL.md

@@ -15,11 +15,17 @@ merchant's own store, not like a template and not like an AI landing page. The d
 server owns it: prices, stock, discounts, images, reviews. Design never invents or recomputes any of
 it.
 
-Two skills work together:
+The design skills work together (all in `.claude/skills/`):
 
 - **This skill** decides what a store needs and what is off limits.
-- **`design-taste-frontend`** (next to this one) supplies taste: the design read, the three dials,
-  the anti-slop rules (its Sections 0, 1, 4, 9). Load it too.
+- **`design-taste-frontend`** supplies taste: the design read, the three dials, the anti-slop
+  rules (its Sections 0, 1, 4, 9). Load it too.
+- **`web-interface-guidelines`**: keyboard, focus, forms, touch targets. Apply it to every
+  interactive part (options, cart, checkout, account).
+- **`vercel-react-best-practices`**: keep the design fast; server components stay server
+  components, no client JS for what CSS can do.
+- **`storefront-verify`**: run last. Screenshots of every page type at 390 and 1280px, checked
+  against the pre-flight below.
 
 When they disagree, **this skill wins**. The overrides are listed in [Overrides](#overrides).
 
@@ -161,3 +167,4 @@ Before calling a design done, tick every box:
 - [ ] Empty, error and not-found states styled, not bare text.
 - [ ] Taste skill Section 14 run for the home page and content pages.
 - [ ] `npm run typecheck`, `npm run build` and `npx create-magic-storefront check` pass.
+- [ ] `storefront-verify` done: every page type looked at, at 390 and 1280px.

package/template/.claude/skills/storefront-verify/SKILL.md

@@ -0,0 +1,85 @@
+---
+name: storefront-verify
+description: >-
+  Look at the storefront before calling visual work done: build it, run it against the real shop,
+  screenshot every page type at phone and desktop width, check the screenshots against the
+  `storefront-design` pre-flight and the Web Interface Guidelines, fix, repeat. Use after any change
+  to how the storefront looks or behaves (a design, a restyle, a new section or component), and
+  whenever asked to "check", "verify", "screenshot" or "show" the storefront.
+---
+
+# Verify the storefront
+
+Code that type-checks can still look broken. After visual work, **look at the result** before
+saying it is done. Never describe a page you have not looked at.
+
+## 1. Build and run
+
+```bash
+npm run typecheck
+npm run build
+npx create-magic-storefront check
+npm start -- -p 3100          # in the background; needs .env.local (MAGICSTORE_SHOP_DOMAIN)
+```
+
+A build or `check` failure is fixed first; screenshots of a broken build prove nothing. Stop the
+server when you are done.
+
+## 2. Pick the pages
+
+Real data only, from the running shop:
+
+| Page       | URL                                                               |
+| ---------- | ----------------------------------------------------------------- |
+| Home       | `/`                                                               |
+| Collection | the first `/collections/…` link in the home page's HTML           |
+| Product    | the first `/products/…` link, plus one sold out or with options if the shop has one |
+| Search     | `/search?q=<a word from a product title>` and one with no results |
+| Cart       | `/cart` (empty), then again after adding a product                |
+| Checkout   | `/checkout` with that cart                                        |
+| Not found  | `/products/this-does-not-exist`                                   |
+
+Never place an order while verifying: stop at the checkout form.
+
+## 3. Screenshot at two widths
+
+Phone **390×844** (also the Telegram Mini App) and desktop **1280×800**, full page.
+
+- With a browser tool in your environment (Playwright MCP, Chrome DevTools, Claude in Chrome), use
+  it: resize, navigate, screenshot. It can also click through the cart and read the console.
+- Otherwise, with the Playwright CLI (the first run downloads Chromium,
+  `npx -y playwright install chromium`):
+
+  ```bash
+  mkdir -p .screenshots
+  npx -y playwright screenshot --viewport-size "390,844" --full-page \
+    http://localhost:3100/ .screenshots/home-390.png
+  npx -y playwright screenshot --viewport-size "1280,800" --full-page \
+    http://localhost:3100/ .screenshots/home-1280.png
+  ```
+
+  Then open each image and look at it. `.screenshots/` is ignored by git.
+
+In a browser tool, also check each phone-width page for horizontal scroll:
+`document.documentElement.scrollWidth > window.innerWidth` must be `false`. And read the console:
+no errors, no hydration warnings.
+
+## 4. Check what you see
+
+For every screenshot, against `storefront-design`'s pre-flight:
+
+- Nothing overflows, overlaps or is cut off; no horizontal scroll at 390px.
+- Product page at 390×844: price and add to cart visible in the first screen.
+- Header readable on the merchant's colors; logo not stretched; badges readable.
+- Images keep their aspect ratio; a missing image shows the fallback, not a broken icon.
+- Empty cart, no search results and not found look designed, not like bare text.
+- Text is in the storefront's language, with no placeholder or invented copy.
+
+Then run a `web-interface-guidelines` review of the files you changed.
+
+## 5. Fix and repeat
+
+Fix what you found, rebuild, re-shoot only the affected pages. At most three rounds; if something
+still fails after that, report it with the screenshot's path instead of looping.
+
+Finish with a short report: pages checked, at which widths, what was fixed, what is left.