@ultrakit/ultrakit 0.0.0

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

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

@@ -0,0 +1,134 @@
+# Tailwind Layout Utilities
+
+Display, flexbox, grid, positioning, z-index.
+
+## Display
+
+```html
+<div class="block">Block</div>
+<div class="inline-block">Inline Block</div>
+<div class="flex">Flexbox</div>
+<div class="inline-flex">Inline Flex</div>
+<div class="grid">Grid</div>
+<div class="hidden">Hidden</div>
+```
+
+## Flexbox
+
+```html
+<!-- Direction -->
+<div class="flex flex-row">Row</div>
+<div class="flex flex-col">Column</div>
+<div class="flex flex-row-reverse">Reverse</div>
+
+<!-- Justify (main axis) -->
+<div class="flex justify-start">Start</div>
+<div class="flex justify-center">Center</div>
+<div class="flex justify-end">End</div>
+<div class="flex justify-between">Between</div>
+<div class="flex justify-evenly">Evenly</div>
+
+<!-- Align (cross axis) -->
+<div class="flex items-start">Start</div>
+<div class="flex items-center">Center</div>
+<div class="flex items-end">End</div>
+<div class="flex items-stretch">Stretch</div>
+
+<!-- Gap -->
+<div class="flex gap-4">All</div>
+<div class="flex gap-x-6 gap-y-2">X/Y</div>
+
+<!-- Wrap -->
+<div class="flex flex-wrap">Wrap</div>
+<div class="flex flex-nowrap">No wrap</div>
+```
+
+## Grid
+
+```html
+<!-- Columns (v4: any number) -->
+<div class="grid grid-cols-1">1 col</div>
+<div class="grid grid-cols-3">3 cols</div>
+<div class="grid grid-cols-12">12 cols</div>
+<div class="grid grid-cols-15">15 cols (v4)</div>
+
+<!-- Custom grid -->
+<div class="grid grid-cols-[1fr_500px_2fr]">Custom</div>
+
+<!-- Span -->
+<div class="col-span-2">Span 2</div>
+<div class="row-span-3">Span 3 rows</div>
+
+<!-- Gap -->
+<div class="grid gap-4">All</div>
+<div class="grid gap-x-8 gap-y-4">X/Y</div>
+```
+
+## Positioning
+
+```html
+<div class="static">Static</div>
+<div class="relative">Relative</div>
+<div class="absolute">Absolute</div>
+<div class="fixed">Fixed</div>
+<div class="sticky">Sticky</div>
+
+<!-- Position values -->
+<div class="absolute top-0 right-0">Top right</div>
+<div class="absolute inset-0">All 0</div>
+<div class="absolute inset-x-4">Left/right 4</div>
+```
+
+## Z-Index
+
+```html
+<div class="z-0">0</div>
+<div class="z-10">10</div>
+<div class="z-50">50</div>
+<div class="z-[100]">Custom</div>
+```
+
+## Width & Height
+
+```html
+<!-- Width -->
+<div class="w-full">100%</div>
+<div class="w-1/2">50%</div>
+<div class="w-64">16rem</div>
+<div class="w-[500px]">500px</div>
+<div class="w-screen">100vw</div>
+
+<!-- Max width -->
+<div class="max-w-md">28rem</div>
+<div class="max-w-screen-xl">1280px</div>
+
+<!-- Height -->
+<div class="h-full">100%</div>
+<div class="h-screen">100vh</div>
+<div class="min-h-screen">min 100vh</div>
+```
+
+## Aspect Ratio
+
+```html
+<div class="aspect-square">1:1</div>
+<div class="aspect-video">16:9</div>
+<div class="aspect-[4/3]">4:3</div>
+```
+
+## Overflow
+
+```html
+<div class="overflow-auto">Auto scroll</div>
+<div class="overflow-hidden">Hidden</div>
+<div class="overflow-x-auto">Horizontal scroll</div>
+```
+
+## Responsive Order
+
+```html
+<div class="flex flex-col">
+  <div class="order-2 lg:order-1">First on desktop</div>
+  <div class="order-1 lg:order-2">First on mobile</div>
+</div>
+```

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

