@smicolon/ai-kit 0.1.0 → 0.2.0

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

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

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

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