@elyracode/stack-rilt 0.4.2

package/README.md

@@ -0,0 +1,27 @@
+# @elyracode/stack-rilt
+
+Elyra stack profile for **RILT** (React 19, Inertia.js 2, Laravel, Tailwind CSS 4) with shadcn/ui.
+
+## Install
+
+```
+elyra install npm:@elyracode/stack-rilt
+```
+
+## What's included
+
+- **Skills**: Deep RILT stack knowledge (Inertia.js 2 protocol, React 19 with TypeScript, useForm, shadcn/ui components, Laravel controller patterns, TypeScript type sync, layout variants, common gotchas)
+- **Commands**: `/rilt:info` -- show stack profile status
+
+## Stack Detection
+
+Elyra automatically detects RILT stack projects (React + Inertia + Laravel + Tailwind in your dependencies).
+
+## Usage
+
+```
+> Build a products CRUD with shadcn/ui table and dialog
+> Create a dashboard with stats cards using shadcn components
+> Set up form validation with useForm and shadcn inputs
+> Add a confirmation dialog before deleting a record
+```

package/extensions/index.ts

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

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@elyracode/stack-rilt",
+  "version": "0.4.2",
+  "description": "Elyra stack profile for RILT (React 19, Inertia.js 2, Laravel, Tailwind CSS 4) with shadcn/ui",
+  "type": "module",
+  "keywords": ["elyra-package", "rilt", "react", "inertia", "laravel", "tailwind", "shadcn"],
+  "license": "MIT",
+  "author": "Knut W. Horne",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kwhorne/elyra.git",
+    "directory": "packages/stack-rilt"
+  },
+  "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/rilt-stack/SKILL.md

