@codihaus/claude-skills 1.3.0 → 1.4.0

package/knowledge/stacks/directus/_index.md

@@ -326,11 +326,52 @@ export default async function ProductsPage() {
 }
 ```
 
+## Extension Development
+
+For custom extensions (hooks, endpoints, interfaces, panels, modules):
+
+**See:** `references/extensions.md`
+
+Covers:
+- API Extensions: Hooks, Endpoints, Operations
+- App Extensions: Interfaces, Displays, Layouts, Panels, Modules, Themes
+- Bundle structure and naming conventions
+- Services API (ItemsService, FilesService, etc.)
+- Composables (useApi, useStores, useItems)
+
+### Quick Extension Example
+
+```typescript
+// Hook: Run code on item create
+export default ({ action }, { services, getSchema }) => {
+  const { ItemsService } = services;
+
+  action('items.create', async (meta, context) => {
+    const itemsService = new ItemsService('logs', {
+      schema: await getSchema(),
+      accountability: context.accountability,
+    });
+
+    await itemsService.createOne({
+      action: 'created',
+      collection: meta.collection,
+      item_id: meta.key,
+    }, { emitEvents: false });
+  });
+};
+```
+
+```bash
+# Create extension
+npx create-directus-extension@latest
+```
+
 ## Resources
 
 ### Official Docs
 - Docs: https://docs.directus.io
 - SDK: https://docs.directus.io/reference/sdk/
+- Extensions: https://docs.directus.io/extensions/
 
 ### Context7 Queries
 
@@ -339,6 +380,8 @@ Query: "Directus SDK TypeScript setup"
 Query: "Directus permissions best practices"
 Query: "Directus flows automation"
 Query: "Directus file uploads"
+Query: "Directus hooks examples"
+Query: "Directus custom endpoints"
 ```
 
 ### MCP Tools

package/knowledge/stacks/directus/references/extensions.md

