@smicolon/ai-kit 0.3.2 → 0.4.1

package/packs/nuxtjs/skills/accessibility-validator/SKILL.md

@@ -1,183 +0,0 @@
----
-name: vue-accessibility-validator
-description: Automatically validate Vue 3/Nuxt.js components meet WCAG 2.1 AA standards. Use when creating components, forms, buttons, modals, navigation, or any interactive UI elements.
----
-
-# Vue Accessibility Validator
-
-## Activation Triggers
-
-This skill activates when:
-- Creating Vue components
-- Writing template sections
-- Adding interactive elements
-- Mentioning "component", "form", "button"
-
-## Checks
-
-### Check 1: Semantic HTML
-
-```vue
-<!-- WRONG -->
-<div @click="handleAction">Click me</div>
-
-<!-- CORRECT -->
-<button type="button" @click="handleAction">
-  Click me
-</button>
-```
-
-**Rule**: Interactive elements must use semantic HTML (`<button>`, `<a>`, `<input>`) not generic `<div>` or `<span>`.
-
-### Check 2: Form Labels
-
-```vue
-<!-- WRONG -->
-<input v-model="email" placeholder="Email" />
-
-<!-- CORRECT -->
-<label for="email">Email</label>
-<input id="email" v-model="email" aria-describedby="email-hint" />
-<span id="email-hint">Your work email address</span>
-```
-
-**Rule**: All form inputs must have associated labels or aria-label.
-
-### Check 3: Keyboard Navigation
-
-```vue
-<!-- WRONG - Only mouse -->
-<div @click="toggle" class="dropdown">
-
-<!-- CORRECT - Keyboard accessible -->
-<button
-  type="button"
-  @click="toggle"
-  @keydown.enter="toggle"
-  @keydown.space.prevent="toggle"
-  :aria-expanded="isOpen"
-  aria-haspopup="listbox"
->
-```
-
-**Rule**: All interactive elements must be keyboard accessible.
-
-### Check 4: Focus Management
-
-```vue
-<!-- Modal with focus trap -->
-<template>
-  <div
-    v-if="isOpen"
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby="modal-title"
-    @keydown.escape="close"
-  >
-    <h2 id="modal-title">Modal Title</h2>
-    <!-- Focus trapped inside -->
-    <button ref="closeButton" @click="close">Close</button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
-
-const closeButton = ref<HTMLButtonElement>()
-
-watch(isOpen, async (open) => {
-  if (open) {
-    await nextTick()
-    closeButton.value?.focus()
-  }
-})
-</script>
-```
-
-### Check 5: Image Alt Text
-
-```vue
-<!-- WRONG -->
-<img :src="product.image" />
-
-<!-- CORRECT - Informative image -->
-<img :src="product.image" :alt="product.name" />
-
-<!-- CORRECT - Decorative image -->
-<img :src="decorativePattern" alt="" role="presentation" />
-```
-
-### Check 6: Color Contrast
-
-Ensure 4.5:1 ratio for normal text, 3:1 for large text.
-
-```vue
-<!-- Use Tailwind classes that meet contrast -->
-<p class="text-gray-700 bg-white">Readable text</p>
-
-<!-- WRONG - Low contrast -->
-<p class="text-gray-400 bg-white">Hard to read</p>
-```
-
-### Check 7: ARIA Attributes
-
-```vue
-<!-- Loading state -->
-<button :aria-busy="isLoading" :disabled="isLoading">
-  <span v-if="isLoading" aria-live="polite">Loading...</span>
-  <span v-else>Submit</span>
-</button>
-
-<!-- Expandable section -->
-<button
-  :aria-expanded="isExpanded"
-  :aria-controls="panelId"
-  @click="toggle"
->
-  Show Details
-</button>
-<div :id="panelId" v-show="isExpanded">
-  Details content
-</div>
-```
-
-## Auto-Fix Actions
-
-When issues detected:
-
-1. **div with @click** -> Convert to `<button type="button">`
-2. **Missing label** -> Add `<label>` or `aria-label`
-3. **Missing keyboard handler** -> Add `@keydown` handlers
-4. **Missing ARIA** -> Add appropriate ARIA attributes
-5. **Missing alt** -> Prompt for alt text
-
-## Validation Report
-
-```
-ACCESSIBILITY VALIDATION
-
-File: components/ProductCard.vue
-
- Semantic HTML: Using button elements
- Form labels: All inputs labeled
- Keyboard nav: Tab order correct
- Focus management: Modal traps focus
- Image alt text: All images have alt
-
-Issues:
- Line 45: <div @click> should be <button>
- Line 72: Input missing aria-describedby for error
-
-Summary: 2 issues to fix
-```
-
-## WCAG 2.1 AA Checklist
-
-- [ ] 1.1.1 Non-text Content: Alt text for images
-- [ ] 1.3.1 Info and Relationships: Semantic markup
-- [ ] 1.4.3 Contrast: 4.5:1 minimum
-- [ ] 2.1.1 Keyboard: All functionality accessible
-- [ ] 2.4.3 Focus Order: Logical tab sequence
-- [ ] 2.4.7 Focus Visible: Focus indicators
-- [ ] 3.3.2 Labels: Form inputs labeled
-- [ ] 4.1.2 Name, Role, Value: ARIA correct

