ai-development

AI-Assisted Development Guidelines

AI Tool Integration

1. Supported AI Tools

• v0.dev: React component generation
• Bolt.new: Full-stack development environment
• Lovable: AI-assisted application building
• Replit: Collaborative coding platform

2. Prompt Structure

When creating prompts for AI tools, follow this structure:

// Tool-specific prompt template
const prompt = {
  content: "Create a [component/feature] that [specific requirements]",
  tooltips: [
    {
      text: "key concept",
      explanation: "Explanation for beginners",
      highlightColor: "bg-yellow-100"
    }
  ]
}

3. Component Patterns for AI

// AI-friendly component structure
interface ComponentProps {
  // Clear, descriptive prop names
  title: string
  description?: string
  variant?: 'default' | 'outline' | 'ghost'
  size?: 'sm' | 'md' | 'lg'
}

export function ComponentName({ 
  title, 
  description, 
  variant = 'default',
  size = 'md',
  ...props 
}: ComponentProps) {
  // Clear, well-documented logic
  const variantClasses = {
    default: 'bg-primary text-primary-foreground',
    outline: 'border border-input bg-background',
    ghost: 'hover:bg-accent hover:text-accent-foreground'
  }

  return (
    <div 
      className={cn(
        'base-classes',
        variantClasses[variant],
        sizeClasses[size],
        props.className
      )}
      {...props}
    >
      {/* Clear, semantic structure */}
    </div>
  )
}

Code Documentation for AI

1. Component Comments

/**
 * ComponentName - Brief description
 * 
 * Features:
 * - Feature 1: Description
 * - Feature 2: Description
 * 
 * Usage:
 * <ComponentName title="Example" variant="outline" />
 * 
 * AI Notes:
 * - This component follows the [pattern] for consistency
 * - Uses [specific library] for [specific functionality]
 * - Designed for [specific use case]
 */

2. Function Documentation

/**
 * FunctionName - Clear description of what it does
 * 
 * @param param1 - Description of parameter
 * @param param2 - Description of parameter
 * @returns Description of return value
 * 
 * Example:
 * const result = functionName('example', { key: 'value' })
 * 
 * AI Context:
 * - This function is used for [specific purpose]
 * - Follows [specific pattern] for consistency
 * - Handles [specific edge cases]
 */