opencodekit 0.15.1 → 0.15.2

package/dist/template/.opencode/skill/frontend-design/references/shadcn/core-components.md

@@ -0,0 +1,153 @@
+# shadcn/ui Core Components
+
+Button, Card, Dialog, Select, Tabs, Toast, Command, Sidebar, Table.
+
+## Button
+
+```tsx
+import { Button } from "@/components/ui/button"
+
+<Button variant="default">Default</Button>
+<Button variant="destructive">Delete</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="link">Link</Button>
+
+<Button size="sm">Small</Button>
+<Button size="lg">Large</Button>
+<Button size="icon"><Icon /></Button>
+```
+
+## Card
+
+```tsx
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
+
+<Card>
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Description</CardDescription>
+  </CardHeader>
+  <CardContent>Content</CardContent>
+  <CardFooter><Button>Action</Button></CardFooter>
+</Card>
+```
+
+## Dialog
+
+```tsx
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+
+<Dialog>
+  <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you sure?</DialogTitle>
+      <DialogDescription>Cannot be undone.</DialogDescription>
+    </DialogHeader>
+    <DialogFooter><Button>Confirm</Button></DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+## Select
+
+```tsx
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select"
+
+<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Theme" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="light">Light</SelectItem>
+    <SelectItem value="dark">Dark</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+## Tabs
+
+```tsx
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+
+<Tabs defaultValue="account">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">Account settings</TabsContent>
+  <TabsContent value="password">Password settings</TabsContent>
+</Tabs>
+```
+
+## Toast (Sonner)
+
+```tsx
+import { toast } from "sonner"
+
+toast("Event created")
+toast.success("Saved")
+toast.error("Failed")
+toast.promise(saveData(), { loading: "Saving...", success: "Done!", error: "Error" })
+```
+
+## Command
+
+```tsx
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@/components/ui/command"
+
+<Command>
+  <CommandInput placeholder="Search..." />
+  <CommandList>
+    <CommandEmpty>No results.</CommandEmpty>
+    <CommandGroup heading="Suggestions">
+      <CommandItem>Calendar</CommandItem>
+      <CommandItem>Search</CommandItem>
+    </CommandGroup>
+  </CommandList>
+</Command>
+```
+
+## Sidebar
+
+```tsx
+import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton } from "@/components/ui/sidebar"
+
+<Sidebar>
+  <SidebarContent>
+    <SidebarGroup>
+      <SidebarGroupLabel>App</SidebarGroupLabel>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton asChild>
+            <a href="/dashboard"><HomeIcon />Dashboard</a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  </SidebarContent>
+</Sidebar>
+```
+
+## Table
+
+```tsx
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table"
+
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Status</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>John</TableCell>
+      <TableCell>Active</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```

package/dist/template/.opencode/skill/frontend-design/references/shadcn/form-components.md

@@ -0,0 +1,158 @@
+# shadcn/ui Form Components
+
+Form, Field, Input Group, and new 2026 components.
+
+## Form (React Hook Form + Zod)
+
+```tsx
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
+
+const schema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8)
+})
+
+function LoginForm() {
+  const form = useForm({ resolver: zodResolver(schema), defaultValues: { email: "", password: "" } })
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
+        <FormField control={form.control} name="email" render={({ field }) => (
+          <FormItem>
+            <FormLabel>Email</FormLabel>
+            <FormControl><Input type="email" {...field} /></FormControl>
+            <FormMessage />
+          </FormItem>
+        )} />
+        <Button type="submit">Sign In</Button>
+      </form>
+    </Form>
+  )
+}
+```
+
+## Field (2026)
+
+Simpler form abstraction:
+
+```tsx
+import { Field, FieldLabel, FieldDescription, FieldGroup, FieldSet } from "@/components/ui/field"
+
+<FieldSet>
+  <FieldGroup>
+    <Field>
+      <FieldLabel htmlFor="email">Email</FieldLabel>
+      <Input id="email" type="email" />
+      <FieldDescription>Never shared.</FieldDescription>
+    </Field>
+    <Field orientation="horizontal">
+      <Checkbox id="terms" />
+      <FieldLabel htmlFor="terms">Accept terms</FieldLabel>
+    </Field>
+  </FieldGroup>
+</FieldSet>
+
+<!-- Responsive layout -->
+<Field orientation="responsive">
+  <FieldContent>
+    <FieldLabel>Name</FieldLabel>
+    <FieldDescription>Display name</FieldDescription>
+  </FieldContent>
+  <Input placeholder="Evil Rabbit" />
+</Field>
+```
+
+## Input Group (2026)
+
+```tsx
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton } from "@/components/ui/input-group"
+
+<InputGroup>
+  <InputGroupAddon><SearchIcon /></InputGroupAddon>
+  <InputGroupInput placeholder="Search..." />
+</InputGroup>
+
+<InputGroup>
+  <InputGroupAddon>https://</InputGroupAddon>
+  <InputGroupInput placeholder="example.com" />
+  <InputGroupAddon align="inline-end">
+    <InputGroupButton>Go</InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```
+
+## Spinner (2026)
+
+```tsx
+import { Spinner } from "@/components/ui/spinner"
+
+<Spinner />
+
+<Button disabled>
+  <Spinner />Loading...
+</Button>
+```
+
+## Kbd (2026)
+
+```tsx
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
+
+<KbdGroup>
+  <Kbd>Cmd</Kbd>
+  <Kbd>K</Kbd>
+</KbdGroup>
+```
+
+## Button Group (2026)
+
+```tsx
+import { ButtonGroup } from "@/components/ui/button-group"
+
+<ButtonGroup>
+  <Button>Archive</Button>
+  <Button>Report</Button>
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <Button size="icon"><MoreIcon /></Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>...</DropdownMenuContent>
+  </DropdownMenu>
+</ButtonGroup>
+```
+
+## Item (2026)
+
+```tsx
+import { Item, ItemContent, ItemMedia, ItemTitle, ItemDescription, ItemActions } from "@/components/ui/item"
+
+<Item variant="outline">
+  <ItemMedia variant="icon"><UserIcon /></ItemMedia>
+  <ItemContent>
+    <ItemTitle>Profile</ItemTitle>
+    <ItemDescription>Manage account</ItemDescription>
+  </ItemContent>
+  <ItemActions><Button size="sm">Edit</Button></ItemActions>
+</Item>
+
+<Item asChild>
+  <a href="/dashboard"><ItemContent><ItemTitle>Dashboard</ItemTitle></ItemContent></a>
+</Item>
+```
+
+## Empty (2026)
+
+```tsx
+import { Empty, EmptyIcon, EmptyTitle, EmptyDescription, EmptyActions } from "@/components/ui/empty"
+
+<Empty>
+  <EmptyIcon><InboxIcon /></EmptyIcon>
+  <EmptyTitle>No messages</EmptyTitle>
+  <EmptyDescription>Send your first message.</EmptyDescription>
+  <EmptyActions><Button>New Message</Button></EmptyActions>
+</Empty>
+```

package/dist/template/.opencode/skill/frontend-design/references/shadcn/setup.md

