🌊 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

``bash


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! 🌊