@smicolon/ai-kit 0.3.2 → 0.4.1

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

@@ -1,398 +0,0 @@
----
-name: component-create
-description: Create a new Next.js/React component following Smicolon conventions
----
-
-# Next.js Component Creation
-
-You are a Next.js/React component creation specialist. Your task is to create components that strictly follow Smicolon company standards.
-
-## Core Requirements
-
-### Component Standards
-- **TypeScript strict mode** (no `any` types)
-- **Functional components** with hooks
-- **Proper type definitions** for props
-- **Accessibility** (WCAG 2.1 AA)
-- **Responsive design** with Tailwind CSS
-- **Error boundaries** where appropriate
-
-### File Structure
-```
-src/components/
-├── ui/              # Reusable UI components
-│   ├── Button.tsx
-│   ├── Input.tsx
-│   └── Card.tsx
-├── features/        # Feature-specific components
-│   └── auth/
-│       ├── LoginForm.tsx
-│       └── SignupForm.tsx
-└── layouts/         # Layout components
-    ├── Header.tsx
-    └── Footer.tsx
-```
-
-## Component Types
-
-### 1. UI Components (Reusable)
-```typescript
-// src/components/ui/Button.tsx
-import { ButtonHTMLAttributes, forwardRef } from 'react'
-import { cn } from '@/lib/utils'
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost'
-  size?: 'sm' | 'md' | 'lg'
-  isLoading?: boolean
-}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant = 'primary',
-      size = 'md',
-      isLoading = false,
-      disabled,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const baseStyles = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'
-
-    const variants = {
-      primary: 'bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-600',
-      secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus-visible:ring-gray-500',
-      outline: 'border border-gray-300 bg-transparent hover:bg-gray-100 focus-visible:ring-gray-500',
-      ghost: 'hover:bg-gray-100 focus-visible:ring-gray-500',
-    }
-
-    const sizes = {
-      sm: 'h-9 px-3 text-sm',
-      md: 'h-10 px-4',
-      lg: 'h-11 px-8 text-lg',
-    }
-
-    return (
-      <button
-        ref={ref}
-        className={cn(baseStyles, variants[variant], sizes[size], className)}
-        disabled={disabled || isLoading}
-        aria-busy={isLoading}
-        {...props}
-      >
-        {isLoading && (
-          <svg
-            className="mr-2 h-4 w-4 animate-spin"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-          >
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
-        )}
-        {children}
-      </button>
-    )
-  }
-)
-
-Button.displayName = 'Button'
-```
-
-### 2. Form Components with Validation
-```typescript
-// src/components/features/auth/LoginForm.tsx
-'use client'
-
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { z } from 'zod'
-import { useMutation } from '@tanstack/react-query'
-import { Button } from '@/components/ui/Button'
-import { Input } from '@/components/ui/Input'
-import { useRouter } from 'next/navigation'
-
-const loginSchema = z.object({
-  email: z.string().email('Invalid email address'),
-  password: z.string().min(8, 'Password must be at least 8 characters'),
-})
-
-type LoginFormData = z.infer<typeof loginSchema>
-
-export function LoginForm() {
-  const router = useRouter()
-  const [errorMessage, setErrorMessage] = useState<string | null>(null)
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<LoginFormData>({
-    resolver: zodResolver(loginSchema),
-  })
-
-  const loginMutation = useMutation({
-    mutationFn: async (data: LoginFormData) => {
-      const response = await fetch('/api/auth/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.message || 'Login failed')
-      }
-
-      return response.json()
-    },
-    onSuccess: () => {
-      router.push('/dashboard')
-    },
-    onError: (error: Error) => {
-      setErrorMessage(error.message)
-    },
-  })
-
-  const onSubmit = (data: LoginFormData) => {
-    setErrorMessage(null)
-    loginMutation.mutate(data)
-  }
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6" noValidate>
-      <div>
-        <label
-          htmlFor="email"
-          className="block text-sm font-medium text-gray-700"
-        >
-          Email address
-        </label>
-        <Input
-          id="email"
-          type="email"
-          autoComplete="email"
-          {...register('email')}
-          aria-invalid={errors.email ? 'true' : 'false'}
-          aria-describedby={errors.email ? 'email-error' : undefined}
-        />
-        {errors.email && (
-          <p id="email-error" className="mt-1 text-sm text-red-600" role="alert">
-            {errors.email.message}
-          </p>
-        )}
-      </div>
-
-      <div>
-        <label
-          htmlFor="password"
-          className="block text-sm font-medium text-gray-700"
-        >
-          Password
-        </label>
-        <Input
-          id="password"
-          type="password"
-          autoComplete="current-password"
-          {...register('password')}
-          aria-invalid={errors.password ? 'true' : 'false'}
-          aria-describedby={errors.password ? 'password-error' : undefined}
-        />
-        {errors.password && (
-          <p id="password-error" className="mt-1 text-sm text-red-600" role="alert">
-            {errors.password.message}
-          </p>
-        )}
-      </div>
-
-      {errorMessage && (
-        <div
-          className="rounded-md bg-red-50 p-4"
-          role="alert"
-          aria-live="assertive"
-        >
-          <p className="text-sm text-red-800">{errorMessage}</p>
-        </div>
-      )}
-
-      <Button
-        type="submit"
-        variant="primary"
-        className="w-full"
-        isLoading={loginMutation.isPending}
-      >
-        Sign in
-      </Button>
-    </form>
-  )
-}
-```
-
-### 3. Server Components with Data Fetching
-```typescript
-// src/components/features/products/ProductList.tsx
-import { Suspense } from 'react'
-import { ProductCard } from './ProductCard'
-import { ProductCardSkeleton } from './ProductCardSkeleton'
-
-interface Product {
-  id: string
-  name: string
-  price: number
-  imageUrl: string
-}
-
-async function getProducts(): Promise<Product[]> {
-  const response = await fetch('https://api.example.com/products', {
-    next: { revalidate: 60 }, // Revalidate every 60 seconds
-  })
-
-  if (!response.ok) {
-    throw new Error('Failed to fetch products')
-  }
-
-  return response.json()
-}
-
-async function ProductListContent() {
-  const products = await getProducts()
-
-  if (products.length === 0) {
-    return (
-      <div className="py-12 text-center">
-        <p className="text-gray-500">No products found</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-      {products.map((product) => (
-        <ProductCard key={product.id} product={product} />
-      ))}
-    </div>
-  )
-}
-
-export function ProductList() {
-  return (
-    <Suspense
-      fallback={
-        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-          {Array.from({ length: 8 }).map((_, i) => (
-            <ProductCardSkeleton key={i} />
-          ))}
-        </div>
-      }
-    >
-      <ProductListContent />
-    </Suspense>
-  )
-}
-```
-
-### 4. Error Boundary
-```typescript
-// src/components/ErrorBoundary.tsx
-'use client'
-
-import { Component, ReactNode } from 'react'
-import { Button } from '@/components/ui/Button'
-
-interface Props {
-  children: ReactNode
-  fallback?: ReactNode
-}
-
-interface State {
-  hasError: boolean
-  error: Error | null
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-    this.state = { hasError: false, error: null }
-  }
-
-  static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error }
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.error('Error caught by boundary:', error, errorInfo)
-  }
-
-  render() {
-    if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback
-      }
-
-      return (
-        <div className="flex min-h-screen flex-col items-center justify-center p-4">
-          <div className="max-w-md space-y-4 text-center">
-            <h2 className="text-2xl font-bold text-gray-900">
-              Something went wrong
-            </h2>
-            <p className="text-gray-600">
-              {this.state.error?.message || 'An unexpected error occurred'}
-            </p>
-            <Button
-              onClick={() => this.setState({ hasError: false, error: null })}
-            >
-              Try again
-            </Button>
-          </div>
-        </div>
-      )
-    }
-
-    return this.props.children
-  }
-}
-```
-
-## Accessibility Checklist
-
-- [ ] Semantic HTML elements
-- [ ] Proper ARIA labels and roles
-- [ ] Keyboard navigation support
-- [ ] Focus management
-- [ ] Error messages with `role="alert"`
-- [ ] Loading states with `aria-busy`
-- [ ] Form validation with `aria-invalid` and `aria-describedby`
-- [ ] Sufficient color contrast
-- [ ] Alt text for images
-
-## Quality Checklist
-
-- [ ] TypeScript strict mode (no `any`)
-- [ ] Proper type definitions
-- [ ] Zod validation for forms
-- [ ] TanStack Query for API calls
-- [ ] Error and loading states
-- [ ] Responsive design
-- [ ] Tailwind CSS
-- [ ] WCAG 2.1 AA compliance
-- [ ] Server components where possible
-- [ ] Suspense boundaries for async content
-
-Now, ask the user what component they want to create!