@@ -0,0 +1,69 @@
+# shadcn/ui Setup
+
+CLI v3.6.x (current: v3.6.3) - Copy-paste components, Radix UI + Tailwind v4.
+
+## New Project
+
+```bash
+npx shadcn create
+```
+
+Interactive setup:
+- Visual style: Vega, Nova, Maia, Lyra, Mira
+- Component library: Radix UI or Base UI
+- Icon library (including Phosphor)
+- Next.js 16 support
+
+## Existing Project
+
+```bash
+npx shadcn@latest init
+npx shadcn@latest add button card dialog
+npx shadcn@latest add --all
+```
+
+Components install to `components/ui/`.
+
+## Visual Styles
+
+| Style | Description |
+|-------|-------------|
+| **Vega** | Classic shadcn look |
+| **Nova** | Reduced padding, compact |
+| **Maia** | Soft, rounded, generous |
+| **Lyra** | Boxy, sharp, mono fonts |
+| **Mira** | Compact, dense interfaces |
+
+## Component Libraries
+
+- **Radix UI** (default): Full accessibility, React-only
+- **Base UI**: MUI unstyled components
+
+Select during `npx shadcn create` or in `components.json`.
+
+## MCP Server Support
+
+- OpenCode MCP (v3.6.3)
+- Codex MCP (v3.4.0)
+
+## Registry System
+
+- Registry Directory: https://ui.shadcn.com/docs/directory
+- Custom registries via `components.json`
+- Namespaced components
+
+## Component List
+
+**Layout**: Card, Sidebar, Separator, Resizable, Scroll Area
+
+**Forms**: Button, Input, Textarea, Select, Checkbox, Radio Group, Switch, Slider, Form, Field, Input Group, Label
+
+**Feedback**: Alert, Alert Dialog, Dialog, Drawer, Sheet, Toast (Sonner), Progress, Spinner, Skeleton
+
+**Navigation**: Tabs, Accordion, Breadcrumb, Navigation Menu, Menubar, Pagination, Command
+
+**Data Display**: Table, Avatar, Badge, Hover Card, Tooltip, Calendar, Carousel, Chart
+
+**Overlay**: Dropdown Menu, Context Menu, Popover, Collapsible
+
+**Other**: Toggle, Toggle Group, Kbd, Button Group, Item, Empty, Input OTP

package/dist/template/.opencode/skill/frontend-design/references/shadcn/theming.md

@@ -0,0 +1,152 @@
+# shadcn/ui Theming
+
+CSS variables, OKLCH colors, dark mode for Tailwind v4.
+
+## CSS Variables
+
+```css
+@import "tailwindcss";
+
+@theme {
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.15 0.02 264);
+  
+  --color-primary: oklch(0.55 0.22 264);
+  --color-primary-foreground: oklch(0.98 0.01 264);
+  
+  --color-secondary: oklch(0.96 0.01 264);
+  --color-secondary-foreground: oklch(0.15 0.02 264);
+  
+  --color-muted: oklch(0.96 0.01 264);
+  --color-muted-foreground: oklch(0.55 0.02 264);
+  
+  --color-destructive: oklch(0.55 0.22 25);
+  --color-border: oklch(0.90 0.01 264);
+  --color-ring: oklch(0.55 0.22 264);
+  
+  --radius: 0.5rem;
+}
+```
+
+## OKLCH Format
+
+```
+oklch(L C H)
+     │ │ └─ Hue (0-360)
+     │ └─── Chroma (0-0.4)
+     └───── Lightness (0-1)
+```
+
+Benefits: perceptually uniform, wider P3 gamut, better gradients.
+
+```css
+--color-brand-50: oklch(0.98 0.02 250);
+--color-brand-500: oklch(0.65 0.22 250);
+--color-brand-900: oklch(0.25 0.15 250);
+```
+
+## Dark Mode Setup
+
+```bash
+npm install next-themes
+```
+
+```tsx
+// components/theme-provider.tsx
+"use client"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({ children, ...props }) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
+
+// app/layout.tsx
+<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+  {children}
+</ThemeProvider>
+```
+
+## Theme Toggle
+
+```tsx
+import { useTheme } from "next-themes"
+
+export function ThemeToggle() {
+  const { setTheme, theme } = useTheme()
+  return (
+    <Button variant="ghost" size="icon" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
+      <Sun className="h-5 w-5 dark:hidden" />
+      <Moon className="h-5 w-5 hidden dark:block" />
+    </Button>
+  )
+}
+```
+
+## Dark Mode Colors
+
+```css
+.dark {
+  --color-background: oklch(0.15 0.02 264);
+  --color-foreground: oklch(0.98 0.01 264);
+  --color-primary: oklch(0.75 0.18 264);
+  --color-muted: oklch(0.25 0.02 264);
+  --color-border: oklch(0.30 0.02 264);
+}
+```
+
+## Multiple Themes
+
+```css
+[data-theme="violet"] { --color-primary: oklch(0.55 0.25 290); }
+[data-theme="rose"] { --color-primary: oklch(0.60 0.22 350); }
+```
+
+```tsx
+<div data-theme="violet"><Button>Violet</Button></div>
+```
+
+## Custom Button Variants
+
+```tsx
+const buttonVariants = cva("...", {
+  variants: {
+    variant: {
+      gradient: "bg-gradient-to-r from-violet-500 to-pink-500 text-white",
+      glass: "bg-white/10 backdrop-blur-md border border-white/20",
+    },
+    size: {
+      xl: "h-14 rounded-lg px-10 text-lg",
+    },
+  },
+})
+```
+
+## Radius
+
+```css
+@theme {
+  --radius: 0.5rem;    /* Default */
+  /* --radius: 0rem;   /* Sharp */
+  /* --radius: 1rem;   /* Rounded */
+}
+```
+
+Components use: `rounded-lg` (--radius), `rounded-md` (--radius - 2px).
+
+## Typography
+
+```css
+@theme {
+  --font-sans: "Inter", system-ui, sans-serif;
+  --font-display: "Playfair Display", serif;
+  --font-mono: "JetBrains Mono", monospace;
+}
+```
+
+## Best Practices
+
+1. Use CSS variables for runtime switching
+2. OKLCH for gradients and accessibility
+3. Semantic naming (primary, not blue)
+4. Test both themes
+5. Maintain WCAG AA contrast (4.5:1)

