@autono/create-open-pages 0.1.0 → 0.3.0

package/template/AGENTS.md

@@ -1,20 +1,23 @@
 # open-pages — Agent Guide
 
-You are authoring **web pages** in this repo. Every page is a React component rendered as a real web page — HTML JSX styled with Tailwind via `className`, with hooks, state, and browser APIs available. A page folder can hold an `index.html` instead when plain HTML is the better fit.
+You are authoring **web pages** in this repo. Every page is a React component rendered as a real web page — composed from the shadcn/ui components under `ui/`, styled with Tailwind via `className`, with hooks, state, and browser APIs available. A page folder can hold an `index.html` instead when plain HTML is the better fit.
 
 ## Hard rules
 
 - Put your page under `pages/<kebab-case-id>/`.
 - The entry is `pages/<id>/index.tsx` (or `pages/<id>/index.html`).
 - A page is its entry plus optional `components/`, `styles.css`, and `assets/` (images, fonts) inside its folder. Shared assets live in the root `assets/` folder (import via `@assets/...`).
-- Do **not** touch `package.json`, `open-pages.config.ts`, or other pages.
-- Do not add dependencies. Use only `react`, `react-dom`, and standard web APIs.
+- Use the shadcn components first: `import { Button } from '@/ui/button'`, `cn` from `@/lib/utils`. Use the semantic token classes (`bg-background`, `text-muted-foreground`, `bg-primary`) so themes apply.
+- Do **not** edit files under `ui/`, `lib/`, or `hooks/` for one page. They are shared by every page; wrap or extend a component inside the page instead.
+- Do **not** touch `package.json`, `open-pages.config.ts`, `components.json`, `styles/globals.css`, or other pages.
+- Do not add dependencies beyond what is installed. `npx shadcn@latest add` is fine for blocks and registry items.
 
 ## Which skill to use
 
 - **Drafting a new page** — use the `create-page` skill. It walks through scoping questions, structure, and hand-off.
 - **Applying inspector comments** (`@page-comment` markers in a page) — use the `apply-comments` skill.
-- **Creating or extracting a theme** — use the `create-theme` skill. Themes live as markdown under `themes/<id>.md` (with a `<id>.demo.tsx` preview) and are read by `create-page` before authoring.
+- **Creating or extracting a theme** — use the `create-theme` skill. A theme is `themes/<id>.md` plus `themes/<id>.css` (shadcn token overrides) and a `<id>.demo.tsx` preview; `create-page` reads it before authoring and a page opts in with `meta.theme`.
+- **shadcn CLI, registries, presets, component docs** — the bundled `shadcn` skill (the official one) covers `npx shadcn@latest search / view / docs / add / apply`.
 - **Resolving "this page" / "this element"** — when the user references the current page or selection without naming it, consult the `current-page` skill. It reads the dev server's `node_modules/.open-pages/current.json` to find which page and inspector-picked element they mean.
 - **Any other page edit** — read the `page-authoring` skill before writing. It is the technical reference for everything inside `pages/<id>/`: file contract, styling with Tailwind, layout and responsiveness, interactivity, assets and fonts, self-review checklist. `create-page` and `apply-comments` both defer to it for the *how*.
 

package/template/README.md

@@ -1,6 +1,17 @@
 # open-pages workspace
 
-Web pages as React components. Each page lives under `pages/<id>/index.tsx` and default-exports one component. The `@autono/open-pages` runtime handles Vite, React, Tailwind, the live preview, and the inspector — you just write the page.
+Web pages as React components. Each page lives under `pages/<id>/index.tsx` and default-exports one component, composed from the shadcn/ui set that ships under `ui/`. The `@autono/open-pages` runtime handles Vite, React, the live preview, and the inspector — you just write the page.
+
+```
+pages/            one folder per page
+ui/               all shadcn/ui components (import from @/ui/*)
+lib/utils.ts      cn()
+hooks/            use-mobile
+styles/globals.css  Tailwind v4 + shadcn tokens (:root / .dark)
+themes/           <id>.md + <id>.css + <id>.demo.tsx
+assets/           shared assets (import via @assets/...)
+components.json   shadcn config
+```
 
 ## Getting started
 
