@thorprovider/create-storefront 0.1.1

package/skills/json-render-shadcn/SKILL.md

@@ -0,0 +1,159 @@
+---
+name: shadcn
+description: Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, adding standard UI components to a catalog, or building web UIs with Radix UI + Tailwind CSS components.
+---
+
+# @json-render/shadcn
+
+Pre-built shadcn/ui component definitions and implementations for json-render. Provides 36 components built on Radix UI + Tailwind CSS.
+
+## Two Entry Points
+
+| Entry Point | Exports | Use For |
+|-------------|---------|---------|
+| `@json-render/shadcn/catalog` | `shadcnComponentDefinitions` | Catalog schemas (no React dependency, safe for server) |
+| `@json-render/shadcn` | `shadcnComponents` | React implementations |
+
+## Usage Pattern
+
+Pick the components you need from the standard definitions. Do not spread all definitions -- explicitly select what your app uses:
+
+```typescript
+import { defineCatalog } from "@json-render/core";
+import { schema } from "@json-render/react/schema";
+import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
+import { defineRegistry } from "@json-render/react";
+import { shadcnComponents } from "@json-render/shadcn";
+
+// Catalog: pick definitions
+const catalog = defineCatalog(schema, {
+  components: {
+    Card: shadcnComponentDefinitions.Card,
+    Stack: shadcnComponentDefinitions.Stack,
+    Heading: shadcnComponentDefinitions.Heading,
+    Button: shadcnComponentDefinitions.Button,
+    Input: shadcnComponentDefinitions.Input,
+  },
+  actions: {},
+});
+
+// Registry: pick matching implementations
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: shadcnComponents.Card,
+    Stack: shadcnComponents.Stack,
+    Heading: shadcnComponents.Heading,
+    Button: shadcnComponents.Button,
+    Input: shadcnComponents.Input,
+  },
+});
+```
+
+> State actions (`setState`, `pushState`, `removeState`) are built into the React schema and handled by `ActionProvider` automatically. No need to declare them.
+
+## Extending with Custom Components
+
+Add custom components alongside standard ones:
+
+```typescript
+const catalog = defineCatalog(schema, {
+  components: {
+    // Standard
+    Card: shadcnComponentDefinitions.Card,
+    Stack: shadcnComponentDefinitions.Stack,
+
+    // Custom
+    Metric: {
+      props: z.object({
+        label: z.string(),
+        value: z.string(),
+        trend: z.enum(["up", "down", "neutral"]).nullable(),
+      }),
+      description: "KPI metric display",
+    },
+  },
+  actions: {},
+});
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: shadcnComponents.Card,
+    Stack: shadcnComponents.Stack,
+    Metric: ({ props }) => <div>{props.label}: {props.value}</div>,
+  },
+});
+```
+
+## Available Components
+
+### Layout
+- **Card** - Container with optional title, description, maxWidth, centered
+- **Stack** - Flex container with direction, gap, align, justify
+- **Grid** - Grid layout with columns (number) and gap
+- **Separator** - Visual divider with orientation
+
+### Navigation
+- **Tabs** - Tabbed navigation with tabs array, defaultValue, value
+- **Accordion** - Collapsible sections with items array and type (single/multiple)
+- **Collapsible** - Single collapsible section with title
+- **Pagination** - Page navigation with totalPages and page
+
+### Overlay
+- **Dialog** - Modal dialog with title, description, openPath
+- **Drawer** - Bottom drawer with title, description, openPath
+- **Tooltip** - Hover tooltip with content and text
+- **Popover** - Click-triggered popover with trigger and content
+- **DropdownMenu** - Dropdown with label and items array
+
+### Content
+- **Heading** - Heading text with level (h1-h4)
+- **Text** - Paragraph with variant (body, caption, muted, lead, code)
+- **Image** - Image with alt, width, height
+- **Avatar** - User avatar with src, name, size
+- **Badge** - Status badge with text and variant (default, secondary, destructive, outline)
+- **Alert** - Alert banner with title, message, type (success, warning, info, error)
+- **Carousel** - Scrollable carousel with items array
+- **Table** - Data table with columns (string[]) and rows (string[][])
+
+### Feedback
+- **Progress** - Progress bar with value, max, label
+- **Skeleton** - Loading placeholder with width, height, rounded
+- **Spinner** - Loading spinner with size and label
+
+### Input
+- **Button** - Button with label, variant (primary, secondary, danger), disabled
+- **Link** - Anchor link with label and href
+- **Input** - Text input with label, name, type, placeholder, value, checks
+- **Textarea** - Multi-line input with label, name, placeholder, rows, value, checks
+- **Select** - Dropdown select with label, name, options (string[]), value, checks
+- **Checkbox** - Checkbox with label, name, checked, checks, validateOn
+- **Radio** - Radio group with label, name, options (string[]), value, checks, validateOn
+- **Switch** - Toggle switch with label, name, checked, checks, validateOn
+- **Slider** - Range slider with label, min, max, step, value
+- **Toggle** - Toggle button with label, pressed, variant
+- **ToggleGroup** - Group of toggles with items, type, value
+- **ButtonGroup** - Button group with buttons array and selected
+
+## Built-in Actions (from `@json-render/react`)
+
+These are built into the React schema and handled by `ActionProvider` automatically. They appear in prompts without needing to be declared in the catalog.
+
+- **setState** - Set a value at a state path (`{ statePath, value }`)
+- **pushState** - Push a value onto an array (`{ statePath, value, clearStatePath? }`)
+- **removeState** - Remove an array item by index (`{ statePath, index }`)
+- **validateForm** - Validate all fields, write `{ valid, errors }` to state (`{ statePath? }`)
+
+## Validation Timing (`validateOn`)
+
+All form components support `validateOn` to control when validation runs:
+- `"change"` — validate on every input change (default for Select, Checkbox, Radio, Switch)
+- `"blur"` — validate when field loses focus (default for Input, Textarea)
+- `"submit"` — validate only on form submission
+
+## Important Notes
+
+- The `/catalog` entry point has no React dependency -- use it for server-side prompt generation
+- Components use Tailwind CSS classes -- your app must have Tailwind configured
+- Component implementations use bundled shadcn/ui primitives (not your app's `components/ui/`)
+- All form inputs support `checks` for validation (type + message pairs) and `validateOn` for timing
+- Events: inputs emit `change`/`submit`/`focus`/`blur`; buttons emit `press`; selects emit `change`/`select`

package/skills/json-render-solid/SKILL.md

@@ -0,0 +1,204 @@
+---
+name: solid
+description: SolidJS renderer for json-render. Use when building @json-render/solid catalogs/registries, wiring Renderer providers, implementing bindings/actions, or troubleshooting Solid-specific reactivity patterns.
+---
+
+# @json-render/solid
+
+`@json-render/solid` renders json-render specs into Solid component trees with fine-grained reactivity.
+
+## Quick Start
+
+```tsx
+import { Renderer, JSONUIProvider } from "@json-render/solid";
+import type { Spec } from "@json-render/solid";
+import { registry } from "./registry";
+
+export function App(props: { spec: Spec | null }) {
+  return (
+    <JSONUIProvider registry={registry} initialState={{}}>
+      <Renderer spec={props.spec} registry={registry} />
+    </JSONUIProvider>
+  );
+}
+```
+
+## Create a Catalog
+
+```typescript
+import { defineCatalog } from "@json-render/core";
+import { schema } from "@json-render/solid/schema";
+import { z } from "zod";
+
+export const catalog = defineCatalog(schema, {
+  components: {
+    Button: {
+      props: z.object({
+        label: z.string(),
+        variant: z.enum(["primary", "secondary"]).nullable(),
+      }),
+      description: "Clickable button",
+    },
+    Card: {
+      props: z.object({ title: z.string() }),
+      description: "Card container",
+    },
+  },
+  actions: {
+    submit: { description: "Submit data" },
+  },
+});
+```
+
+## Define Components
+
+Components receive `ComponentRenderProps` from the renderer:
+
+```ts
+interface ComponentRenderProps<P = Record<string, unknown>> {
+  element: UIElement<string, P>;
+  children?: JSX.Element;
+  emit: (event: string) => void;
+  on: (event: string) => EventHandle;
+  bindings?: Record<string, string>;
+  loading?: boolean;
+}
+```
+
+Example:
+
+```tsx
+import type { BaseComponentProps } from "@json-render/solid";
+
+export function Button(props: BaseComponentProps<{ label: string }>) {
+  return (
+    <button onClick={() => props.emit("press")}>{props.props.label}</button>
+  );
+}
+```
+
+## Create a Registry
+
+```typescript
+import { defineRegistry } from "@json-render/solid";
+import { catalog } from "./catalog";
+import { Card } from "./Card";
+import { Button } from "./Button";
+
+const { registry, handlers, executeAction } = defineRegistry(catalog, {
+  components: {
+    Card,
+    Button,
+  },
+  actions: {
+    submit: async (params, setState, state) => {
+      // custom action logic
+    },
+  },
+});
+```
+
+## Spec Structure
+
+```json
+{
+  "root": "card1",
+  "elements": {
+    "card1": {
+      "type": "Card",
+      "props": { "title": "Hello" },
+      "children": ["btn1"]
+    },
+    "btn1": {
+      "type": "Button",
+      "props": { "label": "Click me" },
+      "on": {
+        "press": { "action": "submit" }
+      }
+    }
+  }
+}
+```
+
+## Providers
+
+- `StateProvider`: state model read/write and controlled mode via `store`
+- `VisibilityProvider`: evaluates `visible` conditions
+- `ValidationProvider`: field validation + `validateForm` integration
+- `ActionProvider`: runs built-in and custom actions
+- `JSONUIProvider`: combined provider wrapper
+
+## Hooks
+
+- `useStateStore`, `useStateValue`, `useStateBinding`
+- `useVisibility`, `useIsVisible`
+- `useActions`, `useAction`
+- `useValidation`, `useOptionalValidation`, `useFieldValidation`
+- `useBoundProp`
+- `useUIStream`, `useChatUI`
+
+## Built-in Actions
+
+Handled automatically by `ActionProvider`:
+
+- `setState`
+- `pushState`
+- `removeState`
+- `validateForm`
+
+## Dynamic Props and Bindings
+
+Nested lists can set `repeat.statePath` to `{ "$item": "field" }` inside an enclosing repeat.
+
+Supported expression forms include:
+
+- `{"$state": "/path"}`
+- `{"$bindState": "/path"}`
+- `{"$bindItem": "field"}`
+- `{"$template": "Hi ${/user/name}"}`
+- `{"$computed": "fn", "args": {...}}`
+- `{"$cond": <condition>, "$then": <value>, "$else": <value>}`
+
+Use `useBoundProp` in components for writable bound values:
+
+```tsx
+import { useBoundProp } from "@json-render/solid";
+
+function Input(props: BaseComponentProps<{ value?: string }>) {
+  const [value, setValue] = useBoundProp(
+    props.props.value,
+    props.bindings?.value,
+  );
+  return (
+    <input
+      value={String(value() ?? "")}
+      onInput={(e) => setValue(e.currentTarget.value)}
+    />
+  );
+}
+```
+
+`useStateValue`, `useStateBinding`, and the `state` / `errors` / `isValid` fields from `useFieldValidation` are reactive accessors in Solid. Call them as functions inside JSX, `createMemo`, or `createEffect`.
+
+## Solid Reactivity Rules
+
+- Do not destructure component props in function signatures when values need to stay reactive.
+- Keep changing reads inside JSX expressions, `createMemo`, or `createEffect`.
+- Context values are exposed through getter-based objects so consumers always observe live signals.
+
+## Streaming UI
+
+```tsx
+import { useUIStream, Renderer } from "@json-render/solid";
+
+const stream = useUIStream({ api: "/api/generate-ui" });
+await stream.send("Create a support dashboard");
+
+<Renderer
+  spec={stream.spec}
+  registry={registry}
+  loading={stream.isStreaming}
+/>;
+```
+
+Use `useChatUI` for chat + UI generation flows.

package/skills/nextjs-shadcn/SKILL.md

@@ -0,0 +1,303 @@
+---
+name: nextjs-shadcn
+argument-hint: "[component or page]"
+description: Creates Next.js frontends with shadcn/ui. Use when building React UIs, components, pages, or applications with shadcn, Tailwind, or modern frontend patterns. Also use when the user asks to create a new Next.js project, add UI components, style pages, or build any web interface — even if they don't mention shadcn explicitly.
+---
+
+# Next.js + shadcn/ui
+
+Build distinctive, production-grade interfaces that avoid generic "AI slop" aesthetics.
+
+## Core Principles
+
+1. **Minimize noise** - Icons communicate; excessive labels don't
+2. **No generic AI-UI** - Avoid purple gradients, excessive shadows, predictable layouts
+3. **Context over decoration** - Every element serves a purpose
+4. **Theme consistency** - Use CSS variables from `globals.css`, never hardcode colors
+
+## Quick Start
+
+```bash
+bunx --bun shadcn@latest init --template next --base base
+```
+
+`--base` selects the primitive library: `base` (Base UI, the default since July
+2026), `radix` (projects already on Radix — still fully supported, not
+deprecated), or `aria` (React Aria). **The same component has different props per
+base** — Base UI composes with `render={<Link href="/" />}` where Radix uses
+`asChild` — and the docs are base-scoped (`/docs/components/base/sidebar` vs
+`/docs/components/radix/sidebar`).
+
+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
+```
+
+### 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
+```
+
+Run these instead of writing component code from memory. See
+[references/shadcn-platform.md](references/shadcn-platform.md) for the full CLI
+surface, typeset, and the shimmer/scroll-fade utilities.
+
+## Component Rules
+
+### Page Structure
+
+```tsx
+// page.tsx - content only, no layout chrome
+export default function Page() {
+  return (
+    <>
+      <HeroSection />
+      <Features />
+      <Testimonials />
+    </>
+  );
+}
+
+// layout.tsx - shared UI (header, footer, sidebar)
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Header />
+      <main>{children}</main>
+      <Footer />
+    </>
+  );
+}
+```
+
+### Client Boundaries
+
+- `"use client"` only at leaf components (smallest boundary)
+- Props must be serializable (data or Server Actions, no functions/classes)
+- Pass server content via `children`
+
+### Import Aliases
+
+Never use relative paths (`../../lib/utils`). Default to the `@/` alias
+(`@/lib/utils`) in new projects. In an existing project, read `components.json`
+and follow the alias style already configured — shadcn also supports Node
+package imports (`#components/ui/button`). Never mix both styles.
+
+### Style Merging
+
+```tsx
+import { cn } from "@/lib/utils";
+
+function Button({ className, ...props }) {
+  return <button className={cn("px-4 py-2 rounded", className)} {...props} />;
+}
+```
+
+## File Organization
+
+```
+app/
+├── (protected)/         # Auth required routes
+│   ├── dashboard/
+│   ├── settings/
+│   ├── components/      # Route-specific components
+│   └── lib/             # Route-specific utils/types
+├── (public)/            # Public routes
+│   ├── login/
+│   └── register/
+├── actions/             # Server Actions (global)
+├── api/                 # API routes
+├── layout.tsx           # Root layout
+└── globals.css          # Theme tokens
+components/              # Shared components
+├── ui/                  # shadcn primitives
+└── shared/              # Business components
+hooks/                   # Custom React hooks
+lib/                     # Shared utils
+data/                    # Database queries
+ai/                      # AI logic (tools, agents, prompts)
+```
+
+## Next.js 16 Features
+
+### Async Params
+
+```tsx
+export default async function Page({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<{ q?: string }>;
+}) {
+  const { id } = await params;
+  const { q } = await searchParams;
+}
+```
+
+### Data Fetching vs Server Actions
+
+**CRITICAL RULE:**
+- **Server Actions** = ONLY for mutations (create, update, delete)
+- **Data fetching** = In Server Components or `'use cache'` functions
+
+`"use cache"` (and `cacheTag`/`cacheLife`/`updateTag`) requires the Cache Components opt-in flag — Next.js 16 does not enable it by default:
+
+```ts
+// next.config.ts
+const nextConfig = { cacheComponents: true }
+```
+
+```tsx
+// ❌ WRONG: Server Action for data fetching
+"use server"
+export async function getUsers() {
+  return await db.users.findMany()
+}
+
+// ✅ CORRECT: Data function with caching
+// data/users.ts
+export async function getUsers() {
+  "use cache"
+  cacheTag("users")
+  cacheLife("hours")
+  return await db.users.findMany()
+}
+
+// ✅ CORRECT: Read cookies in Server Component directly
+export default async function Page() {
+  const theme = (await cookies()).get("theme")?.value ?? "light"
+  return <App theme={theme} />
+}
+```
+
+### Caching
+
+```tsx
+"use cache";
+
+import { cacheTag, cacheLife } from "next/cache";
+
+export async function getProducts() {
+  cacheTag("products");
+  cacheLife("hours");
+  return await db.products.findMany();
+}
+```
+
+### Server Actions (Mutations Only)
+
+```tsx
+"use server";
+
+import { updateTag, revalidateTag } from "next/cache";
+import { z } from "zod";
+
+const schema = z.object({
+  title: z.string().min(1),
+  content: z.string(),
+});
+
+export async function createPost(formData: FormData) {
+  // Always validate input
+  const parsed = schema.parse({
+    title: formData.get("title"),
+    content: formData.get("content"),
+  });
+
+  await db.insert(posts).values(parsed);
+  updateTag("posts"); // Read-your-writes
+  // Or SWR-style revalidation: revalidateTag("posts", "max")
+}
+```
+
+### Proxy API
+
+Use `proxy.ts` for request interception (replaces middleware). Place at project root:
+
+```tsx
+// proxy.ts (project root, same level as app/)
+import { NextResponse } from "next/server"
+import type { NextRequest } from "next/server"
+
+export function proxy(request: NextRequest) {
+  // Auth checks, redirects, etc.
+}
+
+export const config = {
+  matcher: ['/dashboard/:path*'],
+}
+```
+
+## Dev Tools (next-devtools-mcp)
+
+Next.js 16+ ships an MCP endpoint at `/_next/mcp` that exposes the dev server's
+internals to coding agents. When working in a Next.js 16 project, recommend the
+user add `next-devtools-mcp` to `.mcp.json`:
+
+```json filename=".mcp.json"
+{
+  "mcpServers": {
+    "next-devtools": {
+      "command": "npx",
+      "args": ["-y", "next-devtools-mcp@latest"]
+    }
+  }
+}
+```
+
+Tools it provides (when dev server is running):
+
+- `get_errors` — live build/runtime/type errors (esp. helpful for hydration mismatches)
+- `get_logs` — dev log file path (browser console + server output)
+- `get_routes` — all entry-point routes grouped by router type
+- `get_page_metadata` — route, components, rendering details for a specific page
+- `get_project_metadata` — project structure + dev server URL
+- `get_server_action_by_id` — locate Server Action source from its hashed ID
+- `get_compilation_issues` / `compile_route` — bundler warnings for the project,
+  or compile one route on demand without requesting it (Turbopack only)
+
+It also acts as a docs gateway: it points at the version-accurate docs shipped
+inside `node_modules/next/dist/docs/`, which beat any remembered API shape.
+
+Use these instead of asking the user to copy-paste error messages. Reference:
+[nextjs.org/docs/app/guides/mcp](https://nextjs.org/docs/app/guides/mcp).
+
+## Rendered markdown and loading states
+
+Don't hand-roll CSS for these — shadcn ships them:
+
+- **Rendered markdown / LLM output** → typeset. One owned CSS file, three
+  variables (`--typeset-size`, `--typeset-leading`, `--typeset-flow`), one
+  preset per context. Streaming-stable: new blocks don't restyle earlier ones.
+  ```tsx
+  <div className="typeset typeset-chat">{markdown}</div>
+  ```
+- **Indeterminate text state** ("Thinking…") → `className="shimmer"`. Use
+  `Skeleton` only for placeholders with a known shape; don't stack both.
+- **Soft scroll container edges** → `className="scroll-fade overflow-y-auto"`.
+
+Details and the full class tables: [references/shadcn-platform.md](references/shadcn-platform.md).
+
+## References
+
+- **Architecture**: [references/architecture.md](references/architecture.md) - Components, routing, Suspense, data patterns, AI directory structure
+- **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.
+- **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:
+
+- `bun install` (not npm install)
+- `bun add` (not npm install package)
+- `bunx --bun` (not npx)
+
+In an existing repo, respect the project's `packageManager` field and lockfile instead of switching to bun.