@plutocms/supabase 0.0.1-alpha.1

package/.agents/skills/nuxt/references/rendering-modes.md

@@ -0,0 +1,237 @@
+---
+name: rendering-modes
+description: Universal rendering, client-side rendering, and hybrid rendering in Nuxt
+---
+
+# Rendering Modes
+
+Nuxt supports multiple rendering modes: universal (SSR), client-side (CSR), and hybrid rendering.
+
+## Universal Rendering (Default)
+
+Server renders HTML, then hydrates on client:
+
+```ts
+// nuxt.config.ts - this is the default
+export default defineNuxtConfig({
+  ssr: true,
+})
+```
+
+**Benefits:**
+- Fast initial page load (HTML is ready)
+- SEO-friendly (content is in HTML)
+- Works without JavaScript initially
+
+**How it works:**
+1. Server executes Vue code, generates HTML
+2. Browser displays HTML immediately
+3. JavaScript loads and hydrates the page
+4. Page becomes fully interactive
+
+## Client-Side Rendering
+
+Render entirely in the browser:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  ssr: false,
+})
+```
+
+**Benefits:**
+- Simpler development (no SSR constraints)
+- Cheaper hosting (static files only)
+- Works offline
+
+**Use cases:**
+- Admin dashboards
+- SaaS applications
+- Apps behind authentication
+
+### SPA Loading Template
+
+Provide loading UI while app hydrates:
+
+```html
+<!-- app/spa-loading-template.html -->
+<div class="loading">
+  <div class="spinner"></div>
+  <p>Loading...</p>
+</div>
+
+<style>
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #00dc82;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>
+```
+
+## Hybrid Rendering
+
+Mix rendering modes per route using route rules:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  routeRules: {
+    // Static pages - prerendered at build
+    '/': { prerender: true },
+    '/about': { prerender: true },
+
+    // ISR - regenerate in background
+    '/blog/**': { isr: 3600 }, // Cache for 1 hour
+    '/products/**': { swr: true }, // Stale-while-revalidate
+
+    // Client-only rendering
+    '/admin/**': { ssr: false },
+    '/dashboard/**': { ssr: false },
+
+    // Server-rendered (default)
+    '/api/**': { cors: true },
+  },
+})
+```
+
+### Route Rules Reference
+
+| Rule | Description |
+|------|-------------|
+| `prerender: true` | Pre-render at build time |
+| `ssr: false` | Client-side only |
+| `swr: number \| true` | Stale-while-revalidate caching |
+| `isr: number \| true` | Incremental static regeneration |
+| `cache: { maxAge: number }` | Cache with TTL |
+| `redirect: string` | Redirect to another path |
+| `cors: true` | Add CORS headers |
+| `headers: object` | Custom response headers |
+
+### Inline Route Rules
+
+Define per-page:
+
+```vue
+<script setup lang="ts">
+defineRouteRules({
+  prerender: true,
+})
+</script>
+```
+
+## Prerendering
+
+Generate static HTML at build time:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  // Prerender specific routes
+  routeRules: {
+    '/': { prerender: true },
+    '/about': { prerender: true },
+    '/posts/*': { prerender: true },
+  },
+})
+```
+
+Or use `nuxt generate`:
+
+```bash
+nuxt generate
+```
+
+### Programmatic Prerendering
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  hooks: {
+    'prerender:routes'({ routes }) {
+      // Add dynamic routes
+      const posts = await fetchPostSlugs()
+      for (const slug of posts) {
+        routes.add(`/posts/${slug}`)
+      }
+    },
+  },
+})
+```
+
+Or in pages:
+
+```ts
+// server/api/posts.ts or a plugin
+prerenderRoutes(['/posts/1', '/posts/2', '/posts/3'])
+```
+
+## Edge-Side Rendering
+
+Render at CDN edge servers:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  nitro: {
+    preset: 'cloudflare-pages', // or 'vercel-edge', 'netlify-edge'
+  },
+})
+```
+
+Supported platforms:
+- Cloudflare Pages/Workers
+- Vercel Edge Functions
+- Netlify Edge Functions
+
+## Conditional Rendering
+
+Use `import.meta.server` and `import.meta.client`:
+
+```vue
+<script setup>
+if (import.meta.server) {
+  // Server-only code
+  console.log('Running on server')
+}
+
+if (import.meta.client) {
+  // Client-only code
+  console.log('Running in browser')
+}
+</script>
+```
+
+For components:
+
+```vue
+<template>
+  <ClientOnly>
+    <BrowserOnlyComponent />
+    <template #fallback>
+      <p>Loading...</p>
+    </template>
+  </ClientOnly>
+</template>
+```
+
+<!-- 
+Source references:
+- https://nuxt.com/docs/guide/concepts/rendering
+- https://nuxt.com/docs/getting-started/prerendering
+- https://nuxt.com/docs/api/nuxt-config#routerules
+-->

package/.agents/skills/nuxt-ui/SKILL.md

@@ -0,0 +1,334 @@
+---
+name: nuxt-ui
+description: Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
+---
+
+# Nuxt UI
+
+Vue component library built on [Reka UI](https://reka-ui.com/) + [Tailwind CSS](https://tailwindcss.com/) + [Tailwind Variants](https://www.tailwind-variants.org/). Works with Nuxt, Vue (Vite), Laravel (Inertia), and AdonisJS (Inertia).
+
+## Installation
+
+### Nuxt
+
+```bash
+pnpm add @nuxt/ui tailwindcss
+```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui'],
+  css: ['~/assets/css/main.css']
+})
+```
+
+```css
+/* app/assets/css/main.css */
+@import "tailwindcss";
+@import "@nuxt/ui";
+```
+
+```vue
+<!-- app.vue -->
+<template>
+  <UApp>
+    <NuxtPage />
+  </UApp>
+</template>
+```
+
+### Vue (Vite)
+
+```bash
+pnpm add @nuxt/ui tailwindcss
+```
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import ui from '@nuxt/ui/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    ui()
+  ]
+})
+```
+
+```ts
+// src/main.ts
+import './assets/main.css'
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import ui from '@nuxt/ui/vue-plugin'
+import App from './App.vue'
+
+const app = createApp(App)
+
+const router = createRouter({
+  routes: [],
+  history: createWebHistory()
+})
+
+app.use(router)
+app.use(ui)
+app.mount('#app')
+```
+
+```css
+/* assets/main.css */
+@import "tailwindcss";
+@import "@nuxt/ui";
+```
+
+```vue
+<!-- src/App.vue -->
+<template>
+  <UApp>
+    <RouterView />
+  </UApp>
+</template>
+```
+
+> **Vue**: Add `class="isolate"` to your root `<div id="app">` in `index.html`.
+
+> **Vue + Inertia**: Use `ui({ router: 'inertia' })` in `vite.config.ts`.
+
+### UApp
+
+Wrapping your app in `UApp` is **required** — it provides global config for toasts, tooltips, and programmatic overlays. It also accepts a `locale` prop for i18n (see [composables reference](references/composables.md)).
+
+## Icons
+
+Nuxt UI uses [Iconify](https://iconify.design/) for 200,000+ icons. In Nuxt, `@nuxt/icon` is auto-registered. In Vue, icons work out of the box via the Vite plugin.
+
+### Naming convention
+
+Icons use the format `i-{collection}-{name}`:
+
+```vue
+<UIcon name="i-lucide-sun" class="size-5" />
+<UButton icon="i-lucide-plus" label="Add" />
+<UAlert icon="i-lucide-info" title="Heads up" />
+```
+
+> Browse all icons at [icones.js.org](https://icones.js.org). The `lucide` collection is used throughout Nuxt UI defaults.
+
+### Install icon collections locally
+
+```bash
+pnpm i @iconify-json/lucide
+pnpm i @iconify-json/simple-icons
+```
+
+### Custom local collections (Nuxt)
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  icon: {
+    customCollections: [{
+      prefix: 'custom',
+      dir: './app/assets/icons'
+    }]
+  }
+})
+```
+
+```vue
+<UIcon name="i-custom-my-icon" />
+```
+
+## Theming & Branding
+
+Nuxt UI ships with a default look. The goal is to adapt it to your brand so every app looks unique.
+
+**Always use semantic utilities** (`text-default`, `bg-elevated`, `border-muted`), never raw Tailwind palette colors. See [references/theming.md](references/theming.md) for the full list.
+
+### Colors
+
+7 semantic colors (`primary`, `secondary`, `success`, `info`, `warning`, `error`, `neutral`) configurable at runtime:
+
+```ts
+// Nuxt — app.config.ts
+export default defineAppConfig({
+  ui: { colors: { primary: 'indigo', neutral: 'zinc' } }
+})
+```
+
+```ts
+// Vue — vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import ui from '@nuxt/ui/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    ui({
+      ui: { colors: { primary: 'indigo', neutral: 'zinc' } }
+    })
+  ]
+})
+```
+
+### Customizing components
+
+**Override priority** (highest wins): `ui` prop / `class` prop > global config > theme defaults.
+
+The `ui` prop overrides a component's **slots** after variants are computed — it wins over everything:
+
+```vue
+<UButton :ui="{ base: 'rounded-none', trailingIcon: 'size-3 rotate-90' }" />
+<UCard :ui="{ header: 'bg-muted', body: 'p-8' }" />
+```
+
+**Read the generated theme file** to find slot names for any component:
+
+- **Nuxt**: `.nuxt/ui/<component>.ts`
+- **Vue**: `node_modules/.nuxt-ui/ui/<component>.ts`
+
+> For CSS variables, custom colors, global config, compound variants, and a **full brand customization playbook**, see [references/theming.md](references/theming.md)
+
+## Composables
+
+```ts
+// Notifications
+const toast = useToast()
+toast.add({ title: 'Saved', color: 'success', icon: 'i-lucide-check' })
+
+// Programmatic overlays
+const overlay = useOverlay()
+const modal = overlay.create(MyModal)
+const { result } = modal.open({ title: 'Confirm' })
+await result
+
+// Keyboard shortcuts
+defineShortcuts({
+  meta_k: () => openSearch(),
+  escape: () => close()
+})
+```
+
+> For full composable reference, see [references/composables.md](references/composables.md)
+
+## Form validation
+
+Uses Standard Schema — works with Zod, Valibot, Yup, or Joi.
+
+```vue
+<script setup lang="ts">
+import { z } from 'zod'
+
+const schema = z.object({
+  email: z.string().email('Invalid email'),
+  password: z.string().min(8, 'Min 8 characters')
+})
+
+type Schema = z.output<typeof schema>
+const state = reactive<Partial<Schema>>({ email: '', password: '' })
+
+function onSubmit() {
+  // UForm validates before emitting @submit — state is valid here
+}
+</script>
+
+<template>
+  <UForm :schema="schema" :state="state" @submit="onSubmit">
+    <UFormField name="email" label="Email" required>
+      <UInput v-model="state.email" type="email" />
+    </UFormField>
+
+    <UFormField name="password" label="Password" required>
+      <UInput v-model="state.password" type="password" />
+    </UFormField>
+
+    <UButton type="submit">Sign in</UButton>
+  </UForm>
+</template>
+```
+
+> For all form components and validation patterns, see [references/components.md](references/components.md#form)
+
+## Overlays
+
+```vue
+<!-- Modal -->
+<UModal v-model:open="isOpen" title="Edit" description="Edit your profile">
+  <template #body>Content</template>
+  <template #footer>
+    <UButton variant="ghost" @click="isOpen = false">Cancel</UButton>
+    <UButton @click="save">Save</UButton>
+  </template>
+</UModal>
+
+<!-- Slideover (side panel) -->
+<USlideover v-model:open="isOpen" title="Settings" side="right">
+  <template #body>Content</template>
+</USlideover>
+
+<!-- Dropdown menu (flat array) -->
+<UDropdownMenu :items="[
+  { label: 'Edit', icon: 'i-lucide-pencil' },
+  { type: 'separator' },
+  { label: 'Delete', icon: 'i-lucide-trash', color: 'error' }
+]">
+  <UButton icon="i-lucide-ellipsis-vertical" variant="ghost" />
+</UDropdownMenu>
+
+<!-- Dropdown menu (nested array — groups with automatic separators) -->
+<UDropdownMenu :items="[
+  [{ label: 'Edit', icon: 'i-lucide-pencil' }, { label: 'Duplicate', icon: 'i-lucide-copy' }],
+  [{ label: 'Delete', icon: 'i-lucide-trash', color: 'error' }]
+]">
+  <UButton icon="i-lucide-ellipsis-vertical" variant="ghost" />
+</UDropdownMenu>
+```
+
+> For all overlay components, see [references/components.md](references/components.md#overlay)
+
+## Layouts
+
+Nuxt UI provides components to compose full page layouts. Load the reference matching your use case:
+
+| Layout | Description | Reference |
+|---|---|---|
+| Page | Landing, blog, changelog, pricing — public-facing pages | [layouts/page.md](references/layouts/page.md) |
+| Dashboard | Admin UI with resizable sidebar and panels | [layouts/dashboard.md](references/layouts/dashboard.md) |
+| Docs | Documentation with sidebar nav and TOC | [layouts/docs.md](references/layouts/docs.md) |
+| Chat | AI chat with messages and prompt | [layouts/chat.md](references/layouts/chat.md) |
+| Editor | Rich text editor with toolbars | [layouts/editor.md](references/layouts/editor.md) |
+
+## Templates
+
+Official starter templates at [github.com/nuxt-ui-templates](https://github.com/nuxt-ui-templates):
+
+| Template | Framework | GitHub |
+|---|---|---|
+| Starter | Nuxt | [nuxt-ui-templates/starter](https://github.com/nuxt-ui-templates/starter) |
+| Starter | Vue | [nuxt-ui-templates/starter-vue](https://github.com/nuxt-ui-templates/starter-vue) |
+| Dashboard | Nuxt | [nuxt-ui-templates/dashboard](https://github.com/nuxt-ui-templates/dashboard) |
+| Dashboard | Vue | [nuxt-ui-templates/dashboard-vue](https://github.com/nuxt-ui-templates/dashboard-vue) |
+| SaaS | Nuxt | [nuxt-ui-templates/saas](https://github.com/nuxt-ui-templates/saas) |
+| Landing | Nuxt | [nuxt-ui-templates/landing](https://github.com/nuxt-ui-templates/landing) |
+| Docs | Nuxt | [nuxt-ui-templates/docs](https://github.com/nuxt-ui-templates/docs) |
+| Portfolio | Nuxt | [nuxt-ui-templates/portfolio](https://github.com/nuxt-ui-templates/portfolio) |
+| Chat | Nuxt | [nuxt-ui-templates/chat](https://github.com/nuxt-ui-templates/chat) |
+| Editor | Nuxt | [nuxt-ui-templates/editor](https://github.com/nuxt-ui-templates/editor) |
+| Changelog | Nuxt | [nuxt-ui-templates/changelog](https://github.com/nuxt-ui-templates/changelog) |
+| Starter | Laravel | [nuxt-ui-templates/starter-laravel](https://github.com/nuxt-ui-templates/starter-laravel) |
+| Starter | AdonisJS | [nuxt-ui-templates/starter-adonis](https://github.com/nuxt-ui-templates/starter-adonis) |
+
+> When starting a new project, clone the matching template instead of setting up from scratch.
+
+## Additional references
+
+Load based on your task — **do not load all at once**:
+
+- [references/theming.md](references/theming.md) — CSS variables, custom colors, component theme overrides
+- [references/components.md](references/components.md) — all 125+ components by category with props and usage
+- [references/composables.md](references/composables.md) — useToast, useOverlay, defineShortcuts
+- Generated theme files — all slots, variants, and default classes for any component (Nuxt: `.nuxt/ui/<component>.ts`, Vue: `node_modules/.nuxt-ui/ui/<component>.ts`)