cursorrules

⚠️ Legacy Notice (2025): This file is deprecated

As of July 2025, Cursor uses the .cursor/rules/ directory with modular .mdc files for all new projects. This .cursorrules file is supported for legacy compatibility only. Please migrate your rules to the new modular format for better organization, overrides, and AI context. See the Cursor Rules & Prompt Templates Guide for details and migration steps.

VibeCodex - AI Coding Starter Kit Rules

Project Overview

VibeCodex is an open-source AI coding starter kit designed to help beginners create real projects with AI assistance. The project emphasizes approachability, community-focus, educational value, and practical application.

Tech Stack

• Framework: Next.js 14+ with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui + Radix UI
• Icons: Lucide React
• Animations: Framer Motion
• Package Manager: pnpm

Key Principles

1. Beginner-Friendly: All code should be accessible to newcomers
2. AI-First: Optimize for AI-assisted development workflows
3. Community-Driven: Encourage contributions and collaboration
4. Production-Ready: Focus on real-world applications
5. Educational: Provide clear explanations and learning paths

React Component Guidelines

Component Structure

Always use functional components with hooks:

import { ComponentProps } from 'react'
import { cn } from '@/lib/utils'

interface ComponentNameProps extends ComponentProps<'div'> {
  // Add specific props here
}

export function ComponentName({ className, ...props }: ComponentNameProps) {
  return (
    <div className={cn("base-classes", className)} {...props}>
      {/* Component content */}
    </div>
  )
}

Key Patterns

• Use PascalCase for component names
• Export as named exports, not default exports
• Extend HTML element props when appropriate
• Use cn() utility for className merging
• Use Tailwind CSS classes consistently
• Leverage shadcn/ui components as base