@@ -0,0 +1,165 @@
+# Tailwind Styling Utilities
+
+Spacing, typography, colors, borders, shadows, transforms.
+
+## Spacing
+
+### Padding
+```html
+<div class="p-4">All</div>
+<div class="px-6">X axis</div>
+<div class="py-3">Y axis</div>
+<div class="pt-8 pr-4 pb-2 pl-6">Individual</div>
+```
+
+### Margin
+```html
+<div class="m-4">All</div>
+<div class="mx-auto">Center</div>
+<div class="my-6">Y axis</div>
+<div class="-mt-4">Negative</div>
+<div class="ml-auto">Push right</div>
+```
+
+### Scale
+```
+0=0px, px=1px, 0.5=2px, 1=4px, 2=8px, 3=12px, 4=16px
+6=24px, 8=32px, 12=48px, 16=64px, 24=96px
+v4: Any value: mt-17, px-29
+```
+
+## Typography
+
+```html
+<!-- Size -->
+<p class="text-xs">12px</p>
+<p class="text-sm">14px</p>
+<p class="text-base">16px</p>
+<p class="text-lg">18px</p>
+<p class="text-xl">20px</p>
+<p class="text-2xl">24px</p>
+<p class="text-4xl">36px</p>
+
+<!-- Weight -->
+<p class="font-light">300</p>
+<p class="font-normal">400</p>
+<p class="font-medium">500</p>
+<p class="font-semibold">600</p>
+<p class="font-bold">700</p>
+
+<!-- Line height -->
+<p class="leading-tight">1.25</p>
+<p class="leading-normal">1.5</p>
+<h1 class="text-4xl/tight">Combined</h1>
+
+<!-- Transform -->
+<p class="uppercase">UPPER</p>
+<p class="lowercase">lower</p>
+<p class="capitalize">Cap</p>
+
+<!-- Decoration -->
+<p class="underline">Underline</p>
+<p class="line-through">Strike</p>
+
+<!-- Overflow -->
+<p class="truncate">Truncate...</p>
+<p class="line-clamp-3">Clamp 3</p>
+```
+
+## Colors
+
+```html
+<!-- Text -->
+<p class="text-black">Black</p>
+<p class="text-gray-500">Gray</p>
+<p class="text-primary">CSS var</p>
+<p class="text-muted-foreground">Muted</p>
+
+<!-- Background -->
+<div class="bg-white">White</div>
+<div class="bg-blue-500">Blue</div>
+<div class="bg-background">CSS var</div>
+
+<!-- Opacity modifier -->
+<div class="bg-black/75">75%</div>
+<div class="text-blue-500/50">50%</div>
+```
+
+## Gradients
+
+```html
+<div class="bg-linear-to-r from-blue-500 to-purple-600">Linear</div>
+<div class="bg-linear-45 from-pink-500 to-yellow-500">Angle (v4)</div>
+<div class="bg-linear-to-br from-pink-500 via-red-500 to-yellow-500">Via</div>
+<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400">OKLCH (v4)</div>
+```
+
+## Borders
+
+```html
+<!-- Width -->
+<div class="border">1px all</div>
+<div class="border-2">2px all</div>
+<div class="border-t">Top only</div>
+
+<!-- Color -->
+<div class="border border-gray-300">Gray</div>
+<div class="border border-border">CSS var</div>
+
+<!-- Radius -->
+<div class="rounded">0.25rem</div>
+<div class="rounded-lg">0.5rem</div>
+<div class="rounded-full">Pill</div>
+<div class="rounded-t-lg">Top only</div>
+```
+
+## Shadows
+
+```html
+<div class="shadow-sm">Small</div>
+<div class="shadow">Default</div>
+<div class="shadow-lg">Large</div>
+<div class="shadow-xl">XL</div>
+<div class="shadow-lg shadow-blue-500/50">Colored</div>
+<div class="inset-shadow-sm">Inset (v4)</div>
+```
+
+## Transforms
+
+```html
+<div class="scale-105">Scale</div>
+<div class="rotate-45">Rotate</div>
+<div class="translate-x-4">Move</div>
+
+<!-- 3D (v4) -->
+<div class="rotate-x-45">X</div>
+<div class="rotate-y-30">Y</div>
+<div class="perspective-distant">Perspective</div>
+```
+
+## Transitions
+
+```html
+<div class="transition-all">All</div>
+<div class="transition-colors">Colors</div>
+<div class="transition-transform">Transform</div>
+<div class="duration-300">300ms</div>
+<div class="ease-in-out">Easing</div>
+```
+
+## Other
+
+```html
+<div class="opacity-50">50%</div>
+<div class="cursor-pointer">Pointer</div>
+<div class="select-none">No select</div>
+```
+
+## Arbitrary Values
+
+```html
+<div class="p-[17px]">Custom</div>
+<div class="bg-[#bada55]">Hex</div>
+<div class="w-[calc(100%-2rem)]">Calc</div>
+<div class="grid-cols-[1fr_500px_2fr]">Grid</div>
+```

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