@@ -27,6 +38,7 @@ Then open `http://localhost:5173`, edit `pages/getting-started/index.tsx`, or cr
 ```tsx
 // pages/my-page/index.tsx
 import type { PageMeta } from '@autono/open-pages';
+import { Button } from '@/ui/button';
 
 export const meta: PageMeta = {
   title: 'My page',
@@ -35,15 +47,16 @@ export const meta: PageMeta = {
 
 export default function MyPage() {
   return (
-    <main className="mx-auto max-w-2xl px-6 py-24">
+    <main className="min-h-screen bg-background px-6 py-24 text-foreground">
       <h1 className="text-4xl font-bold tracking-tight">Hello</h1>
-      <p className="mt-4 text-slate-600">Tailwind via className, hooks, state, all of it.</p>
+      <p className="mt-4 text-muted-foreground">shadcn components, Tailwind, hooks, all of it.</p>
+      <Button className="mt-8">Get started</Button>
     </main>
   );
 }
 ```
 
-A page is a real web page: Tailwind v4 utilities via `className` work out of the box, `import './styles.css'` for custom CSS, hooks and event handlers for interactivity. Put images and fonts under `pages/<id>/assets/` and import them; shared assets go in the root `assets/` folder and import via `@assets/...`.
+A page is a real web page: every shadcn component is importable from `@/ui/<name>`, Tailwind v4 utilities via `className` work out of the box (prefer the token classes: `bg-background`, `text-muted-foreground`, `bg-primary`), `import './styles.css'` for custom CSS, hooks and event handlers for interactivity. `npx shadcn@latest add <block>` still works for blocks and other registries. Put images and fonts under `pages/<id>/assets/` and import them; shared assets go in the root `assets/` folder and import via `@assets/...`.
 
 A folder holding an `index.html` (with sibling CSS/JS) instead of `index.tsx` works too. It is served as-is and exported the same way.
 