@@ -0,0 +1,444 @@
+# Directus Extension Development
+
+Comprehensive guide for developing Directus extensions: hooks, endpoints, operations, interfaces, displays, layouts, panels, modules, and themes.
+
+## Quick Start
+
+```bash
+# Create new extension
+npx create-directus-extension@latest
+
+# Enable auto-reload for development
+# In docker-compose or .env:
+EXTENSIONS_AUTO_RELOAD: true
+```
+
+## Extension Types
+
+### API Extensions
+| Type | Purpose | Example |
+|------|---------|---------|
+| **Hooks** | Run code on events (CRUD, schedule) | Send email on item create |
+| **Endpoints** | Custom API routes | `/custom-api/products` |
+| **Operations** | Custom Flow steps | Data transformation in Flows |
+
+### App Extensions
+| Type | Purpose | Example |
+|------|---------|---------|
+| **Interfaces** | Form inputs in Editor | Custom date picker |
+| **Displays** | Single value display | Status badge |
+| **Layouts** | Item listing views | Kanban board |
+| **Panels** | Dashboard widgets | Analytics chart |
+| **Modules** | Top-level areas | Custom admin section |
+| **Themes** | Data Studio styling | Dark theme |
+
+## Bundle Structure (Recommended)
+
+Always use bundle extensions for organization:
+
+```
+directus-extension-{bundle-name}/
+├── package.json
+├── src/
+│   ├── utils/           # Shared utilities
+│   ├── commons/         # Common code
+│   ├── services/        # Shared services
+│   ├── hook-{name}/     # Individual hooks
+│   ├── endpoint-{name}/ # Individual endpoints
+│   ├── interface-{name}/
+│   └── ...
+└── dist/
+```
+
+**Naming conventions:**
+- `hook-send-email` or `send-email-hook`
+- `endpoint-products` → API route: `/products`
+- `interface-custom-input`
+
+**Important:** Endpoint folder name includes prefix (`endpoint-products`), but `name` in package.json omits it (`products`).
+
+## Core Patterns
+
+### AsyncHandler (Required for Endpoints)
+
+Always wrap endpoint handlers to prevent crashes:
+
+```typescript
+import type { RequestHandler, Request, Response, NextFunction } from 'express';
+
+const asyncHandler = (fn: RequestHandler) => (req: Request, res: Response, next: NextFunction) =>
+  Promise.resolve(fn(req, res, next)).catch(next);
+
+export default asyncHandler;
+```
+
+### Creating Services with Accountability
+
+```typescript
+export default ({ action }, { services, getSchema }) => {
+  const { ItemsService } = services;
+
+  action('items.create', async (meta, context) => {
+    const itemsService = new ItemsService('collection_name', {
+      schema: await getSchema(),
+      accountability: context.accountability, // Track user actions
+    });
+
+    // Use emitEvents: false to prevent infinite loops
+    await itemsService.updateOne(meta.key, { processed: true }, { emitEvents: false });
+  });
+};
+```
+
+---
+
+## Hooks
+
+### Filter Hook (Before Event)
+
+```typescript
+export default ({ filter }, { services, getSchema }) => {
+  filter('items.create', async (payload, meta, context) => {
+    // Modify payload before creation
+    payload.modified_at = new Date();
+    return payload; // Must return payload
+  });
+};
+```
+
+### Action Hook (After Event)
+
+```typescript
+export default ({ action }, { services, getSchema, logger }) => {
+  action('items.create', async (meta, context) => {
+    logger.info(`Item ${meta.key} created in ${meta.collection}`);
+
+    // Side effects here
+  });
+};
+```
+
+### Collection-Specific Hook
+
+```typescript
+export default ({ action }) => {
+  // Only triggers for 'articles' collection
+  action('articles.items.create', async (meta, context) => {
+    console.log(`New article: ${meta.key}`);
+  });
+};
+```
+
+### Schedule Hook (Cron)
+
+```typescript
+export default ({ schedule }, { services, getSchema }) => {
+  // Every 15 minutes
+  schedule('*/15 * * * *', async () => {
+    console.log('Running scheduled task');
+  });
+
+  // Daily at midnight
+  schedule('0 0 * * *', async () => {
+    // Cleanup old data
+  });
+};
+```
+
+### Hook Events
+
+**Filter Events:**
+| Event | Payload | Use Case |
+|-------|---------|----------|
+| `items.create` | New item data | Modify before create |
+| `items.update` | Updated fields | Validate changes |
+| `items.delete` | Item keys | Prevent deletion |
+| `auth.login` | Login payload | Custom auth validation |
+
+**Action Events:**
+| Event | Meta | Use Case |
+|-------|------|----------|
+| `items.create` | `key`, `collection`, `payload` | Send notifications |
+| `items.update` | `keys`, `collection`, `payload` | Sync external systems |
+| `items.delete` | `keys`, `collection` | Cleanup related data |
+| `server.start` | `server` | Initialize resources |
+
+---
+
+## Endpoints
+
+### Basic Endpoint
+
+```typescript
+export default {
+  id: 'products',
+  handler: (router, { services, getSchema }) => {
+    const { ItemsService } = services;
+
+    router.get('/', asyncHandler(async (req, res) => {
+      const itemsService = new ItemsService('products', {
+        schema: await getSchema(),
+        accountability: req.accountability,
+      });
+
+      const items = await itemsService.readByQuery({ limit: 25 });
+      res.json({ data: items });
+    }));
+
+    router.get('/:id', asyncHandler(async (req, res) => {
+      const itemsService = new ItemsService('products', {
+        schema: await getSchema(),
+        accountability: req.accountability,
+      });
+
+      const item = await itemsService.readOne(req.params.id);
+      res.json({ data: item });
+    }));
+
+    router.post('/', asyncHandler(async (req, res) => {
+      const itemsService = new ItemsService('products', {
+        schema: await getSchema(),
+        accountability: req.accountability,
+      });
+
+      const key = await itemsService.createOne(req.body);
+      res.json({ data: { id: key } });
+    }));
+  },
+};
+```
+
+---
+
+## Services Reference
+
+### ItemsService
+
+```typescript
+const itemsService = new ItemsService('collection', {
+  schema: await getSchema(),
+  accountability: context.accountability,
+});
+
+// Create
+const id = await itemsService.createOne({ title: 'Hello' });
+const ids = await itemsService.createMany([{ title: 'One' }, { title: 'Two' }]);
+
+// Read
+const item = await itemsService.readOne('item_id');
+const items = await itemsService.readMany(['id1', 'id2']);
+const results = await itemsService.readByQuery({
+  fields: ['id', 'title', 'author.*'],
+  filter: { status: { _eq: 'published' } },
+  sort: ['-date_created'],
+  limit: 10,
+});
+
+// Update
+await itemsService.updateOne('id', { title: 'Updated' });
+await itemsService.updateMany(['id1', 'id2'], { status: 'archived' });
+
+// Delete
+await itemsService.deleteOne('id');
+await itemsService.deleteMany(['id1', 'id2']);
+```
+
+### Other Services
+
+```typescript
+const {
+  CollectionsService,
+  FieldsService,
+  RelationsService,
+  FilesService,
+  UsersService,
+  RolesService,
+} = services;
+```
+
+---
+
+## App Extensions
+
+### Interface
+
+```typescript
+// index.ts
+import { defineInterface } from '@directus/extensions-sdk';
+import InterfaceComponent from './interface.vue';
+
+export default defineInterface({
+  id: 'custom-input',
+  name: 'Custom Input',
+  icon: 'text_fields',
+  description: 'A custom input interface',
+  component: InterfaceComponent,
+  types: ['string'],
+  options: [
+    {
+      field: 'placeholder',
+      name: 'Placeholder',
+      type: 'string',
+      meta: { interface: 'input', width: 'full' },
+    },
+  ],
+});
+```
+
+```vue
+<!-- interface.vue -->
+<template>
+  <input
+    :value="value"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    @input="emit('input', $event.target.value)"
+  />
+</template>
+
+<script setup>
+defineProps({
+  value: { type: String, default: null },
+  placeholder: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  collection: { type: String, required: true },
+  field: { type: String, required: true },
+  primaryKey: { type: String, default: null },
+});
+
+const emit = defineEmits(['input', 'setFieldValue']);
+</script>
+```
+
+### Display
+
+```typescript
+import { defineDisplay } from '@directus/extensions-sdk';
+import DisplayComponent from './display.vue';
+
+export default defineDisplay({
+  id: 'custom-display',
+  name: 'Custom Display',
+  icon: 'visibility',
+  component: DisplayComponent,
+  types: ['string'],
+  options: [],
+});
+```
+
+### Panel (Dashboard)
+
+```typescript
+import { definePanel } from '@directus/extensions-sdk';
+import PanelComponent from './panel.vue';
+
+export default definePanel({
+  id: 'custom-panel',
+  name: 'Custom Panel',
+  icon: 'dashboard',
+  component: PanelComponent,
+  minWidth: 12,
+  minHeight: 8,
+  options: [
+    {
+      field: 'collection',
+      name: 'Collection',
+      type: 'string',
+      meta: { interface: 'system-collection', width: 'full' },
+    },
+  ],
+});
+```
+
+### Module
+
+```typescript
+import { defineModule } from '@directus/extensions-sdk';
+import ModuleComponent from './module.vue';
+
+export default defineModule({
+  id: 'custom-module',
+  name: 'Custom Module',
+  icon: 'extension',
+  routes: [
+    { path: '', component: ModuleComponent },
+    { path: 'subpage', component: () => import('./subpage.vue') },
+  ],
+  preRegisterCheck(user) {
+    return user.role?.admin_access === true; // Only for admins
+  },
+});
+```
+
+---
+
+## Composables (App Extensions)
+
+```typescript
+import { useApi, useStores, useCollection, useItems } from '@directus/extensions-sdk';
+
+// API calls
+const api = useApi();
+const response = await api.get('/items/articles');
+
+// Stores
+const { useFieldsStore, useCollectionsStore, useUserStore } = useStores();
+const fieldsStore = useFieldsStore();
+const fields = fieldsStore.getFieldsForCollection('articles');
+
+// Collection metadata
+const { info, fields, primaryKeyField } = useCollection('articles');
+
+// Fetch items
+const { items, getItems, loading, itemCount } = useItems(ref('articles'), {
+  fields: ref(['*']),
+  limit: ref(25),
+  filter: ref(null),
+});
+```
+
+---
+
+## Best Practices
+
+### DO
+- Use TypeScript for all extensions
+- Use Services over raw database queries
+- Include `accountability` when creating services
+- Use `emitEvents: false` to prevent infinite loops
+- Wrap endpoint handlers with `asyncHandler`
+- Use bundle extensions for organization
+
+### DON'T
+- Use `context.database` directly (use Services)
+- Forget error handling in endpoints
+- Create hooks that trigger themselves
+- Expose admin functionality without permission checks
+- Skip input validation in endpoints
+
+## Validation & Publishing
+
+```bash
+# Validate extension
+npx create-directus-extension@latest validate
+
+# Link for development
+npx create-directus-extension@latest link
+```
+
+### package.json for Marketplace
+
+```json
+{
+  "name": "directus-extension-your-name",
+  "version": "1.0.0",
+  "keywords": ["directus-extension"],
+  "directus:extension": {
+    "type": "bundle",
+    "path": "dist/index.js",
+    "source": "src/index.ts",
+    "host": "^10.7.0",
+    "entries": []
+  }
+}
+```