@@ -0,0 +1,147 @@
+# Tailwind CSS v4 Configuration
+
+v4.1.x (current: v4.1.18) - CSS-first config, no tailwind.config.js needed.
+
+## Installation
+
+### Vite (Recommended)
+```bash
+npm i tailwindcss @tailwindcss/vite
+```
+
+```ts
+// vite.config.ts
+import tailwindcss from "@tailwindcss/vite"
+export default { plugins: [tailwindcss()] }
+```
+
+```css
+/* src/index.css */
+@import "tailwindcss";
+```
+
+### PostCSS
+```bash
+npm i tailwindcss @tailwindcss/postcss
+```
+
+```js
+// postcss.config.js
+export default { plugins: ["@tailwindcss/postcss"] }
+```
+
+## CSS-First Configuration
+
+Configure in CSS with `@theme`:
+
+```css
+@import "tailwindcss";
+
+@theme {
+  /* OKLCH colors for vivid, wide-gamut */
+  --color-brand-50: oklch(0.97 0.02 264);
+  --color-brand-500: oklch(0.55 0.22 264);
+  --color-brand-900: oklch(0.25 0.15 264);
+
+  /* Fonts */
+  --font-display: "Satoshi", sans-serif;
+  --font-body: "Inter", system-ui, sans-serif;
+
+  /* Spacing, breakpoints, easing */
+  --spacing-18: calc(var(--spacing) * 18);
+  --breakpoint-3xl: 1920px;
+  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
+
+  /* Shadows */
+  --shadow-glow: 0 0 20px oklch(0.55 0.22 264 / 0.3);
+}
+```
+
+Usage: `<div class="bg-brand-500 font-display shadow-glow">`
+
+## Key v4 Changes from v3
+
+| v3 | v4 |
+|----|-----|
+| `@tailwind base/components/utilities` | `@import "tailwindcss"` |
+| `tailwind.config.js` | `@theme` directive |
+| `content: [...]` array | Automatic detection |
+| sRGB colors | OKLCH/P3 colors |
+| `bg-opacity-50` | `bg-black/50` modifier |
+| Plugin for container queries | Built-in `@container` |
+
+## Automatic Content Detection
+
+No `content` array. Auto-ignores `.gitignore` and binary files.
+
+Add sources manually if needed:
+```css
+@source "../node_modules/@my-company/ui-lib";
+```
+
+## Dynamic Values
+
+Any value works without config:
+```html
+<div class="grid grid-cols-15">
+<div class="mt-17 px-29">
+<div data-active class="data-active:bg-blue-500">
+```
+
+## OKLCH Colors
+
+Wider gamut, more vivid:
+```css
+@theme {
+  --color-primary-50: oklch(0.98 0.02 250);
+  --color-primary-500: oklch(0.65 0.22 250);
+  --color-primary-900: oklch(0.25 0.15 250);
+}
+```
+
+Opacity modifier: `<div class="bg-primary-500/50">`
+
+## Custom Utilities & Variants
+
+```css
+@utility glass {
+  background: oklch(1 0 0 / 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid oklch(1 0 0 / 0.2);
+}
+
+@custom-variant theme-dark (&:where([data-theme="dark"] *));
+```
+
+## Layer Organization
+
+```css
+@layer base { h1 { @apply text-4xl font-bold; } }
+@layer components { .btn { @apply px-4 py-2 rounded-lg; } }
+@layer utilities { .text-balance { text-wrap: balance; } }
+```
+
+## Dark Mode
+
+Class strategy by default:
+```html
+<html class="dark">
+  <div class="bg-white dark:bg-zinc-900">
+```
+
+## Migration from v3
+
+```bash
+npx @tailwindcss/upgrade
+```
+
+- Move `tailwind.config.js` to `@theme`
+- Replace `@tailwind` with `@import "tailwindcss"`
+- Remove `content` array
+- Replace `bg-opacity-*` with `/opacity` modifier
+
+## Performance
+
+- Full builds: 3.5x+ faster
+- Incremental: 8x+ faster
+- No-new-CSS: 100x+ faster (microseconds)

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