package/packs/nextjs/rules/api-routes.md

@@ -1,129 +0,0 @@
----
-paths:
-  - "**/app/api/**/*.ts"
-  - "**/pages/api/**/*.ts"
----
-
-# Next.js API Route Standards
-
-## Structure (App Router)
-
-```typescript
-import { NextResponse } from 'next/server'
-import { z } from 'zod'
-
-const createUserSchema = z.object({
-  email: z.string().email(),
-  name: z.string().min(1),
-})
-
-export async function POST(request: Request) {
-  try {
-    const body = await request.json()
-    const data = createUserSchema.parse(body)
-
-    // Business logic
-    const user = await createUser(data)
-
-    return NextResponse.json(user, { status: 201 })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { errors: error.errors },
-        { status: 400 }
-      )
-    }
-    return NextResponse.json(
-      { error: 'Internal server error' },
-      { status: 500 }
-    )
-  }
-}
-```
-
-## Requirements
-
-- Zod validation for all inputs
-- Proper error handling
-- Typed responses
-- No secrets in responses
-- Rate limiting consideration
-
-## HTTP Methods
-
-```typescript
-// GET - Read
-export async function GET(request: Request) {
-  const { searchParams } = new URL(request.url)
-  const id = searchParams.get('id')
-  // ...
-}
-
-// POST - Create
-export async function POST(request: Request) {
-  const body = await request.json()
-  // ...
-}
-
-// PUT/PATCH - Update
-export async function PATCH(
-  request: Request,
-  { params }: { params: { id: string } }
-) {
-  const body = await request.json()
-  // ...
-}
-
-// DELETE - Remove
-export async function DELETE(
-  request: Request,
-  { params }: { params: { id: string } }
-) {
-  // ...
-}
-```
-
-## Error Handling Pattern
-
-```typescript
-import { NextResponse } from 'next/server'
-import { z } from 'zod'
-
-class ApiError extends Error {
-  constructor(
-    message: string,
-    public statusCode: number,
-    public details?: unknown
-  ) {
-    super(message)
-  }
-}
-
-function handleError(error: unknown) {
-  if (error instanceof z.ZodError) {
-    return NextResponse.json(
-      { error: 'Validation error', details: error.errors },
-      { status: 400 }
-    )
-  }
-  if (error instanceof ApiError) {
-    return NextResponse.json(
-      { error: error.message, details: error.details },
-      { status: error.statusCode }
-    )
-  }
-  console.error('Unexpected error:', error)
-  return NextResponse.json(
-    { error: 'Internal server error' },
-    { status: 500 }
-  )
-}
-```
-
-## Forbidden Patterns
-
-- Unvalidated inputs
-- Exposing stack traces
-- Hardcoded secrets
-- Missing error handling
-- Any type in request/response

