@smicolon/ai-kit 0.3.1 → 0.4.0

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

@@ -1,223 +0,0 @@
----
-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

@@ -1,101 +0,0 @@
----
-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

@@ -1,118 +0,0 @@
----
-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

@@ -1,127 +0,0 @@
----
-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