@autono/create-open-pages 0.1.0 → 0.4.0

package/template/.agents/skills/shadcn/rules/icons.md

@@ -0,0 +1,101 @@
+# Icons
+
+**Always use the project's configured `iconLibrary` for imports.** Check the `iconLibrary` field from project context: `lucide` → `lucide-react`, `tabler` → `@tabler/icons-react`, etc. Never assume `lucide-react`.
+
+---
+
+## Icons in Button use data-icon attribute
+
+Add `data-icon="inline-start"` (prefix) or `data-icon="inline-end"` (suffix) to the icon. No sizing classes on the icon.
+
+**Incorrect:**
+
+```tsx
+<Button>
+  <SearchIcon className="mr-2 size-4" />
+  Search
+</Button>
+```
+
+**Correct:**
+
+```tsx
+<Button>
+  <SearchIcon data-icon="inline-start"/>
+  Search
+</Button>
+
+<Button>
+  Next
+  <ArrowRightIcon data-icon="inline-end"/>
+</Button>
+```
+
+---
+
+## No sizing classes on icons inside components
+
+Components handle icon sizing via CSS. Don't add `size-4`, `w-4 h-4`, or other sizing classes to icons inside `Button`, `DropdownMenuItem`, `Alert`, `Sidebar*`, or other shadcn components. Unless the user explicitly asks for custom icon sizes.
+
+**Incorrect:**
+
+```tsx
+<Button>
+  <SearchIcon className="size-4" data-icon="inline-start" />
+  Search
+</Button>
+
+<DropdownMenuItem>
+  <SettingsIcon className="mr-2 size-4" />
+  Settings
+</DropdownMenuItem>
+```
+
+**Correct:**
+
+```tsx
+<Button>
+  <SearchIcon data-icon="inline-start" />
+  Search
+</Button>
+
+<DropdownMenuItem>
+  <SettingsIcon />
+  Settings
+</DropdownMenuItem>
+```
+
+---
+
+## Pass icons as component objects, not string keys
+
+Use `icon={CheckIcon}`, not a string key to a lookup map.
+
+**Incorrect:**
+
+```tsx
+const iconMap = {
+  check: CheckIcon,
+  alert: AlertIcon,
+}
+
+function StatusBadge({ icon }: { icon: string }) {
+  const Icon = iconMap[icon]
+  return <Icon />
+}
+
+<StatusBadge icon="check" />
+```
+
+**Correct:**
+
+```tsx
+// Import from the project's configured iconLibrary (e.g. lucide-react, @tabler/icons-react).
+import { CheckIcon } from "lucide-react"
+
+function StatusBadge({ icon: Icon }: { icon: React.ComponentType }) {
+  return <Icon />
+}
+
+<StatusBadge icon={CheckIcon} />
+```

package/template/.agents/skills/shadcn/rules/styling.md