package/dist/template/.opencode/skill/frontend-design/references/tailwind/responsive.md

@@ -0,0 +1,112 @@
+# Tailwind Responsive Design
+
+Mobile-first breakpoints, container queries.
+
+## Mobile-First
+
+Base styles apply to all. Breakpoint prefixes override at larger sizes.
+```html
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
+```
+
+## Breakpoints
+
+| Prefix | Min Width |
+|--------|-----------|
+| `sm:` | 640px |
+| `md:` | 768px |
+| `lg:` | 1024px |
+| `xl:` | 1280px |
+| `2xl:` | 1536px |
+
+Custom (v4):
+```css
+@theme {
+  --breakpoint-3xl: 1920px;
+}
+```
+
+## Common Patterns
+
+```html
+<!-- Stack to row -->
+<div class="flex flex-col lg:flex-row gap-4">
+
+<!-- Grid columns -->
+<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
+
+<!-- Visibility -->
+<div class="hidden lg:block">Desktop only</div>
+<div class="block lg:hidden">Mobile only</div>
+
+<!-- Typography -->
+<h1 class="text-2xl md:text-4xl lg:text-6xl">
+
+<!-- Spacing -->
+<div class="p-4 md:p-6 lg:p-8">
+
+<!-- Width -->
+<div class="w-full lg:w-1/2 xl:w-1/3">
+```
+
+## Layout Examples
+
+### Sidebar
+```html
+<div class="flex flex-col lg:flex-row min-h-screen">
+  <aside class="w-full lg:w-64 bg-gray-100 p-4">Sidebar</aside>
+  <main class="flex-1 p-4 md:p-8">Main</main>
+</div>
+```
+
+### Card Grid
+```html
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
+  <div class="bg-white rounded-lg shadow p-6">Card</div>
+</div>
+```
+
+### Navigation
+```html
+<nav class="flex items-center justify-between h-16">
+  <div class="text-xl font-bold">Logo</div>
+  <div class="hidden md:flex gap-6">Links</div>
+  <button class="md:hidden">Menu</button>
+</nav>
+```
+
+## Max-Width Queries
+
+```html
+<div class="max-lg:text-center">Below lg</div>
+<div class="max-sm:hidden">Below sm</div>
+```
+
+## Container Queries (v4)
+
+Style based on container, not viewport:
+```html
+<div class="@container">
+  <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-4">
+</div>
+```
+
+Breakpoints: `@sm:`, `@md:`, `@lg:`, `@xl:`, `@2xl:`
+
+Max-width: `@max-md:grid-cols-1`
+Range: `@min-md:@max-xl:hidden`
+
+## Responsive + State
+
+```html
+<button class="lg:hover:scale-105">
+<a class="hover:text-blue-600 lg:hover:text-purple-600">
+```
+
+## Best Practices
+
+1. Mobile-first: start mobile, add complexity larger
+2. Consistent breakpoints across related elements
+3. Test at exact breakpoint widths
+4. 2-3 breakpoints per element max
+5. Verify touch targets min 44x44px