package/packs/nextjs/rules/components.md

@@ -1,106 +0,0 @@
----
-paths:
-  - "**/components/**/*.tsx"
-  - "**/components/**/*.jsx"
----
-
-# Next.js Component Standards
-
-## Accessibility (WCAG 2.1 AA)
-
-```tsx
-// WRONG - No keyboard access
-<div onClick={handleClick}>Click me</div>
-
-// CORRECT - Semantic HTML
-<button type="button" onClick={handleClick}>
-  Click me
-</button>
-```
-
-## Form Pattern (React Hook Form + Zod)
-
-```tsx
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { z } from 'zod'
-
-const schema = z.object({
-  email: z.string().email(),
-  password: z.string().min(8),
-})
-
-type FormData = z.infer<typeof schema>
-
-export function LoginForm() {
-  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
-    resolver: zodResolver(schema),
-  })
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <label htmlFor="email">Email</label>
-      <input id="email" {...register('email')} aria-describedby="email-error" />
-      {errors.email && <span id="email-error" role="alert">{errors.email.message}</span>}
-    </form>
-  )
-}
-```
-
-## Import Pattern
-
-```tsx
-// CORRECT - Path aliases
-import { Button } from '@/components/ui/button'
-import { useAuth } from '@/hooks/useAuth'
-
-// WRONG - Deep relative paths
-import { Button } from '../../../components/ui/button'
-```
-
-## Requirements
-
-- TypeScript strict mode (no `any`)
-- Semantic HTML elements
-- ARIA attributes where needed
-- Error boundaries for async components
-- Loading states for data fetching
-
-## Component Structure
-
-```tsx
-import { type FC } from 'react'
-
-interface ButtonProps {
-  children: React.ReactNode
-  variant?: 'primary' | 'secondary'
-  disabled?: boolean
-  onClick?: () => void
-}
-
-export const Button: FC<ButtonProps> = ({
-  children,
-  variant = 'primary',
-  disabled = false,
-  onClick,
-}) => {
-  return (
-    <button
-      type="button"
-      className={`btn btn-${variant}`}
-      disabled={disabled}
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  )
-}
-```
-
-## Forbidden Patterns
-
-- `any` type
-- Non-semantic interactive elements
-- Missing form labels
-- Inline styles (use Tailwind/CSS modules)
-- Missing error boundaries for async components