@@ -0,0 +1,185 @@
+# Styling & Customization
+
+See [customization.md](../customization.md) for theming, CSS variables, and adding custom colors.
+
+## Contents
+
+- Semantic colors
+- Built-in variants first
+- className for layout only
+- No space-x-* / space-y-*
+- Prefer size-* over w-* h-* when equal
+- Prefer truncate shorthand
+- No manual dark: color overrides
+- Use cn() for conditional classes
+- No manual z-index on overlay components
+- Use shimmer / scroll-fade utilities, not custom animations
+
+---
+
+## Semantic colors
+
+**Incorrect:**
+
+```tsx
+<div className="bg-blue-500 text-white">
+  <p className="text-gray-600">Secondary text</p>
+</div>
+```
+
+**Correct:**
+
+```tsx
+<div className="bg-primary text-primary-foreground">
+  <p className="text-muted-foreground">Secondary text</p>
+</div>
+```
+
+---
+
+## No raw color values for status/state indicators
+
+For positive, negative, or status indicators, use Badge variants, semantic tokens like `text-destructive`, or define custom CSS variables — don't reach for raw Tailwind colors.
+
+**Incorrect:**
+
+```tsx
+<span className="text-emerald-600">+20.1%</span>
+<span className="text-green-500">Active</span>
+<span className="text-red-600">-3.2%</span>
+```
+
+**Correct:**
+
+```tsx
+<Badge variant="secondary">+20.1%</Badge>
+<Badge>Active</Badge>
+<span className="text-destructive">-3.2%</span>
+```
+
+If you need a success/positive color that doesn't exist as a semantic token, use a Badge variant or ask the user about adding a custom CSS variable to the theme (see [customization.md](../customization.md)).
+
+---
+
+## Built-in variants first
+
+**Incorrect:**
+
+```tsx
+<Button className="border border-input bg-transparent hover:bg-accent">
+  Click me
+</Button>
+```
+
+**Correct:**
+
+```tsx
+<Button variant="outline">Click me</Button>
+```
+
+---
+
+## className for layout only
+
+Use `className` for layout (e.g. `max-w-md`, `mx-auto`, `mt-4`), **not** for overriding component colors or typography. To change colors, use semantic tokens, built-in variants, or CSS variables.
+
+**Incorrect:**
+
+```tsx
+<Card className="bg-blue-100 text-blue-900 font-bold">
+  <CardContent>Dashboard</CardContent>
+</Card>
+```
+
+**Correct:**
+
+```tsx
+<Card className="max-w-md mx-auto">
+  <CardContent>Dashboard</CardContent>
+</Card>
+```
+
+To customize a component's appearance, prefer these approaches in order:
+1. **Built-in variants** — `variant="outline"`, `variant="destructive"`, etc.
+2. **Semantic color tokens** — `bg-primary`, `text-muted-foreground`.
+3. **CSS variables** — define custom colors in the global CSS file (see [customization.md](../customization.md)).
+
+---
+
+## No space-x-* / space-y-*
+
+Use `gap-*` instead. `space-y-4` → `flex flex-col gap-4`. `space-x-2` → `flex gap-2`.
+
+```tsx
+<div className="flex flex-col gap-4">
+  <Input />
+  <Input />
+  <Button>Submit</Button>
+</div>
+```
+
+---
+
+## Prefer size-* over w-* h-* when equal
+
+`size-10` not `w-10 h-10`. Applies to icons, avatars, skeletons, etc.
+
+---
+
+## Prefer truncate shorthand
+
+`truncate` not `overflow-hidden text-ellipsis whitespace-nowrap`.
+
+---
+
+## No manual dark: color overrides
+
+Use semantic tokens — they handle light/dark via CSS variables. `bg-background text-foreground` not `bg-white dark:bg-gray-950`.
+
+---
+
+## Use cn() for conditional classes
+
+Use the `cn()` utility from the project for conditional or merged class names. Don't write manual ternaries in className strings.
+
+**Incorrect:**
+
+```tsx
+<div className={`flex items-center ${isActive ? "bg-primary text-primary-foreground" : "bg-muted"}`}>
+```
+
+**Correct:**
+
+```tsx
+import { cn } from "@/lib/utils"
+
+<div className={cn("flex items-center", isActive ? "bg-primary text-primary-foreground" : "bg-muted")}>
+```
+
+---
+
+## No manual z-index on overlay components
+
+`Dialog`, `Sheet`, `Drawer`, `AlertDialog`, `DropdownMenu`, `Popover`, `Tooltip`, `HoverCard` handle their own stacking. Never add `z-50` or `z-[999]`.
+
+---
+
+## Use shimmer / scroll-fade utilities, not custom animations
+
+For a live "thinking…" or loading-text shimmer, apply the `shimmer` utility. Don't author a custom `@keyframes` or a `bg-clip-text` gradient sweep.
+
+For scroll-aware edge fading on a scroll container, use `scroll-fade` (and the axis variants `scroll-fade-x` / `scroll-fade-b`). Don't hand-roll mask gradients. The chat components already apply these internally: `Attachment` shimmers its title during upload, and `MessageScrollerViewport` fades its edges.
+
+**Incorrect:**
+
+```tsx
+<span className="animate-pulse bg-gradient-to-r from-muted-foreground/40 via-foreground/70 to-muted-foreground/40 bg-clip-text text-transparent [animation:shimmer_1.6s_infinite]">
+  Thinking…
+</span>
+```
+
+**Correct:**
+
+```tsx
+<span className="shimmer">Thinking…</span>
+```

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

@@ -13,12 +13,34 @@
   },
   "dependencies": {
     "@autono/open-pages": "^0.0.6",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "@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"
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "vite": "^6.4.3",
+    "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>
   );