@@ -74,3 +87,7 @@ export default openPagesConfig;
 ```
 
 Supported fields: `pagesDir`, `themesDir`, `assetsDir`, `port`, `base`, `allowedHosts`, `build`.
+
+## Themes
+
+A theme is `themes/<id>.md` (direction for the agent), `themes/<id>.css` (`:root` / `.dark` overrides of the shadcn tokens, optionally a Google Fonts `@import`), and `themes/<id>.demo.tsx` (a demo page). Set `meta.theme: '<id>'` on a page and the runtime injects that CSS into its preview and export. `npx shadcn@latest apply <code> --only theme,font` from [ui.shadcn.com/create](https://ui.shadcn.com/create) is a quick way to produce the tokens.

package/template/components.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": { "config": "", "css": "styles/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" },
+  "iconLibrary": "lucide",
+  "aliases": { "components": "@/components", "ui": "@/ui", "lib": "@/lib", "utils": "@/lib/utils", "hooks": "@/hooks" }
+}

package/template/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/template/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/template/package.json

@@ -14,11 +14,33 @@
   "dependencies": {
     "@autono/open-pages": "^0.0.6",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "@base-ui/react": "^1.7.0",
+    "@hookform/resolvers": "^5.9.1",
+    "@shadcn/react": "^0.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.5.0",
+    "lucide-react": "^1.35.0",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.6.7",
+    "react-day-picker": "^10.0.1",
+    "react-hook-form": "^7.86.0",
+    "react-resizable-panels": "^4.12.3",
+    "recharts": "3.8.0",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.6.0",
+    "vaul": "^1.1.2",
+    "zod": "^4.5.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "tailwindcss": "^4.2.2",
+    "typescript": "^5.9.3"
   }
 }

package/template/pages/getting-started/index.tsx

@@ -1,5 +1,8 @@
 import type { PageMeta } from '@autono/open-pages';
-import { useState } from 'react';
+import { Badge } from '@/ui/badge';
+import { Button } from '@/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/ui/tabs';
 
 export const meta: PageMeta = {
   title: 'Welcome to open-pages',
@@ -9,81 +12,84 @@ export const meta: PageMeta = {
 
 const steps = [
   {
+    id: 'describe',
     title: 'Describe',
     body: 'Tell your agent what the page is. It runs /create-page and writes the React.',
   },
   {
+    id: 'preview',
     title: 'Preview',
-    body: 'This workspace renders the real page in a real browser tab on every save.',
+    body: 'This workspace renders the real page in a real browser frame on every save.',
   },
   {
+    id: 'annotate',
     title: 'Annotate',
     body: 'Press i, click anything, leave a note. It lands in the source as a comment marker.',
   },
   {
+    id: 'ship',
     title: 'Ship',
     body: 'Your agent runs /apply-comments. open-pages export writes a static folder you can deploy anywhere.',
   },
 ];
 
 export default function GettingStarted() {
-  const [active, setActive] = useState(0);
-
   return (
-    <main className="min-h-screen bg-white text-slate-900 antialiased">
+    <main className="min-h-screen bg-background text-foreground antialiased">
       <section className="mx-auto max-w-3xl px-6 pt-24 pb-16">
-        <span className="text-xs font-semibold uppercase tracking-[0.2em] text-indigo-600">
-          open-pages
-        </span>
+        <Badge variant="secondary">open-pages</Badge>
         <h1 className="mt-4 text-5xl font-bold leading-[1.05] tracking-tight">
           The web page framework built for agents
         </h1>
-        <p className="mt-6 max-w-xl text-lg leading-relaxed text-slate-600">
+        <p className="mt-6 max-w-xl text-lg leading-relaxed text-muted-foreground">
           This page is a React component at{' '}
-          <code className="rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[0.9em]">
+          <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.9em]">
             pages/getting-started/index.tsx
           </code>
-          . Your coding agent writes it, the workspace previews it live, and the export is plain
-          HTML, CSS, and JS.
+          . Every shadcn/ui component is already installed under <code>ui/</code>. Your agent
+          composes them, the workspace previews the result live, and the export is plain HTML, CSS,
+          and JS.
         </p>
+        <div className="mt-8 flex gap-3">
+          <Button>Primary action</Button>
+          <Button variant="outline">Secondary</Button>
+          <Button variant="ghost">Ghost</Button>
+        </div>
       </section>
 
       <section className="mx-auto max-w-3xl px-6 pb-24">
-        <div className="grid gap-3 sm:grid-cols-4">
-          {steps.map((step, i) => (
-            <button
-              key={step.title}
-              type="button"
-              onClick={() => setActive(i)}
-              aria-pressed={active === i}
-              className={
-                active === i
-                  ? 'rounded-lg border border-indigo-600 bg-indigo-600 px-4 py-3 text-left text-white'
-                  : 'rounded-lg border border-slate-200 px-4 py-3 text-left transition-colors hover:border-slate-400'
-              }
-            >
-              <span className="block font-mono text-xs opacity-60">0{i + 1}</span>
-              <span className="mt-1 block font-semibold">{step.title}</span>
-            </button>
+        <Tabs defaultValue="describe">
+          <TabsList>
+            {steps.map((step, i) => (
+              <TabsTrigger key={step.id} value={step.id}>
+                <span className="font-mono text-xs opacity-60">0{i + 1}</span>
+                {step.title}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {steps.map((step) => (
+            <TabsContent key={step.id} value={step.id}>
+              <p className="mt-4 min-h-[3.5rem] text-base leading-relaxed">{step.body}</p>
+            </TabsContent>
           ))}
-        </div>
-        <p className="mt-6 min-h-[3.5rem] text-base leading-relaxed text-slate-700">
-          {steps[active].body}
-        </p>
+        </Tabs>
 
-        <div className="mt-16 rounded-xl bg-slate-50 p-6">
-          <h2 className="text-sm font-semibold uppercase tracking-wider text-slate-500">
-            Try the loop
-          </h2>
-          <ol className="mt-3 space-y-2 text-slate-700">
-            <li>1. Change any text in this file and watch the preview update.</li>
-            <li>2. Switch the viewport to mobile in the toolbar. The layout is responsive.</li>
-            <li>
-              3. Ask your agent for something bigger: a landing page, a pricing table, a whole new
-              page with <code className="font-mono">/create-page</code>.
-            </li>
-          </ol>
-        </div>
+        <Card className="mt-16">
+          <CardHeader>
+            <CardTitle>Try the loop</CardTitle>
+            <CardDescription>Three things to do in the next two minutes.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ol className="space-y-2 text-muted-foreground">
+              <li>1. Change any text in this file and watch the preview update.</li>
+              <li>2. Switch the viewport to mobile in the toolbar. The layout is responsive.</li>
+              <li>
+                3. Ask your agent for something bigger: a landing page, a pricing table, a whole new
+                page with <code className="font-mono">/create-page</code>.
+              </li>
+            </ol>
+          </CardContent>
+        </Card>
       </section>
     </main>
   );

package/template/styles/globals.css

@@ -0,0 +1,118 @@
+@import "tailwindcss" source(none);
+@source "../pages";
+@source "../ui";
+@source "../lib";
+@source "../hooks";
+@source "../themes";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --radius: 0.625rem;
+}
+
+.dark {
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+}
+
+@theme inline {
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+}

package/template/tsconfig.json

@@ -11,7 +11,18 @@
     "noEmit": true,
     "strict": true,
     "skipLibCheck": true,
-    "types": ["@autono/open-pages/env"]
+    "types": ["@autono/open-pages/env"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
-  "include": ["pages/**/*", "open-pages.config.ts"]
+  "include": [
+    "pages/**/*",
+    "ui/**/*",
+    "lib/**/*",
+    "hooks/**/*",
+    "themes/**/*",
+    "open-pages.config.ts"
+  ]
 }

package/template/ui/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }