@elyracode/stack-vilt 0.3.0

package/README.md

@@ -0,0 +1,18 @@
+# @elyracode/stack-vilt
+
+Elyra stack profile for **VILT** (Vue 3, Inertia.js, Laravel, Tailwind CSS).
+
+## Install
+
+```
+elyra install npm:@elyracode/stack-vilt
+```
+
+## What's included
+
+- **Skills**: Deep VILT stack knowledge (Inertia.js protocol, Vue 3 Composition API, Laravel controller patterns, useForm, TypeScript type sync, partial reloads, file structure conventions, common gotchas)
+- **Commands**: `/vilt:info` -- show stack profile status
+
+## Stack Detection
+
+Elyra automatically detects VILT stack projects and suggests this package.

package/extensions/index.ts

@@ -0,0 +1,10 @@
+import type { ExtensionAPI } from "@elyracode/coding-agent";
+
+export default function (elyra: ExtensionAPI) {
+	elyra.registerCommand("vilt:info", {
+		description: "Show detected VILT stack information",
+		handler: async (ctx) => {
+			ctx.ui.notify("info", "VILT stack profile loaded. Skills: vilt-stack. Use /skill:vilt-stack for full reference.");
+		},
+	});
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@elyracode/stack-vilt",
+  "version": "0.3.0",
+    "description": "Elyra stack profile for VILT (Vue 3, Inertia.js, Laravel, Tailwind CSS)",
+  "type": "module",
+  "keywords": ["elyra-package", "vilt", "vue", "inertia", "laravel", "tailwind"],
+  "license": "MIT",
+  "author": "Knut W. Horne",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kwhorne/elyra.git",
+    "directory": "packages/stack-vilt"
+  },
+  "elyra": {
+    "skills": ["./skills"],
+    "extensions": ["./extensions/index.ts"]
+  },
+  "peerDependencies": {
+    "@elyracode/coding-agent": "*",
+    "typebox": "*"
+  },
+  "scripts": {
+    "clean": "echo 'nothing to clean'",
+    "build": "echo 'nothing to build'",
+    "check": "echo 'nothing to check'"
+  }
+}

package/skills/vilt-stack/SKILL.md

