@thorprovider/create-storefront 0.1.1 → 0.1.3

package/README.md

@@ -18,7 +18,7 @@ required at generation time.
 | Requirement | Supported |
 | --- | --- |
 | Node.js | >= 18.17.0 |
-| Package manager | pnpm (for generated projects) |
+| Package manager | Yarn (for generated projects) |
 | OpenCode | a version that supports project skills in `.opencode/skills/` |
 | OS | macOS, Linux, Windows (via WSL) |
 
@@ -27,7 +27,7 @@ required at generation time.
 From the root of the project where you want the commands available:
 
 ```bash
-pnpm dlx @thorprovider/create-storefront
+yarn dlx @thorprovider/create-storefront
 ```
 
 Or, once installed as a dependency:

package/package.json

@@ -1,11 +1,9 @@
 {
   "name": "@thorprovider/create-storefront",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Installable OpenCode command suite that scaffolds Thor Commerce json-render storefronts (Next.js, @thorprovider/blocks, @thorprovider/adapters, Medusa)",
   "type": "module",
-  "bin": {
-    "create-storefront": "./bin/install.js"
-  },
+  "bin": "./bin/install.js",
   "files": [
     "bin",
     "commands",
@@ -18,7 +16,8 @@
     "node": ">=18.17.0"
   },
   "scripts": {
-    "install:opencode": "node ./bin/install.js"
+    "install:opencode": "node ./bin/install.js",
+    "test": "vitest run --config vitest.config.ts"
   },
   "publishConfig": {
     "access": "public",
@@ -36,5 +35,8 @@
     "json-render",
     "scaffolding"
   ],
+  "devDependencies": {
+    "vitest": "^3.2.4"
+  },
   "license": "MIT"
-}
+}

package/skills/nextjs-shadcn/SKILL.md

@@ -18,7 +18,7 @@ Build distinctive, production-grade interfaces that avoid generic "AI slop" aest
 ## Quick Start
 
 ```bash
-bunx --bun shadcn@latest init --template next --base base
+yarn dlx shadcn@latest init --template next --base base
 ```
 
 `--base` selects the primitive library: `base` (Base UI, the default since July
@@ -31,14 +31,14 @@ base** — Base UI composes with `render={<Link href="/" />}` where Radix uses
 For a custom design system, generate a preset code in `shadcn/create` and apply it:
 
 ```bash
-bunx --bun shadcn@latest init --preset <CODE> --template next
+yarn dlx shadcn@latest init --preset <CODE> --template next
 ```
 
 ### Before touching an existing project
 
 ```bash
-bunx --bun shadcn@latest info --json      # base, framework, aliases, installed components
-bunx --bun shadcn@latest docs <component> # API reference resolved to THIS project's base
+yarn dlx shadcn@latest info --json      # base, framework, aliases, installed components
+yarn dlx shadcn@latest docs <component> # API reference resolved to THIS project's base
 ```
 
 Run these instead of writing component code from memory. See
@@ -288,16 +288,16 @@ Details and the full class tables: [references/shadcn-platform.md](references/sh
 - **Styling**: [references/styling.md](references/styling.md) - Themes, fonts, radius, animations, CSS variables
 - **shadcn Platform**: [references/shadcn-platform.md](references/shadcn-platform.md) - Base UI vs Radix vs React Aria, CLI verbs, typeset, shimmer, scroll-fade, RTL, package imports
 - **Sidebar**: [references/sidebar.md](references/sidebar.md) - shadcn sidebar with nested layouts, blocks, RTL
-- **Project Setup**: [references/project-setup.md](references/project-setup.md) - bun commands, presets
-- **Official shadcn skill**: `bunx --bun skills add shadcn/ui` - live project config + CLI/registry reference. Install alongside this skill; it covers CLI mechanics, this one covers conventions.
+- **Project Setup**: [references/project-setup.md](references/project-setup.md) - project commands, presets
+- **Official shadcn skill**: `yarn dlx skills add shadcn/ui` - live project config + CLI/registry reference. Install alongside this skill; it covers CLI mechanics, this one covers conventions.
 - **shadcn/ui**: [llms.txt](https://ui.shadcn.com/llms.txt) - fallback when the CLI isn't available; prefer `shadcn docs <component>`
 
 ## Package Manager
 
-**Always use bun** in new projects, never npm or npx:
+**Always use Yarn** in new projects, never npm or npx:
 
-- `bun install` (not npm install)
-- `bun add` (not npm install package)
-- `bunx --bun` (not npx)
+- `yarn install` (not npm install)
+- `yarn add <package>` (not npm install package)
+- `yarn dlx` (not npx)
 
-In an existing repo, respect the project's `packageManager` field and lockfile instead of switching to bun.
+In an existing repo, respect the project's `packageManager` field and lockfile rather than switching managers.

package/skills/sf-scaffold/SKILL.md

@@ -84,7 +84,7 @@ Report each check before proceeding.
 
 ### 4. Dependencies
 ```bash
-pnpm add @thorprovider/blocks @thorprovider/adapters @thorprovider/storefronts @json-render/core @json-render/react @json-render/next motion
+yarn add @thorprovider/blocks @thorprovider/adapters @thorprovider/storefronts @json-render/core @json-render/react @json-render/next motion
 ```
 
 ### 5. Copy templates
@@ -104,7 +104,7 @@ MEDUSA_PUBLISHABLE_KEY=
 If a brand color was given, follow `skills/shadcn-theming/SKILL.md` to update OKLCH light+dark pairs in `app/globals.css`.
 
 ### 8. Success
-Report created files and next steps (`pnpm dev`, then `/sf-add-view`, `/sf-theme`).
+Report created files and next steps (`yarn dev`, then `/sf-add-view`, `/sf-theme`).
 
 ## Error handling
 - Invalid name → re-prompt.

package/skills/sf-theme-gen/SKILL.md

@@ -30,7 +30,7 @@ Follow `skills/shadcn-theming/SKILL.md` for OKLCH pair rules and contrast.
 3. **Pairs**: every changed color gets its foreground pair in both modes; verify the lightness rule.
 4. **Typography**: load the font with `next/font` in `app/layout.tsx`; point `--font-sans` in `globals.css` at the new variable; keep body >= 1rem / line-height 1.5.
 5. **Identity**: update the `metadata` object in `app/layout.tsx` (title, description) and add Open Graph + Twitter Card fields. Research the current Next.js Metadata API before writing.
-6. **Verify**: run the dev server; confirm both color modes, font, and head metadata. `pnpm typecheck` passes.
+6. **Verify**: run the dev server; confirm both color modes, font, and head metadata. `yarn typecheck` passes.
 
 ## Error handling
 - Invalid color input → re-prompt (accept `<name>`, `#hex`, `oklch(...)`).

package/skills/sf-view-gen/SKILL.md

@@ -71,7 +71,7 @@ node recipes/validate.mjs resolve home hero showcase   # -> StorefrontHero2
    - Any chosen optional section → add its `elementType` element (from `sections.json`).
 5. Register new element `type`s in `catalog.ts` (zod props) and `registry.tsx` (map to the blocks component).
 6. Register the route+loader in `lib/<name>/spec/index.ts` and the loader in `runtime.ts` (data via `@thorprovider/storefronts/commerce`).
-7. Verify: `pnpm typecheck`; every new `type` present in catalog+registry; no non-blocks UI import; no direct HTTP.
+7. Verify: `yarn typecheck`; every new `type` present in catalog+registry; no non-blocks UI import; no direct HTTP.
 
 ## Modify workflow (`/sf-view`)
 
@@ -79,7 +79,7 @@ node recipes/validate.mjs resolve home hero showcase   # -> StorefrontHero2
 2. Read `lib/<name>/spec/<view>.ts` fully.
 3. Apply ONLY the change. Preserve ids, `type`, untouched `props`, `$state`, `on` wiring, route/loader/catalog/registry.
 4. If new blocks are needed, choose intents from `archetypes.json`, resolve to allowed variants, and validate before writing.
-5. Re-run `pnpm typecheck`.
+5. Re-run `yarn typecheck`.
 
 ## Generation headers
 Every generated/edited file gets:

package/templates/app/lib/__STOREFRONT__/spec/index.ts

@@ -32,16 +32,16 @@ export const __STOREFRONT_CAMEL__Spec: NextAppSpec = {
   state: {},
   layouts: {
     default: {
-      layout: {
-        root: 'layout',
-        elements: {
-          layout: {
-            type: 'Layout',
-            props: {},
-            slots: { header: [], footer: [] },
-            children: [],
-          },
+      root: 'layout',
+      elements: {
+        layout: {
+          type: 'Layout',
+          props: {},
+          children: ['slot'],
         },
+        // The page content is injected at the Slot element by @json-render/next.
+        // Without it the rendered layout drops the page and the store looks empty.
+        slot: { type: 'Slot', props: {}, children: [] },
       },
     },
   },