🌊 Create Vibe Coding

Create React projects with vibe-first design system constraints - achieving Base44/Lovable quality out of the box.

✨ What's Special

• 🎯 AI-First Design System: Built-in CLAUDE.md with strict design constraints
• 📐 Base44/Lovable Quality: Consistent, beautiful, error-free UI generation
• ⚡ Vite + React + TypeScript: Modern, fast development experience
• 🎨 Shadcn/ui Ready: Pre-configured for component-based development
• 🌊 Vibe-First: Design constraints that just feel right

🚀 Quick Start

# Create a new project
npm create vibe-coding my-app

# Install dependencies
cd my-app
npm install

# Setup Shadcn/ui
npx shadcn-ui@latest init
npx shadcn-ui@latest add card button badge

# Start coding with perfect vibes
npm run dev

🎨 What You Get

• CLAUDE.md - AI design system rules for consistent UI generation
• Tailwind CSS - Utility-first styling with design tokens
• TypeScript - Type safety for better development experience
• Vite - Lightning fast dev server and build tool
• Path Aliases - Clean imports with @/components/*
• Dark Mode Ready - CSS variables for seamless theme switching

🌟 The Vibe Difference

Traditional tools generate inconsistent UI. Vibe Coding enforces design constraints that produce:

• ✅ Unified visual language
• ✅ Consistent spacing & typography
• ✅ Accessible components
• ✅ TypeScript safety
• ✅ Zero arbitrary values
• ✅ Professional quality

📖 Usage

After creating your project, check CLAUDE.md for the complete design system rules. When working with AI coding assistants, these constraints ensure every component follows the same high-quality patterns.

🤝 Contributing

Found a bug? Have a feature request? Open an issue or submit a PR!

📄 License

MIT - build amazing things! 🚀

Happy Vibe Coding! 🌊