package/knowledge/stacks/nuxt/_index.md

@@ -453,11 +453,56 @@ export const useCartStore = defineStore('cart', () => {
 });
 ```
 
+## NuxtUI v4
+
+For UI components, forms, and theming with NuxtUI v4:
+
+**See:** `references/nuxtui-v4.md`
+
+Covers:
+- 130+ production-ready components
+- Forms with validation (Zod, Yup, etc.)
+- Theming and customization
+- Dark/light mode
+- Advanced UI patterns and animations
+- v3 to v4 migration guide
+
+### Quick NuxtUI Example
+
+```bash
+# Create with NuxtUI template
+npm create nuxt@latest my-app -- -t ui
+```
+
+```vue
+<script setup>
+import { z } from 'zod'
+
+const schema = z.object({
+  email: z.string().email(),
+})
+
+const state = reactive({ email: '' })
+</script>
+
+<template>
+  <UForm :state="state" :schema="schema" @submit="onSubmit">
+    <UFormField label="Email" name="email">
+      <UInput v-model="state.email" type="email" />
+    </UFormField>
+    <UButton type="submit" label="Submit" />
+  </UForm>
+</template>
+```
+
+**Important:** NuxtUI v4 requires Nuxt 4 and `<UApp>` wrapper.
+
 ## Resources
 
 ### Official Docs
 - Docs: https://nuxt.com/docs
 - Modules: https://nuxt.com/modules
+- NuxtUI: https://ui.nuxt.com
 
 ### Context7 Queries
 
@@ -466,4 +511,6 @@ Query: "Nuxt 3 useFetch best practices"
 Query: "Nuxt 3 server routes authentication"
 Query: "Nuxt 3 middleware patterns"
 Query: "Nuxt 3 Pinia setup"
+Query: "NuxtUI v4 components"
+Query: "NuxtUI theming"
 ```