package/packs/nuxtjs/skills/import-convention-enforcer/SKILL.md

@@ -1,196 +0,0 @@
----
-name: nuxtjs-import-enforcer
-description: Automatically enforce consistent import patterns using Nuxt.js ~/ path aliases and proper organization. Use when writing imports, creating new Vue/TS files, or organizing code structure.
----
-
-# Nuxt.js Import Convention Enforcer
-
-## Activation Triggers
-
-This skill activates when:
-- Writing imports in Vue/TS files
-- Creating new files
-- Modifying existing files with imports
-
-## Import Order
-
-1. Vue/Nuxt built-ins (usually auto-imported)
-2. Third-party packages
-3. Composables (auto-imported from ~/composables/)
-4. Components (auto-imported from ~/components/)
-5. Types
-
-## Pattern
-
-```vue
-<script setup lang="ts">
-// 1. Vue (only if explicitly needed - usually auto-imported)
-import { ref, computed, watch } from 'vue'
-
-// 2. Third-party
-import { z } from 'zod'
-import dayjs from 'dayjs'
-
-// 3. Composables (only if not auto-imported)
-import { useAuth } from '~/composables/useAuth'
-
-// 4. Types
-import type { User } from '~/types/user'
-
-// Implementation
-const user = ref<User | null>(null)
-</script>
-```
-
-## Path Aliases
-
-```typescript
-// CORRECT - Use ~/ alias
-import { useAuth } from '~/composables/useAuth'
-import type { User } from '~/types/user'
-import { formatDate } from '~/utils/date'
-
-// WRONG - Relative imports
-import { useAuth } from '../../../composables/useAuth'
-
-// WRONG - @ alias (use ~/ for Nuxt)
-import { useAuth } from '@/composables/useAuth'
-```
-
-## Auto-Import Awareness
-
-Nuxt auto-imports these - DON'T import explicitly:
-
-### Vue Composition API
-```typescript
-// DON'T import - auto-imported
-ref, reactive, computed, watch, watchEffect, toRef, toRefs
-onMounted, onUnmounted, onBeforeMount, onBeforeUnmount
-provide, inject
-```
-
-### Nuxt Composables
-```typescript
-// DON'T import - auto-imported
-useFetch, useAsyncData, useLazyFetch, useLazyAsyncData
-useState, useCookie, useHead, useSeoMeta
-useRoute, useRouter, useRuntimeConfig
-navigateTo, abortNavigation
-definePageMeta, defineNuxtComponent
-```
-
-### Components
-```typescript
-// DON'T import - auto-imported from ~/components/
-// Just use directly in template
-<MyComponent />
-<BaseButton />
-<ui-card />
-```
-
-## Detection Rules
-
-### Rule 1: Unnecessary Vue Imports
-
-```typescript
-// WRONG
-import { ref, computed } from 'vue'
-
-// CORRECT - Just use directly
-const count = ref(0)
-const doubled = computed(() => count.value * 2)
-```
-
-**Action**: Remove unnecessary imports, use auto-imported functions
-
-### Rule 2: Unnecessary Nuxt Imports
-
-```typescript
-// WRONG
-import { useFetch } from '#app'
-import { useRoute } from 'vue-router'
-
-// CORRECT - Just use directly
-const { data } = await useFetch('/api/users')
-const route = useRoute()
-```
-
-**Action**: Remove unnecessary imports
-
-### Rule 3: Component Imports
-
-```vue
-<!-- WRONG -->
-<script setup>
-import MyComponent from '~/components/MyComponent.vue'
-</script>
-<template>
-  <MyComponent />
-</template>
-
-<!-- CORRECT - Auto-imported -->
-<script setup>
-// No import needed
-</script>
-<template>
-  <MyComponent />
-</template>
-```
-
-### Rule 4: Relative Import Detection
-
-```typescript
-// WRONG
-import { formatDate } from '../utils/date'
-import { User } from '../../types/user'
-
-// CORRECT
-import { formatDate } from '~/utils/date'
-import type { User } from '~/types/user'
-```
-
-**Action**: Convert to ~/ path alias
-
-## Auto-Fix Actions
-
-1. **Unnecessary Vue import** -> Remove import statement
-2. **Unnecessary Nuxt import** -> Remove import statement
-3. **Component import** -> Remove import, verify component exists
-4. **Relative import** -> Convert to ~/path
-5. **@ alias** -> Convert to ~/
-
-## Validation Report
-
-```
-IMPORT CONVENTION CHECK
-
-File: pages/users/[id].vue
-
- Import order: Correct (third-party, then local)
- Path aliases: Using ~/
- Auto-imports: Correctly utilized
-
-Issues:
- Line 3: Remove "import { ref } from 'vue'" - auto-imported
- Line 5: Remove "import { useFetch } from '#app'" - auto-imported
- Line 8: Convert "../utils" to "~/utils"
-
-Auto-fix available: Apply 3 fixes
-```
-
-## Configuration
-
-In `nuxt.config.ts`:
-
-```typescript
-export default defineNuxtConfig({
-  imports: {
-    // Customize auto-import dirs
-    dirs: ['composables', 'utils'],
-  },
-  components: {
-    // Customize component auto-import
-    dirs: ['~/components'],
-  },
-})
-```

package/packs/nuxtjs/skills/veevalidate-form-validator/SKILL.md

@@ -1,190 +0,0 @@
----
-name: veevalidate-form-validator
-description: This skill should be used when the user asks to "create a form", "add validation", "handle form submission", "use VeeValidate", or when creating login, signup, or data entry forms in Nuxt.js/Vue 3. Enforces VeeValidate + Zod pattern.
----
-
-# VeeValidate + Zod Form Validator
-
-## Activation Triggers
-
-This skill activates when:
-- Creating form components
-- Mentioning "form", "validation", "input"
-- Writing `<form>` or v-model
-- Handling user input
-
-## Required Pattern
-
-```vue
-<script setup lang="ts">
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import { z } from 'zod'
-
-// Define schema with Zod
-const schema = toTypedSchema(
-  z.object({
-    email: z.string().email('Invalid email'),
-    password: z.string().min(8, 'Password too short'),
-  })
-)
-
-// Create form with VeeValidate
-const { handleSubmit, errors, defineField } = useForm({
-  validationSchema: schema,
-})
-
-// Define reactive fields
-const [email, emailAttrs] = defineField('email')
-const [password, passwordAttrs] = defineField('password')
-
-// Type-safe submit handler
-const onSubmit = handleSubmit((values) => {
-  // values is typed: { email: string, password: string }
-  console.log(values.email, values.password)
-})
-</script>
-
-<template>
-  <form @submit="onSubmit">
-    <div>
-      <label for="email">Email</label>
-      <input
-        id="email"
-        v-model="email"
-        v-bind="emailAttrs"
-        type="email"
-        aria-describedby="email-error"
-      />
-      <span v-if="errors.email" id="email-error" class="error" role="alert">
-        {{ errors.email }}
-      </span>
-    </div>
-
-    <div>
-      <label for="password">Password</label>
-      <input
-        id="password"
-        v-model="password"
-        v-bind="passwordAttrs"
-        type="password"
-        aria-describedby="password-error"
-      />
-      <span v-if="errors.password" id="password-error" class="error" role="alert">
-        {{ errors.password }}
-      </span>
-    </div>
-
-    <button type="submit">Submit</button>
-  </form>
-</template>
-```
-
-## Forbidden Patterns
-
-```vue
-<!-- WRONG: No validation -->
-<input v-model="email" />
-<button @click="submit">Submit</button>
-
-<!-- WRONG: Manual validation -->
-<input v-model="email" @blur="validateEmail" />
-
-<!-- WRONG: Template-only validation -->
-<input v-model="email" :class="{ error: !isValidEmail }" />
-```
-
-## Complex Form Example
-
-```vue
-<script setup lang="ts">
-import { useForm, useFieldArray } 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(),
-    role: z.enum(['admin', 'user', 'guest']),
-    skills: z.array(z.object({
-      name: z.string().min(1),
-      level: z.number().min(1).max(5),
-    })).min(1, 'At least one skill required'),
-  })
-)
-
-const { handleSubmit, errors, defineField, values } = useForm({
-  validationSchema: schema,
-  initialValues: {
-    name: '',
-    email: '',
-    role: 'user',
-    skills: [{ name: '', level: 1 }],
-  },
-})
-
-const { fields, push, remove } = useFieldArray('skills')
-
-const [name, nameAttrs] = defineField('name')
-const [email, emailAttrs] = defineField('email')
-const [role, roleAttrs] = defineField('role')
-</script>
-```
-
-## Error Display Pattern
-
-```vue
-<!-- Inline errors -->
-<div class="field">
-  <label for="email">Email</label>
-  <input
-    id="email"
-    v-model="email"
-    v-bind="emailAttrs"
-    :class="{ 'border-red-500': errors.email }"
-    aria-invalid="errors.email ? 'true' : undefined"
-    aria-describedby="email-error"
-  />
-  <Transition name="fade">
-    <p v-if="errors.email" id="email-error" class="text-red-500 text-sm" role="alert">
-      {{ errors.email }}
-    </p>
-  </Transition>
-</div>
-```
-
-## Async Validation
-
-```typescript
-const schema = toTypedSchema(
-  z.object({
-    username: z.string()
-      .min(3)
-      .refine(async (val) => {
-        const response = await $fetch(`/api/check-username?q=${val}`)
-        return response.available
-      }, 'Username already taken'),
-  })
-)
-```
-
-## Validation Report
-
-```
-FORM VALIDATION CHECK
-
-File: components/LoginForm.vue
-
- VeeValidate: useForm imported and used
- Zod schema: Defined with proper types
- Error display: Errors shown with role="alert"
- Accessibility: Labels and aria attributes present
- Type safety: Form values properly typed
-
-Issues:
- Line 23: Missing aria-describedby on password input
- Line 34: Error message not accessible (missing role="alert")
-
-Summary: 2 issues to fix
-```

package/packs/onboard/CHANGELOG.md

@@ -1,22 +0,0 @@
-# Changelog
-
-All notable changes to smi-onboard will be documented in this file.
-
-## [Unreleased]
-
-### Changed
-- Renamed from `smi-onboard` to `onboard` as part of ai-kit migration
-- Moved from `plugins/smi-onboard/` to `packs/onboard/`
-
-## [0.1.0] - 2026-02-02
-
-### Added
-- `/onboard` command for interactive engineer onboarding
-- `@onboard-guide` agent for ongoing personalized Q&A
-- `onboard-context-provider` skill for background-aware assistance
-- Auto-detection of project type and tech stack
-- Adaptive skill assessment (3 core + conditional follow-ups)
-- Knowledge gap analysis with priority levels
-- Personalized explanations using analogies to engineer's background
-- Generated artifacts: profile, cheatsheet, task plan
-- Support for `--quick` and `--task` flags

package/packs/onboard/README.md

@@ -1,103 +0,0 @@
-# onboard
-
-Intelligent engineer onboarding that cuts ramp-up time by personalizing project guidance based on the engineer's background and first task.
-
-## The Problem
-
-Onboarding a new engineer typically requires:
-- 1-2 hours of the project lead's time explaining architecture
-- The engineer reading docs that explain things they already know
-- Trial and error to find conventions and patterns
-- Repeated "where does this go?" questions
-
-## The Solution
-
-One command: `/onboard`
-
-- Asks 3-5 adaptive questions about the engineer's background
-- Auto-analyzes the project (tech stack, conventions, patterns)
-- Identifies knowledge gaps and explains only what's new
-- Generates a personalized cheat sheet and task plan
-
-## Installation
-
-```bash
-/plugin install onboard
-```
-
-## Usage
-
-### First-Time Onboarding
-
-```bash
-/onboard
-```
-
-Interactive flow (~3-5 minutes):
-1. Background assessment (adaptive — asks more only if gaps detected)
-2. Automatic project analysis
-3. Knowledge gap identification
-4. Task-specific guidance generation
-
-### Quick Mode
-
-```bash
-/onboard --quick
-```
-
-Skips skill assessment. Assumes mid-level generalist.
-
-### With Pre-specified Task
-
-```bash
-/onboard --task "Implement user authentication"
-```
-
-Skips the task question, jumps straight to analysis and guidance.
-
-### Ongoing Questions
-
-After onboarding, use the agent for follow-up questions:
-
-```
-@onboard-guide "How do I add a new API endpoint?"
-@onboard-guide "What's the testing pattern here?"
-@onboard-guide "Where should this file go?"
-```
-
-Answers are personalized based on your onboarding profile.
-
-## Generated Artifacts
-
-All saved to `.claude/` (local, gitignored):
-
-| File | Purpose |
-|------|---------|
-| `onboard-profile.local.md` | Your background + knowledge gaps |
-| `onboard-cheatsheet.local.md` | Quick reference for commands and conventions |
-| `onboard-task-plan.local.md` | Step-by-step plan for your first task |
-
-## How Personalization Works
-
-The plugin maps new concepts to what you already know:
-
-| You Know | Project Uses | You'll See |
-|----------|-------------|------------|
-| Django views | Next.js Server Components | "Like Django views but in JSX" |
-| React state | Django ORM | "Like useState but for database records" |
-| REST APIs | GraphQL | "Same data, different query language" |
-| JavaScript | TypeScript | "Your JS + type annotations" |
-
-Senior engineers get concise syntax-focused answers. Junior engineers get more context and "why" explanations.
-
-## Components
-
-| Component | Type | Purpose |
-|-----------|------|---------|
-| `/onboard` | Command | Interactive onboarding flow |
-| `@onboard-guide` | Agent | Ongoing personalized Q&A |
-| `onboard-context-provider` | Skill | Auto-personalizes explanations |
-
-## Integration
-
-Works with all Smicolon framework plugins. When the project uses `django`, `nextjs`, or others, the onboarding automatically includes framework-specific conventions.