@smicolon/ai-kit 0.0.1 → 0.1.1

package/packs/nuxtjs/commands/component-create.md

@@ -0,0 +1,223 @@
+---
+name: component-create
+description: Create a Nuxt.js/Vue 3 component following Smicolon conventions
+---
+
+# Nuxt.js Component Creation
+
+## Component Types
+
+1. **Page Component** - `/pages/*.vue`
+2. **Layout Component** - `/layouts/*.vue`
+3. **UI Component** - `/components/*.vue`
+4. **Composable** - `/composables/*.ts`
+
+## Template
+
+### Basic Component
+
+```vue
+<script setup lang="ts">
+// Props with TypeScript
+interface Props {
+  title: string
+  variant?: 'primary' | 'secondary'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+})
+
+// Emits with TypeScript
+const emit = defineEmits<{
+  (e: 'update', value: string): void
+  (e: 'close'): void
+}>()
+
+// Reactive state (auto-imported)
+const isOpen = ref(false)
+
+// Computed (auto-imported)
+const buttonClass = computed(() => `btn-${props.variant}`)
+
+// Methods
+function handleClick() {
+  emit('update', 'new value')
+}
+</script>
+
+<template>
+  <div class="component">
+    <h2>{{ title }}</h2>
+    <button
+      type="button"
+      :class="buttonClass"
+      @click="emit('close')"
+    >
+      Close
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.component {
+  /* Scoped styles */
+}
+</style>
+```
+
+### Page Component
+
+```vue
+<script setup lang="ts">
+// Page meta
+definePageMeta({
+  title: 'User Profile',
+  middleware: ['auth'],
+})
+
+// Route params
+const route = useRoute()
+const userId = computed(() => route.params.id as string)
+
+// Data fetching
+const { data: user, pending, error } = await useFetch(`/api/users/${userId.value}`)
+
+// SEO
+useHead({
+  title: () => user.value?.name || 'User Profile',
+})
+</script>
+
+<template>
+  <div>
+    <p v-if="pending">Loading...</p>
+    <p v-else-if="error">Error: {{ error.message }}</p>
+    <div v-else-if="user">
+      <h1>{{ user.name }}</h1>
+      <p>{{ user.email }}</p>
+    </div>
+  </div>
+</template>
+```
+
+### Form Component
+
+```vue
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { z } from 'zod'
+
+const schema = toTypedSchema(
+  z.object({
+    name: z.string().min(1, 'Name required'),
+    email: z.string().email('Invalid email'),
+  })
+)
+
+const { handleSubmit, errors, defineField } = useForm({
+  validationSchema: schema,
+})
+
+const [name, nameAttrs] = defineField('name')
+const [email, emailAttrs] = defineField('email')
+
+const emit = defineEmits<{
+  (e: 'submit', data: { name: string; email: string }): void
+}>()
+
+const onSubmit = handleSubmit((values) => {
+  emit('submit', values)
+})
+</script>
+
+<template>
+  <form @submit="onSubmit">
+    <div>
+      <label for="name">Name</label>
+      <input id="name" v-model="name" v-bind="nameAttrs" />
+      <span v-if="errors.name" role="alert">{{ errors.name }}</span>
+    </div>
+    <div>
+      <label for="email">Email</label>
+      <input id="email" v-model="email" v-bind="emailAttrs" type="email" />
+      <span v-if="errors.email" role="alert">{{ errors.email }}</span>
+    </div>
+    <button type="submit">Submit</button>
+  </form>
+</template>
+```
+
+### Composable
+
+```typescript
+// composables/useCounter.ts
+export function useCounter(initial = 0) {
+  const count = useState('counter', () => initial)
+
+  function increment() {
+    count.value++
+  }
+
+  function decrement() {
+    count.value--
+  }
+
+  function reset() {
+    count.value = initial
+  }
+
+  return {
+    count: readonly(count),
+    increment,
+    decrement,
+    reset,
+  }
+}
+```
+
+## Accessibility Checklist
+
+- [ ] Semantic HTML elements (`<button>`, `<nav>`, `<main>`)
+- [ ] Keyboard navigation (tab order, focus management)
+- [ ] ARIA attributes where needed
+- [ ] Focus indicators visible
+- [ ] Color contrast 4.5:1 minimum
+- [ ] Form labels associated with inputs
+- [ ] Error messages announced to screen readers
+
+## Naming Conventions
+
+- Components: PascalCase (`UserCard.vue`)
+- Composables: camelCase with `use` prefix (`useAuth.ts`)
+- Pages: kebab-case (`user-profile.vue`)
+- Layouts: kebab-case (`default.vue`, `dashboard.vue`)
+
+## File Structure
+
+```
+components/
+├── ui/
+│   ├── Button.vue
+│   ├── Card.vue
+│   └── Modal.vue
+├── layout/
+│   ├── Header.vue
+│   └── Footer.vue
+└── feature/
+    ├── UserCard.vue
+    └── ProductList.vue
+
+composables/
+├── useAuth.ts
+├── useUser.ts
+└── useCart.ts
+
+pages/
+├── index.vue
+├── login.vue
+└── users/
+    ├── index.vue
+    └── [id].vue
+```

package/packs/nuxtjs/rules/components.md

@@ -0,0 +1,101 @@
+---
+paths:
+  - "**/components/**/*.vue"
+  - "**/pages/**/*.vue"
+  - "**/layouts/**/*.vue"
+---
+
+# Nuxt.js Component Standards
+
+## Script Setup Pattern (MANDATORY)
+
+```vue
+<script setup lang="ts">
+// Props with TypeScript
+interface Props {
+  title: string
+  variant?: 'primary' | 'secondary'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+})
+
+// Emits with TypeScript
+const emit = defineEmits<{
+  (e: 'update', value: string): void
+  (e: 'close'): void
+}>()
+
+// Reactive state
+const isOpen = ref(false)
+
+// Computed
+const buttonClass = computed(() => `btn-${props.variant}`)
+</script>
+
+<template>
+  <div class="component">
+    <h2>{{ title }}</h2>
+    <button type="button" :class="buttonClass" @click="emit('close')">
+      Close
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.component {
+  /* Scoped styles */
+}
+</style>
+```
+
+## Accessibility (WCAG 2.1 AA)
+
+```vue
+<!-- WRONG -->
+<div @click="handleAction">Click me</div>
+
+<!-- CORRECT -->
+<button type="button" @click="handleAction">
+  Click me
+</button>
+```
+
+## Auto-Imports
+
+Nuxt auto-imports these - DON'T import explicitly:
+
+```typescript
+// Already auto-imported:
+// ref, reactive, computed, watch, watchEffect
+// useFetch, useAsyncData, useState, useCookie
+// useHead, useSeoMeta, useRoute, useRouter
+// navigateTo, definePageMeta
+
+// WRONG - unnecessary import
+import { ref, computed } from 'vue'
+
+// CORRECT - just use directly
+const count = ref(0)
+const doubled = computed(() => count.value * 2)
+```
+
+## Path Aliases
+
+```typescript
+// CORRECT
+import { useAuth } from '~/composables/useAuth'
+import type { User } from '~/types/user'
+
+// WRONG
+import { useAuth } from '../../../composables/useAuth'
+import { useAuth } from '@/composables/useAuth'  // Use ~/ for Nuxt
+```
+
+## Forbidden Patterns
+
+- Options API (use Composition API with `<script setup>`)
+- Explicit imports for auto-imported items
+- `any` type
+- Non-semantic interactive elements

package/packs/nuxtjs/rules/composables.md

@@ -0,0 +1,118 @@
+---
+paths:
+  - "**/composables/**/*.ts"
+  - "**/composables/**/*.js"
+---
+
+# Nuxt.js Composables Standards
+
+## Structure
+
+```typescript
+interface UseUserOptions {
+  immediate?: boolean
+}
+
+interface UseUserReturn {
+  user: Ref<User | null>
+  isLoading: Ref<boolean>
+  error: Ref<Error | null>
+  refresh: () => Promise<void>
+}
+
+export function useUser(userId: string, options: UseUserOptions = {}): UseUserReturn {
+  const { immediate = true } = options
+
+  const user = ref<User | null>(null)
+  const isLoading = ref(false)
+  const error = ref<Error | null>(null)
+
+  async function refresh() {
+    isLoading.value = true
+    try {
+      const { data } = await useFetch<User>(`/api/users/${userId}`)
+      user.value = data.value
+      error.value = null
+    } catch (e) {
+      error.value = e instanceof Error ? e : new Error('Unknown error')
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  if (immediate) {
+    refresh()
+  }
+
+  return { user, isLoading, error, refresh }
+}
+```
+
+## Naming Convention
+
+- File: `use{Name}.ts`
+- Function: `use{Name}`
+- Always export named function
+- Located in `~/composables/`
+
+## Auto-Import Behavior
+
+Composables in `~/composables/` are auto-imported:
+
+```typescript
+// In any component - no import needed
+const { user, isLoading } = useUser('123')
+```
+
+## Data Fetching Pattern
+
+```typescript
+// Using useFetch (auto-imported)
+export function useProducts() {
+  const { data, pending, error, refresh } = useFetch<Product[]>('/api/products', {
+    key: 'products',
+    default: () => [],
+  })
+
+  return {
+    products: data,
+    isLoading: pending,
+    error,
+    refresh,
+  }
+}
+
+// Using useAsyncData with custom fetch
+export function useProduct(id: string) {
+  return useAsyncData(`product-${id}`, () => {
+    return $fetch<Product>(`/api/products/${id}`)
+  })
+}
+```
+
+## State Management Pattern
+
+```typescript
+// Shared state across components
+export function useCounter() {
+  // useState is auto-imported and persists across navigation
+  const count = useState('counter', () => 0)
+
+  function increment() {
+    count.value++
+  }
+
+  function decrement() {
+    count.value--
+  }
+
+  return { count, increment, decrement }
+}
+```
+
+## Forbidden Patterns
+
+- Options API style composables
+- Explicit import of auto-imported functions
+- Mutable shared state without useState
+- Missing TypeScript types

package/packs/nuxtjs/rules/server-routes.md

@@ -0,0 +1,127 @@
+---
+paths:
+  - "**/server/api/**/*.ts"
+  - "**/server/routes/**/*.ts"
+---
+
+# Nuxt.js Server Routes Standards
+
+## Structure
+
+```typescript
+import { z } from 'zod'
+
+const createUserSchema = z.object({
+  email: z.string().email(),
+  name: z.string().min(1),
+})
+
+export default defineEventHandler(async (event) => {
+  // Read and validate body
+  const body = await readBody(event)
+  const result = createUserSchema.safeParse(body)
+
+  if (!result.success) {
+    throw createError({
+      statusCode: 400,
+      message: 'Validation error',
+      data: result.error.issues,
+    })
+  }
+
+  // Business logic
+  const user = await createUser(result.data)
+
+  // Return response
+  return user
+})
+```
+
+## Requirements
+
+- Zod validation for inputs
+- Proper error handling with createError
+- TypeScript types
+- No secrets in responses
+
+## Event Handlers
+
+```typescript
+// GET /api/users
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event)
+  return await getUsers(query)
+})
+
+// POST /api/users
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event)
+  return await createUser(body)
+})
+
+// GET /api/users/[id]
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id')
+  return await getUser(id)
+})
+
+// PATCH /api/users/[id]
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id')
+  const body = await readBody(event)
+  return await updateUser(id, body)
+})
+
+// DELETE /api/users/[id]
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id')
+  await deleteUser(id)
+  return { success: true }
+})
+```
+
+## Error Handling
+
+```typescript
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id')
+
+  const user = await getUser(id)
+
+  if (!user) {
+    throw createError({
+      statusCode: 404,
+      message: `User ${id} not found`,
+    })
+  }
+
+  return user
+})
+```
+
+## Authentication
+
+```typescript
+export default defineEventHandler(async (event) => {
+  // Check session/auth
+  const session = await getUserSession(event)
+
+  if (!session) {
+    throw createError({
+      statusCode: 401,
+      message: 'Unauthorized',
+    })
+  }
+
+  // Proceed with authenticated request
+  return await getProtectedData(session.user.id)
+})
+```
+
+## Forbidden Patterns
+
+- Unvalidated inputs
+- Exposing stack traces
+- Hardcoded secrets
+- Missing error handling
+- Any type