@@ -0,0 +1,326 @@
+---
+name: vilt-stack
+description: Deep knowledge about the VILT stack - Vue 3, Inertia.js, Laravel, and Tailwind CSS. Use when working on VILT stack projects, Inertia pages, Vue components, Laravel controllers with Inertia responses, or TypeScript type sync between backend and frontend.
+---
+
+# VILT Stack Reference
+
+## Architecture
+
+The VILT stack connects:
+- **Laravel** as the backend (routing, controllers, Eloquent, middleware, validation)
+- **Inertia.js** as the glue layer (replaces traditional API + SPA routing)
+- **Vue 3** with `<script setup>` and Composition API for the frontend
+- **Tailwind CSS** for utility-first styling
+
+### How Inertia Works
+
+Inertia is NOT an API. It's a protocol:
+1. First request: Server returns a full HTML page with the Vue app + initial page data as JSON
+2. Subsequent navigation: Inertia intercepts links, makes XHR requests, server returns only JSON props
+3. Vue swaps the page component without a full page reload
+
+The server always controls routing. There is no Vue Router.
+
+## Laravel Side
+
+### Controller Pattern
+```php
+use Inertia\Inertia;
+use Inertia\Response;
+
+class UserController extends Controller
+{
+    public function index(): Response
+    {
+        return Inertia::render('Users/Index', [
+            'users' => User::query()
+                ->select('id', 'name', 'email')
+                ->paginate(10),
+            'filters' => request()->only(['search', 'role']),
+        ]);
+    }
+
+    public function create(): Response
+    {
+        return Inertia::render('Users/Create');
+    }
+
+    public function store(StoreUserRequest $request)
+    {
+        User::create($request->validated());
+        return redirect()->route('users.index')
+            ->with('success', 'User created.');
+    }
+
+    public function edit(User $user): Response
+    {
+        return Inertia::render('Users/Edit', [
+            'user' => $user->only('id', 'name', 'email', 'role'),
+        ]);
+    }
+
+    public function update(UpdateUserRequest $request, User $user)
+    {
+        $user->update($request->validated());
+        return redirect()->route('users.index')
+            ->with('success', 'User updated.');
+    }
+
+    public function destroy(User $user)
+    {
+        $user->delete();
+        return redirect()->route('users.index')
+            ->with('success', 'User deleted.');
+    }
+}
+```
+
+### Shared Data (available on every page)
+```php
+// app/Http/Middleware/HandleInertiaRequests.php
+public function share(Request $request): array
+{
+    return [
+        ...parent::share($request),
+        'auth' => [
+            'user' => $request->user()?->only('id', 'name', 'email', 'role'),
+        ],
+        'flash' => [
+            'success' => fn () => $request->session()->get('success'),
+            'error' => fn () => $request->session()->get('error'),
+        ],
+    ];
+}
+```
+
+### Lazy Props (only loaded when needed)
+```php
+return Inertia::render('Users/Show', [
+    'user' => $user,
+    'activity' => Inertia::lazy(fn () => $user->activity()->latest()->get()),
+]);
+```
+
+### Partial Reloads
+```php
+// Only reload specific props
+return Inertia::render('Dashboard', [
+    'stats' => fn () => Stats::calculate(),
+    'notifications' => fn () => auth()->user()->unreadNotifications,
+]);
+```
+
+## Vue 3 Side
+
+### Page Component Pattern
+```vue
+<script setup lang="ts">
+import { Head, Link, useForm, router } from '@inertiajs/vue3'
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
+
+interface User {
+    id: number
+    name: string
+    email: string
+    role: string
+}
+
+interface Props {
+    users: {
+        data: User[]
+        links: Array<{ url: string | null; label: string; active: boolean }>
+        current_page: number
+        last_page: number
+    }
+    filters: {
+        search?: string
+        role?: string
+    }
+}
+
+const props = defineProps<Props>()
+
+function destroy(id: number) {
+    if (confirm('Are you sure?')) {
+        router.delete(route('users.destroy', id))
+    }
+}
+</script>
+
+<template>
+    <Head title="Users" />
+    <AuthenticatedLayout>
+        <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center mb-6">
+                <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Users</h1>
+                <Link :href="route('users.create')" class="btn btn-primary">
+                    Add User
+                </Link>
+            </div>
+
+            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                    <thead class="bg-gray-50 dark:bg-gray-900">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
+                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                        <tr v-for="user in users.data" :key="user.id">
+                            <td class="px-6 py-4 whitespace-nowrap">{{ user.name }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap">{{ user.email }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-right">
+                                <Link :href="route('users.edit', user.id)" class="text-blue-600 hover:text-blue-900">Edit</Link>
+                                <button @click="destroy(user.id)" class="ml-4 text-red-600 hover:text-red-900">Delete</button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </AuthenticatedLayout>
+</template>
+```
+
+### Form Handling with useForm
+```vue
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3'
+
+const form = useForm({
+    name: '',
+    email: '',
+    role: 'user',
+})
+
+function submit() {
+    form.post(route('users.store'), {
+        onSuccess: () => form.reset(),
+    })
+}
+</script>
+
+<template>
+    <form @submit.prevent="submit" class="space-y-4">
+        <div>
+            <label class="block text-sm font-medium text-gray-700">Name</label>
+            <input v-model="form.name" type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" />
+            <p v-if="form.errors.name" class="mt-1 text-sm text-red-600">{{ form.errors.name }}</p>
+        </div>
+        <div>
+            <label class="block text-sm font-medium text-gray-700">Email</label>
+            <input v-model="form.email" type="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" />
+            <p v-if="form.errors.email" class="mt-1 text-sm text-red-600">{{ form.errors.email }}</p>
+        </div>
+        <button type="submit" :disabled="form.processing" class="btn btn-primary">
+            {{ form.processing ? 'Saving...' : 'Save' }}
+        </button>
+    </form>
+</template>
+```
+
+### TypeScript Type Definitions
+```typescript
+// resources/js/types/index.d.ts
+export interface User {
+    id: number
+    name: string
+    email: string
+    email_verified_at?: string
+    role: 'admin' | 'user'
+}
+
+export type PageProps<T extends Record<string, unknown> = Record<string, unknown>> = T & {
+    auth: {
+        user: User
+    }
+    flash: {
+        success?: string
+        error?: string
+    }
+}
+```
+
+### Inertia Router Methods
+```typescript
+import { router } from '@inertiajs/vue3'
+
+// Navigate
+router.visit('/users')
+router.get('/users')
+router.post('/users', data)
+router.put('/users/1', data)
+router.patch('/users/1', data)
+router.delete('/users/1')
+
+// With options
+router.post('/users', data, {
+    preserveScroll: true,
+    preserveState: true,
+    only: ['users'],          // Partial reload
+    onSuccess: () => {},
+    onError: (errors) => {},
+    onFinish: () => {},
+})
+
+// Reload current page props
+router.reload({ only: ['notifications'] })
+```
+
+## File Structure Conventions
+
+```
+app/
+  Http/
+    Controllers/      # Controllers return Inertia::render()
+    Middleware/
+      HandleInertiaRequests.php  # Shared data
+    Requests/         # Form validation
+  Models/
+resources/
+  js/
+    Pages/            # Inertia page components (maps to Inertia::render paths)
+      Users/
+        Index.vue
+        Create.vue
+        Edit.vue
+      Dashboard.vue
+    Components/       # Reusable Vue components
+    Layouts/          # Layout components
+      AuthenticatedLayout.vue
+      GuestLayout.vue
+    Composables/      # Vue composables (use* functions)
+    types/            # TypeScript type definitions
+      index.d.ts
+    app.ts            # Vue app bootstrap + Inertia setup
+routes/
+  web.php             # All routes (Inertia handles them server-side)
+```
+
+## Type Sync Pattern (Backend to Frontend)
+
+When changing data sent from Laravel to Vue, update both sides:
+
+1. **Laravel controller** -- change what's passed to `Inertia::render()`
+2. **TypeScript types** -- update the interface in `resources/js/types/`
+3. **Vue component** -- update `defineProps<Props>()` to match
+
+Example: Adding a `phone` field to User:
+1. Migration: `$table->string('phone')->nullable()`
+2. Controller: add `'phone'` to the select/only list
+3. TypeScript: add `phone?: string` to `User` interface
+4. Vue: add the input field bound to the prop
+
+## Common Gotchas
+
+1. **No Vue Router**: Inertia replaces client-side routing. Use `<Link>` and `router` from `@inertiajs/vue3`, never `vue-router`.
+2. **Props are reactive, not the page**: When Inertia navigates, it replaces the entire page component. State in `ref()`/`reactive()` resets. Use `preserveState: true` or Pinia for persistent state.
+3. **Validation errors**: Laravel validation errors are automatically available via `form.errors` or `usePage().props.errors`. No manual error handling needed.
+4. **Flash messages**: Use Laravel's `->with('success', 'msg')` on redirects. Access via shared data in `HandleInertiaRequests.php`.
+5. **File uploads**: Use `form.post()` with FormData. Inertia handles multipart automatically when the form has File values.
+6. **SSR**: Inertia supports SSR with `@inertiajs/vue3/server`. Configure in `vite.config.ts` with the `laravel-vite-plugin`.
+7. **Ziggy routes**: Use `route('name')` in Vue via the Ziggy package. Never hardcode URLs.
+8. **Partial reloads**: Wrap expensive props in closures `fn () =>` in the controller. Request them with `router.reload({ only: ['prop'] })`.