package/knowledge/stacks/nuxt/references/nuxtui-v4.md

@@ -0,0 +1,519 @@
+# NuxtUI v4
+
+Comprehensive guide for NuxtUI v4 - 130+ production-ready components for Nuxt applications.
+
+## Quick Start
+
+### Installation
+
+```bash
+# Create with template (recommended)
+npm create nuxt@latest my-app -- -t ui
+
+# Or add to existing project
+pnpm add @nuxt/ui
+```
+
+### Configuration
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui'],
+  ui: {
+    prefix: 'U',         // Component prefix (default)
+    colorMode: true,     // Enable dark/light mode
+    colors: {
+      primary: 'green',
+      neutral: 'slate',
+    },
+  },
+});
+```
+
+```css
+/* app/assets/css/main.css */
+@import "tailwindcss";
+@import "@nuxt/ui";
+```
+
+```vue
+<!-- app.vue - Required wrapper -->
+<template>
+  <UApp>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
+</template>
+```
+
+**Important:** `<UApp>` is required for Toast, Tooltip, and Modal to work.
+
+---
+
+## Common Components
+
+### Button
+
+```vue
+<UButton
+  label="Click me"
+  color="primary"        <!-- primary | secondary | success | error | warning | info | neutral -->
+  variant="solid"        <!-- solid | outline | soft | subtle | ghost | link -->
+  size="md"              <!-- xs | sm | md | lg | xl -->
+  icon="i-lucide-check"
+  :loading="isLoading"
+  :loading-auto="true"   <!-- Auto loading on async @click -->
+  @click="handleClick"
+/>
+
+<!-- Icon only -->
+<UButton icon="i-lucide-settings" square />
+
+<!-- As link -->
+<UButton to="/dashboard" label="Dashboard" />
+```
+
+### Input
+
+```vue
+<UInput
+  v-model="value"
+  placeholder="Enter text..."
+  type="text"            <!-- text | email | password | number | etc. -->
+  icon="i-lucide-user"
+  :loading="isLoading"
+  :disabled="false"
+/>
+
+<!-- With model modifiers -->
+<UInput v-model.nullable="value" />   <!-- Empty -> null -->
+<UInput v-model.optional="value" />   <!-- Empty -> undefined -->
+
+<!-- With slots -->
+<UInput v-model="value">
+  <template #leading>
+    <UIcon name="i-lucide-search" />
+  </template>
+  <template #trailing>
+    <UButton icon="i-lucide-x" size="xs" variant="ghost" />
+  </template>
+</UInput>
+```
+
+### Form with Validation
+
+```vue
+<script setup>
+import { z } from 'zod'
+
+const schema = z.object({
+  email: z.string().email('Invalid email'),
+  password: z.string().min(8, 'Min 8 characters'),
+})
+
+const state = reactive({
+  email: '',
+  password: '',
+})
+
+async function onSubmit(data) {
+  // data is validated and transformed
+  console.log('Valid:', data)
+}
+</script>
+
+<template>
+  <UForm :state="state" :schema="schema" @submit="onSubmit">
+    <UFormField label="Email" name="email" required>
+      <UInput v-model="state.email" type="email" />
+    </UFormField>
+
+    <UFormField label="Password" name="password" required>
+      <UInput v-model="state.password" type="password" />
+    </UFormField>
+
+    <UButton type="submit" label="Submit" />
+  </UForm>
+</template>
+```
+
+### Modal
+
+```vue
+<template>
+  <UModal v-model:open="isOpen" title="Confirm">
+    <template #default>
+      <UButton @click="isOpen = true" label="Open Modal" />
+    </template>
+
+    <template #content="{ close }">
+      <p>Are you sure?</p>
+    </template>
+
+    <template #footer="{ close }">
+      <UButton @click="close" label="Cancel" variant="ghost" />
+      <UButton @click="confirm" label="Confirm" />
+    </template>
+  </UModal>
+</template>
+
+<!-- Programmatic -->
+<script setup>
+const modal = useModal()
+
+function openModal() {
+  modal.open(MyModalComponent, { /* props */ })
+}
+</script>
+```
+
+### Toast
+
+```vue
+<script setup>
+const toast = useToast()
+
+function showSuccess() {
+  toast.add({
+    title: 'Success!',
+    description: 'Changes saved.',
+    color: 'success',
+    icon: 'i-lucide-check-circle',
+  })
+}
+</script>
+```
+
+### Table
+
+```vue
+<script setup>
+const columns = [
+  { key: 'name', label: 'Name' },
+  { key: 'email', label: 'Email' },
+  { key: 'role', label: 'Role' },
+]
+
+const rows = [
+  { name: 'John', email: 'john@example.com', role: 'Admin' },
+]
+</script>
+
+<template>
+  <UTable :columns="columns" :rows="rows" />
+</template>
+```
+
+### Select
+
+```vue
+<script setup>
+const options = [
+  { value: 'vue', label: 'Vue.js' },
+  { value: 'react', label: 'React' },
+]
+const selected = ref('')
+</script>
+
+<template>
+  <USelect
+    v-model="selected"
+    :options="options"
+    placeholder="Select..."
+    value-attribute="value"
+    label-attribute="label"
+  />
+</template>
+```
+
+### Dropdown Menu
+
+```vue
+<template>
+  <UDropdownMenu>
+    <UButton label="Actions" trailing-icon="i-lucide-chevron-down" />
+
+    <template #content>
+      <UDropdownMenuItem label="Edit" icon="i-lucide-pencil" @click="edit" />
+      <UDropdownMenuItem label="Delete" icon="i-lucide-trash" color="error" />
+    </template>
+  </UDropdownMenu>
+</template>
+```
+
+### Tabs
+
+```vue
+<script setup>
+const items = [
+  { label: 'Overview', value: 'overview' },
+  { label: 'Settings', value: 'settings' },
+]
+const selected = ref('overview')
+</script>
+
+<template>
+  <UTabs v-model="selected" :items="items">
+    <template #overview>Overview content</template>
+    <template #settings>Settings content</template>
+  </UTabs>
+</template>
+```
+
+---
+
+## Theming
+
+### Semantic Colors
+
+```typescript
+// app.config.ts
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'green',    // Main brand color
+      secondary: 'blue',   // Alternative actions
+      success: 'emerald',  // Success states
+      error: 'red',        // Error states
+      warning: 'amber',    // Warnings
+      info: 'sky',         // Information
+      neutral: 'slate',    // Text, backgrounds
+    },
+  },
+})
+```
+
+### Custom CSS Variables
+
+```css
+/* main.css */
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  /* Custom colors */
+  --color-brand-500: #10b981;
+
+  /* Custom fonts */
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'Fira Code', monospace;
+}
+
+:root {
+  --color-gold: #d4af37;
+}
+```
+
+### Component Customization
+
+```typescript
+// app.config.ts - Global defaults
+export default defineAppConfig({
+  ui: {
+    button: {
+      slots: {
+        base: 'font-semibold transition-all',
+      },
+      defaultVariants: {
+        color: 'primary',
+        variant: 'solid',
+        size: 'md',
+      },
+    },
+  },
+})
+```
+
+```vue
+<!-- Per-component customization -->
+<UButton
+  label="Custom"
+  :ui="{
+    base: 'rounded-full',
+    label: 'font-bold uppercase',
+  }"
+/>
+```
+
+### Color Mode (Dark/Light)
+
+```vue
+<template>
+  <!-- Toggle button -->
+  <UColorModeButton />
+
+  <!-- Select dropdown -->
+  <UColorModeSelect />
+
+  <!-- Switch -->
+  <UColorModeSwitch />
+
+  <!-- Theme-aware image -->
+  <UColorModeImage light="/logo-light.png" dark="/logo-dark.png" />
+</template>
+```
+
+---
+
+## Advanced UI Patterns
+
+### Page Load Animation
+
+```vue
+<script setup>
+const isVisible = ref(false)
+onMounted(() => {
+  setTimeout(() => { isVisible.value = true }, 50)
+})
+</script>
+
+<template>
+  <div :class="{ 'opacity-0 translate-y-8': !isVisible, 'opacity-100 translate-y-0': isVisible }"
+       class="transition-all duration-700 ease-out">
+    <!-- Content -->
+  </div>
+</template>
+```
+
+### Staggered Animations
+
+```vue
+<template>
+  <div v-for="(item, i) in items" :key="item.id"
+       :style="{ '--delay': `${i * 0.1}s` }"
+       class="animate-slide-up">
+    {{ item.title }}
+  </div>
+</template>
+
+<style>
+.animate-slide-up {
+  animation: slideUp 0.6s ease-out var(--delay) forwards;
+  opacity: 0;
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+</style>
+```
+
+### Gradient Mesh Background
+
+```vue
+<style>
+.mesh-bg {
+  background:
+    radial-gradient(ellipse 800px 600px at 20% 20%, rgba(99, 102, 241, 0.15), transparent),
+    radial-gradient(ellipse 600px 800px at 80% 80%, rgba(168, 85, 247, 0.15), transparent);
+}
+</style>
+```
+
+### Hover Effects
+
+```vue
+<style>
+.card-hover {
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.card-hover:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+}
+</style>
+```
+
+---
+
+## v3 to v4 Migration
+
+### Component Renames
+| v3 | v4 |
+|----|-----|
+| `UButtonGroup` | `UFieldGroup` |
+| `UPageMarquee` | `UMarquee` |
+| `UPageAccordion` | `UAccordion` |
+
+### Model Modifiers
+| v3 | v4 |
+|----|-----|
+| `.nullify` | `.nullable` or `.optional` |
+
+### Nested Forms
+```vue
+<!-- v4 requires nested prop and name -->
+<UForm :state="nestedState" nested name="address">
+  <!-- fields -->
+</UForm>
+```
+
+### Module Changes
+- Replace `@nuxt/ui-pro` with `@nuxt/ui`
+- Merge `uiPro` config into `ui` config
+
+---
+
+## Icon Format
+
+NuxtUI uses Iconify. Reference icons like:
+
+```vue
+<UIcon name="i-lucide-user" />
+<UButton icon="i-heroicons-check" />
+```
+
+Browse icons: https://icones.js.org
+
+---
+
+## Dashboard Layout
+
+```vue
+<template>
+  <UDashboardGroup>
+    <UDashboardSidebar>
+      <!-- Navigation -->
+    </UDashboardSidebar>
+
+    <UDashboardPanel>
+      <UDashboardNavbar>
+        <!-- Header -->
+      </UDashboardNavbar>
+
+      <slot />
+    </UDashboardPanel>
+  </UDashboardGroup>
+</template>
+```
+
+---
+
+## Best Practices
+
+### DO
+- Use semantic colors (`primary`, not `green-500`)
+- Use `<UApp>` wrapper (required for overlays)
+- Use v4 model modifiers (`.nullable`, `.optional`)
+- Use `:ui` prop for component customization
+- Import styles in `main.css`
+
+### DON'T
+- Use v3 component names (`UButtonGroup`)
+- Use `.nullify` modifier (use `.nullable`)
+- Forget `nested` and `name` props for nested forms
+- Hardcode colors (use semantic colors)
+- Skip `<UApp>` wrapper
+
+---
+
+## Resources
+
+- Components: https://ui.nuxt.com/docs/components
+- Theming: https://ui.nuxt.com/docs/getting-started/theme
+- Icons: https://icones.js.org
+- Tailwind Colors: https://tailwindcss.com/docs/customizing-colors

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codihaus/claude-skills",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Claude Code skills for software development workflow",
   "main": "src/index.js",
   "bin": {