@@ -0,0 +1,481 @@
+---
+name: rilt-stack
+description: Deep knowledge about the RILT stack - React 19, Inertia.js 2, Laravel, and Tailwind CSS 4 with shadcn/ui. Use when working on RILT stack projects, Inertia pages with React, Laravel controllers with Inertia responses, TypeScript type sync, or shadcn/ui components.
+---
+
+# RILT Stack Reference
+
+## Architecture
+
+The RILT stack connects:
+- **Laravel** as the backend (routing, controllers, Eloquent, middleware, validation, Fortify auth)
+- **Inertia.js 2** as the glue layer (replaces traditional API + SPA routing)
+- **React 19** with TypeScript for the frontend
+- **Tailwind CSS 4** for utility-first styling
+- **shadcn/ui** for pre-built, accessible, customizable components
+
+### How Inertia Works
+
+Inertia is NOT an API. It's a protocol:
+1. First request: server returns full HTML with React app + initial page data as JSON
+2. Subsequent navigation: Inertia intercepts links, makes XHR, server returns only JSON props
+3. React swaps the page component without full reload
+
+The server always controls routing. There is no React Router.
+
+## Laravel Side
+
+### Controller Pattern
+```php
+use Inertia\Inertia;
+use Inertia\Response;
+
+class ProductController extends Controller
+{
+    public function index(): Response
+    {
+        return Inertia::render('Products/Index', [
+            'products' => Product::query()
+                ->select('id', 'name', 'price', 'status')
+                ->paginate(10),
+            'filters' => request()->only(['search', 'status']),
+        ]);
+    }
+
+    public function create(): Response
+    {
+        return Inertia::render('Products/Create', [
+            'categories' => Category::pluck('name', 'id'),
+        ]);
+    }
+
+    public function store(StoreProductRequest $request)
+    {
+        Product::create($request->validated());
+        return redirect()->route('products.index')
+            ->with('success', 'Product created.');
+    }
+
+    public function edit(Product $product): Response
+    {
+        return Inertia::render('Products/Edit', [
+            'product' => $product->only('id', 'name', 'price', 'description', 'category_id'),
+            'categories' => Category::pluck('name', 'id'),
+        ]);
+    }
+
+    public function update(UpdateProductRequest $request, Product $product)
+    {
+        $product->update($request->validated());
+        return redirect()->route('products.index')
+            ->with('success', 'Product updated.');
+    }
+
+    public function destroy(Product $product)
+    {
+        $product->delete();
+        return redirect()->route('products.index')
+            ->with('success', 'Product deleted.');
+    }
+}
+```
+
+### Shared Data
+```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 and Partial Reloads
+```php
+return Inertia::render('Dashboard', [
+    'stats' => fn () => Stats::calculate(),  // Only loaded when requested
+    'activity' => Inertia::lazy(fn () => $user->activity()->latest()->get()),
+]);
+```
+
+## React 19 Side
+
+### Page Component Pattern
+```tsx
+import { Head, Link, router } from '@inertiajs/react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
+
+interface Product {
+    id: number
+    name: string
+    price: number
+    status: string
+}
+
+interface Props {
+    products: {
+        data: Product[]
+        links: Array<{ url: string | null; label: string; active: boolean }>
+    }
+    filters: {
+        search?: string
+        status?: string
+    }
+}
+
+export default function ProductsIndex({ products, filters }: Props) {
+    function destroy(id: number) {
+        if (confirm('Delete this product?')) {
+            router.delete(route('products.destroy', id))
+        }
+    }
+
+    return (
+        <AuthenticatedLayout>
+            <Head title="Products" />
+            <div className="flex justify-between items-center mb-6">
+                <h1 className="text-2xl font-semibold">Products</h1>
+                <Button asChild>
+                    <Link href={route('products.create')}>Add Product</Link>
+                </Button>
+            </div>
+
+            <Card>
+                <CardContent className="p-0">
+                    <Table>
+                        <TableHeader>
+                            <TableRow>
+                                <TableHead>Name</TableHead>
+                                <TableHead>Price</TableHead>
+                                <TableHead>Status</TableHead>
+                                <TableHead className="text-right">Actions</TableHead>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {products.data.map((product) => (
+                                <TableRow key={product.id}>
+                                    <TableCell>{product.name}</TableCell>
+                                    <TableCell>${product.price.toFixed(2)}</TableCell>
+                                    <TableCell>{product.status}</TableCell>
+                                    <TableCell className="text-right space-x-2">
+                                        <Button variant="ghost" size="sm" asChild>
+                                            <Link href={route('products.edit', product.id)}>Edit</Link>
+                                        </Button>
+                                        <Button variant="ghost" size="sm" onClick={() => destroy(product.id)}>
+                                            Delete
+                                        </Button>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </CardContent>
+            </Card>
+        </AuthenticatedLayout>
+    )
+}
+```
+
+### Form Handling with useForm
+```tsx
+import { useForm } from '@inertiajs/react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+
+interface Props {
+    categories: Record<number, string>
+}
+
+export default function CreateProduct({ categories }: Props) {
+    const { data, setData, post, processing, errors, reset } = useForm({
+        name: '',
+        price: '',
+        category_id: '',
+        description: '',
+    })
+
+    function submit(e: React.FormEvent) {
+        e.preventDefault()
+        post(route('products.store'), {
+            onSuccess: () => reset(),
+        })
+    }
+
+    return (
+        <form onSubmit={submit} className="space-y-4 max-w-lg">
+            <div>
+                <Label htmlFor="name">Name</Label>
+                <Input id="name" value={data.name} onChange={e => setData('name', e.target.value)} />
+                {errors.name && <p className="text-sm text-red-500 mt-1">{errors.name}</p>}
+            </div>
+            <div>
+                <Label htmlFor="price">Price</Label>
+                <Input id="price" type="number" step="0.01" value={data.price}
+                    onChange={e => setData('price', e.target.value)} />
+                {errors.price && <p className="text-sm text-red-500 mt-1">{errors.price}</p>}
+            </div>
+            <div>
+                <Label>Category</Label>
+                <Select value={data.category_id} onValueChange={v => setData('category_id', v)}>
+                    <SelectTrigger><SelectValue placeholder="Select category" /></SelectTrigger>
+                    <SelectContent>
+                        {Object.entries(categories).map(([id, name]) => (
+                            <SelectItem key={id} value={id}>{name}</SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                {errors.category_id && <p className="text-sm text-red-500 mt-1">{errors.category_id}</p>}
+            </div>
+            <Button type="submit" disabled={processing}>
+                {processing ? 'Saving...' : 'Create Product'}
+            </Button>
+        </form>
+    )
+}
+```
+
+### TypeScript Types
+```typescript
+// resources/js/types/index.d.ts
+export interface User {
+    id: number
+    name: string
+    email: 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
+```typescript
+import { router } from '@inertiajs/react'
+
+router.visit('/products')
+router.get('/products')
+router.post('/products', data)
+router.put('/products/1', data)
+router.patch('/products/1', data)
+router.delete('/products/1')
+
+router.post('/products', data, {
+    preserveScroll: true,
+    preserveState: true,
+    only: ['products'],
+    onSuccess: () => {},
+    onError: (errors) => {},
+})
+
+router.reload({ only: ['notifications'] })
+```
+
+### React 19 Hooks with Inertia
+```tsx
+import { usePage } from '@inertiajs/react'
+
+// Access shared data
+const { auth, flash } = usePage<PageProps>().props
+
+// Use with React 19 features
+import { useTransition, useState } from 'react'
+
+function SearchProducts() {
+    const [search, setSearch] = useState('')
+    const [isPending, startTransition] = useTransition()
+
+    function handleSearch(value: string) {
+        setSearch(value)
+        startTransition(() => {
+            router.get('/products', { search: value }, { preserveState: true })
+        })
+    }
+
+    return (
+        <Input value={search} onChange={e => handleSearch(e.target.value)}
+            placeholder="Search..." className={isPending ? 'opacity-50' : ''} />
+    )
+}
+```
+
+## shadcn/ui Components
+
+### Installation
+```bash
+npx shadcn@latest init
+npx shadcn@latest add button card input label select table dialog
+```
+
+### Common Components
+```tsx
+// Button
+import { Button } from '@/components/ui/button'
+<Button>Default</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="destructive">Delete</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="link">Link</Button>
+<Button size="sm">Small</Button>
+<Button size="lg">Large</Button>
+<Button disabled>Disabled</Button>
+<Button asChild><Link href="/products">Products</Link></Button>
+
+// Dialog
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+<Dialog>
+    <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
+    <DialogContent>
+        <DialogHeader>
+            <DialogTitle>Edit Profile</DialogTitle>
+            <DialogDescription>Make changes here.</DialogDescription>
+        </DialogHeader>
+        {/* form content */}
+        <DialogFooter>
+            <Button type="submit">Save</Button>
+        </DialogFooter>
+    </DialogContent>
+</Dialog>
+
+// Alert Dialog (confirmation)
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
+<AlertDialog>
+    <AlertDialogTrigger asChild><Button variant="destructive">Delete</Button></AlertDialogTrigger>
+    <AlertDialogContent>
+        <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
+        </AlertDialogFooter>
+    </AlertDialogContent>
+</AlertDialog>
+
+// Tabs
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+<Tabs defaultValue="general">
+    <TabsList>
+        <TabsTrigger value="general">General</TabsTrigger>
+        <TabsTrigger value="security">Security</TabsTrigger>
+    </TabsList>
+    <TabsContent value="general">General settings...</TabsContent>
+    <TabsContent value="security">Security settings...</TabsContent>
+</Tabs>
+
+// Toast (via sonner)
+import { toast } from 'sonner'
+toast.success('Product saved')
+toast.error('Something went wrong')
+
+// Badge
+import { Badge } from '@/components/ui/badge'
+<Badge>Active</Badge>
+<Badge variant="secondary">Pending</Badge>
+<Badge variant="destructive">Cancelled</Badge>
+
+// Dropdown Menu
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+<DropdownMenu>
+    <DropdownMenuTrigger asChild><Button variant="ghost">Actions</Button></DropdownMenuTrigger>
+    <DropdownMenuContent>
+        <DropdownMenuItem>Edit</DropdownMenuItem>
+        <DropdownMenuItem className="text-red-600">Delete</DropdownMenuItem>
+    </DropdownMenuContent>
+</DropdownMenu>
+```
+
+## File Structure
+```
+app/
+  Http/
+    Controllers/
+    Middleware/
+      HandleInertiaRequests.php
+    Requests/
+  Models/
+resources/
+  js/
+    Pages/              # Inertia page components (maps to Inertia::render paths)
+      Products/
+        Index.tsx
+        Create.tsx
+        Edit.tsx
+      Dashboard.tsx
+    Components/         # Reusable React components
+    Layouts/
+      AuthenticatedLayout.tsx
+      GuestLayout.tsx
+    hooks/              # Custom React hooks
+    lib/                # Utilities, shadcn config
+      utils.ts
+    types/
+      index.d.ts
+    app.tsx             # React app bootstrap
+routes/
+  web.php
+```
+
+## Layout Variants (Laravel Starter Kit)
+
+### Sidebar Layout (default)
+```tsx
+// resources/js/layouts/app-layout.tsx
+import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout'
+```
+
+### Header Layout
+```tsx
+import AppLayoutTemplate from '@/layouts/app/app-header-layout'
+```
+
+### Sidebar Variants
+```tsx
+<Sidebar collapsible="icon" variant="sidebar">  // default
+<Sidebar collapsible="icon" variant="inset">     // inset
+<Sidebar collapsible="icon" variant="floating">  // floating
+```
+
+### Auth Layout Variants
+```tsx
+import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout'  // simple
+import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout'   // split
+// default: card layout
+```
+
+## Type Sync Pattern (Backend to Frontend)
+
+When changing data sent from Laravel to React:
+1. **Migration**: add column
+2. **Controller**: add to `Inertia::render()` select/only
+3. **TypeScript**: update interface in `types/`
+4. **React component**: update Props and render
+
+## Common Gotchas
+
+1. **No React Router**: Inertia replaces client routing. Use `<Link>` and `router` from `@inertiajs/react`.
+2. **Props reset on navigation**: Inertia replaces the entire page component. Local `useState` resets. Use `preserveState: true` or a state manager.
+3. **Validation errors**: auto-available via `useForm().errors`. No manual error handling needed.
+4. **Flash messages**: use `->with('success', 'msg')` on redirects. Access via shared data.
+5. **File uploads**: `useForm` handles multipart automatically when data contains File objects.
+6. **Ziggy routes**: use `route('name')` in React via Ziggy. Never hardcode URLs.
+7. **Partial reloads**: wrap expensive props in closures `fn ()` in controller. Request with `router.reload({ only: ['prop'] })`.
+8. **SSR**: supported via `@inertiajs/react/server`. Build with `npm run build:ssr`.
+9. **shadcn/ui install**: each component must be added individually with `npx shadcn@latest add <name>`.
+10. **Tailwind v4**: uses CSS-based config, not `tailwind.config.js`. CSS layers matter for component overrides.