@@ -0,0 +1,128 @@
+# Tailwind CSS v4 New Features
+
+v4/v4.1 additions: gradients, 3D transforms, masks, text shadows, new variants.
+
+## Container Queries (Built-in)
+
+No plugin needed:
+```html
+<div class="@container">
+  <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-4">
+</div>
+
+<!-- Max-width -->
+<div class="grid-cols-3 @max-md:grid-cols-1">
+
+<!-- Range -->
+<div class="@min-md:@max-xl:hidden">
+```
+
+## Gradients
+
+```html
+<!-- Angle-based -->
+<div class="bg-linear-45 from-indigo-500 to-pink-500">
+
+<!-- OKLCH interpolation -->
+<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400">
+
+<!-- Conic and radial -->
+<div class="bg-conic from-red-500 to-red-500">
+<div class="bg-radial from-white to-zinc-900">
+```
+
+## 3D Transforms
+
+```html
+<div class="perspective-distant">
+  <div class="rotate-x-45 rotate-z-30 transform-3d">
+</div>
+```
+
+## @starting-style (Enter Transitions)
+
+```html
+<div popover class="transition-all starting:open:opacity-0 starting:open:scale-95">
+```
+
+## not-* Variant
+
+```html
+<div class="not-hover:opacity-75">
+<div class="not-supports-backdrop-blur:bg-white">
+```
+
+## Text Shadows (v4.1)
+
+```html
+<p class="text-shadow-sm">Small</p>
+<p class="text-shadow-lg">Large</p>
+<p class="text-shadow-lg text-shadow-blue-500/50">Colored</p>
+```
+
+## Masks (v4.1)
+
+```html
+<div class="mask-t-from-50%">Fade from top</div>
+<div class="mask-b-from-20% mask-b-to-80%">Bottom fade</div>
+<div class="mask-radial-from-70%">Radial</div>
+<div class="mask-b-from-50% mask-radial-from-80%">Combined</div>
+```
+
+## Other v4.1 Utilities
+
+```html
+<!-- Colored drop shadows -->
+<svg class="drop-shadow-xl drop-shadow-cyan-500/50">
+
+<!-- Overflow wrap -->
+<p class="wrap-break-word">Break words</p>
+<p class="wrap-anywhere">Break anywhere</p>
+
+<!-- Safe alignment -->
+<div class="flex justify-center-safe">
+
+<!-- Baseline alignment -->
+<div class="items-baseline-last">
+
+<!-- Color scheme -->
+<html class="color-scheme-dark">
+
+<!-- Field sizing -->
+<textarea class="field-sizing-content">
+
+<!-- Inert styling -->
+<div class="inert:opacity-50" inert>
+```
+
+## New v4.1 Variants
+
+```html
+<!-- Pointer device -->
+<div class="pointer-fine:p-2 pointer-coarse:p-4">
+
+<!-- Form validation (after interaction) -->
+<input class="user-valid:border-green-500 user-invalid:border-red-500">
+
+<!-- Details content -->
+<details class="details-content:mt-3">
+
+<!-- Inverted colors -->
+<div class="inverted-colors:shadow-none">
+
+<!-- Noscript -->
+<div class="noscript:block hidden">Enable JS</div>
+```
+
+## Source Directives (v4.1)
+
+```css
+/* Ignore paths */
+@source not "./src/legacy";
+
+/* Safelist utilities */
+@source inline("underline");
+
+/* Brace expansion */
+@source inline("{hover:,}bg-red-{100..900..100}");
+```