@ultrakit/ultrakit 0.0.0

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

@@ -0,0 +1,132 @@
+# shadcn/ui Accessibility
+
+ARIA patterns, keyboard navigation, screen reader support via Radix UI.
+
+## Radix Foundation
+
+Built-in: keyboard navigation, screen reader announcements, focus management, ARIA automatic.
+
+## Keyboard Navigation
+
+### Focus Management
+```tsx
+<Button className="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+
+<!-- Skip link -->
+<a href="#main" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2">
+  Skip to content
+</a>
+```
+
+### Dialog
+Focus trapped automatically. Esc closes, Tab cycles.
+
+### Dropdown/Menu
+- Space/Enter: Open
+- Arrow Up/Down: Navigate
+- Esc: Close
+- Tab: Close and move focus
+
+## Screen Reader
+
+### ARIA Labels
+```tsx
+<Button aria-label="Close dialog"><X /></Button>
+<Input aria-label="Email address" type="email" />
+
+<Button aria-describedby="delete-desc">Delete</Button>
+<p id="delete-desc" className="sr-only">Permanently deletes account</p>
+```
+
+### Screen Reader Only
+```tsx
+<Button>
+  <Trash className="h-4 w-4" />
+  <span className="sr-only">Delete item</span>
+</Button>
+```
+
+### Live Regions
+```tsx
+<div aria-live="polite">{message}</div>
+<div aria-live="assertive">{error}</div>
+```
+
+## Forms
+
+### Labels
+```tsx
+<Label htmlFor="email">Email</Label>
+<Input id="email" type="email" />
+```
+
+### Validation
+```tsx
+<Input aria-invalid={!!error} aria-describedby={error ? "email-error" : undefined} />
+<FormMessage id="email-error" />
+```
+
+### Required Fields
+```tsx
+<Label htmlFor="name">
+  Name <span className="text-destructive">*</span>
+  <span className="sr-only">(required)</span>
+</Label>
+```
+
+### Fieldset
+```tsx
+<fieldset>
+  <legend className="text-lg font-semibold mb-4">Contact Info</legend>
+  <FormField name="email" />
+</fieldset>
+```
+
+## Color Contrast
+
+WCAG AA: 4.5:1 normal text, 3:1 large text.
+
+```tsx
+// Good
+<p className="text-foreground">Primary</p>
+<p className="text-muted-foreground">Secondary</p>
+
+// Avoid
+<p className="text-gray-400">Hard to read</p>
+```
+
+## Focus Indicators
+
+Always visible:
+```tsx
+<Button className="focus-visible:ring-2 focus-visible:ring-ring">
+
+// Never: focus:outline-none without replacement
+// Use focus-visible instead
+```
+
+## Motion Preferences
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+}
+```
+
+```tsx
+<div className="transition-all motion-reduce:transition-none">
+```
+
+## Checklist
+
+- [ ] All interactive elements keyboard accessible
+- [ ] Focus indicators visible
+- [ ] Screen reader announces correctly
+- [ ] Form errors announced
+- [ ] Color contrast WCAG AA
+- [ ] Semantic HTML
+- [ ] ARIA labels for icon buttons
+- [ ] Modal focus trap works
+- [ ] Respects reduced motion
+- [ ] Works at 200% zoom
+- [ ] Skip links provided

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)