# create-hauis-app
A modern, extensible CLI wizard for scaffolding frontend projects with the latest tools and best practices.
Features •
Quick Start •
Documentation •
Frameworks •
Contributing
## ✨ Features
- 🎯 **Multiple Frameworks** - React, Vue, Svelte, Astro, Vanilla JS
- 🏗️ **Meta Frameworks** - Next.js 15, Remix, SvelteKit 2, Nuxt 3
- 📘 **TypeScript First** - First-class TypeScript support with strict defaults
- 🎨 **Tailwind CSS v4** - Latest version with CSS variables and `@theme` directive
- 📦 **All Package Managers** - npm, pnpm, yarn, bun
- 🔧 **Code Quality Tools** - Biome (fast) or ESLint + Prettier
- 🪝 **Git Hooks** - Lefthook with conventional commits
- 🎛️ **Flexible CLI** - Interactive prompts or command-line flags
- 📋 **Preset System** - Quick start with predefined configurations
- 🔄 **Dry Run Mode** - Preview changes without creating files
## 🚀 Quick Start
```bash
# Recommended: Interactive mode
npx create-hauis-app@latest
# With project name
npx create-hauis-app@latest my-app
# Using preset
npx create-hauis-app@latest my-app --preset next-app
```
Or install globally:
```bash
npm install -g create-hauis-app
create-hauis-app
```
## 📖 Documentation
### Interactive Mode
Simply run the command and follow the prompts:
```bash
npx create-frontend-app@latest
```
You'll be asked about:
1. **Project name** - Name of your new project
2. **Framework** - React, Vue, Svelte, Astro, or Vanilla JS
3. **Meta framework** - Next.js, Remix, SvelteKit, Nuxt (if applicable)
4. **TypeScript** - Enable TypeScript (recommended)
5. **Tailwind CSS** - Add Tailwind CSS v4
6. **Package manager** - npm, pnpm, yarn, or bun
7. **Code quality** - Biome or ESLint + Prettier
8. **Git hooks** - Add Lefthook for automated checks
### Command Line Mode
Skip prompts by providing options:
```bash
npx create-frontend-app@latest my-app \
--framework react \
--meta next \
--typescript \
--tailwind \
--pm pnpm \
--quality biome \
--git-hooks
```
### CLI Options
| Option | Alias | Description |
|--------|-------|-------------|
| `--framework ` | `-f` | Frontend framework (`react`, `vue`, `svelte`, `astro`, `vanilla`) |
| `--meta ` | `-m` | Meta framework (`next`, `remix`, `sveltekit`, `nuxt`) |
| `--typescript` | `--ts` | Use TypeScript |
| `--no-typescript` | `--no-ts` | Use JavaScript |
| `--tailwind` | | Add Tailwind CSS v4 |
| `--no-tailwind` | | Skip Tailwind CSS |
| `--pm ` | | Package manager (`npm`, `pnpm`, `yarn`, `bun`) |
| `--quality ` | | Code quality (`biome`, `eslint-prettier`) |
| `--git-hooks` | | Add Lefthook for Git hooks |
| `--preset ` | `-p` | Use a preset configuration |
| `--dry-run` | | Preview without creating files |
| `--debug` | `-d` | Enable debug mode |
## 📋 Presets
Quick configurations for common setups:
### Available Presets
| Preset | Description |
|--------|-------------|
| `next-app` | Next.js with TypeScript, Tailwind CSS v4, and Biome |
| `vue-minimal` | Vue with JavaScript and ESLint |
| `svelte-kit` | SvelteKit with TypeScript and Biome |
| `astro-blog` | Astro with TypeScript and Tailwind |
| `react-vite` | React with Vite, TypeScript, and Biome |
| `enterprise-next` | Next.js with all features for enterprise projects |
### Using Presets
```bash
# Next.js app with TypeScript and Tailwind
npx create-hauis-app@latest my-app --preset next-app
# List all available presets
npx create-hauis-app@latest list-presets
```
## 🏗️ Frameworks
### React Ecosystem
React (Vite) - Lightning fast React development
```bash
npx create-hauis-app@latest my-app --framework react
```
- ⚡ Vite for fast HMR
- 📘 TypeScript ready
- 🎨 Optional Tailwind CSS v4
- 🔧 Biome or ESLint + Prettier
Next.js 15 - Full-stack React framework
```bash
npx create-hauis-app@latest my-app --framework react --meta next
```
- 📁 App Router
- 🚀 Server Components
- 🎨 Tailwind CSS v4 support
- 📘 TypeScript by default
- 🔧 Optimized for production
Remix - Full-stack web framework
```bash
npx create-hauis-app@latest my-app --framework react --meta remix
```
- 🚀 Nested routing
- 📊 Built-in data loading
- 🎯 Progressive enhancement
- 🔧 Full-stack TypeScript
### Vue Ecosystem
Vue 3 (Vite) - Progressive JavaScript framework
```bash
npx create-hauis-app@latest my-app --framework vue
```
- ⚡ Composition API
- 📘 TypeScript support
- 🏪 Pinia state management
- 🛣️ Vue Router
Nuxt 3 - Full-stack Vue framework
```bash
npx create-hauis-app@latest my-app --framework vue --meta nuxt
```
- 🚀 Nitro server engine
- 📁 File-based routing
- 🔌 Auto-imports
- 🎯 SEO optimized
### Other Frameworks
SvelteKit 2 - Full-stack Svelte framework
```bash
npx create-hauis-app@latest my-app --framework svelte --meta sveltekit
```
- 🚀 Server-side rendering
- 📁 File-based routing
- 📘 TypeScript support
- ⚡ Vite powered
Astro - Content-focused framework
```bash
npx create-hauis-app@latest my-app --framework astro
```
- 🏝️ Island architecture
- 🚀 Zero JS by default
- 📝 MDX support ready
- 🎨 Tailwind CSS v4 compatible
## 🎨 Tailwind CSS v4
When Tailwind CSS is selected, you get a modern v4 setup:
```css
@import 'tailwindcss';
@theme {
/* Modern design tokens */
--font-sans: system-ui, -apple-system, ...;
--color-primary-500: #3b82f6;
--spacing-lg: 1.5rem;
--radius-md: 0.375rem;
}
/* Custom utilities */
@layer utilities {
.gradient-text {
@apply bg-gradient-to-r from-primary-600 to-accent;
@apply bg-clip-text text-transparent;
}
}
```
Features:
- ✨ CSS variables for complete customization
- 🌙 Automatic dark mode support
- 📐 Modern `@theme` directive
- 🚀 No `tailwind.config.js` needed
- 🎯 Optimized PostCSS setup
## 📦 Package Managers
Full support for all major package managers:
```bash
# npm (default)
npx create-hauis-app@latest my-app --pm npm
# pnpm (recommended)
npx create-hauis-app@latest my-app --pm pnpm
# Yarn
npx create-hauis-app@latest my-app --pm yarn
# Bun
npx create-hauis-app@latest my-app --pm bun
```
## 🔧 Code Quality Tools
### Biome (Recommended)
Fast, all-in-one toolchain:
```bash
npx create-hauis-app@latest my-app --quality biome
```
- ⚡ 10-20x faster than ESLint + Prettier
- 🔧 Linter and formatter in one
- 📘 Great TypeScript support
- 🎯 Minimal configuration
### ESLint + Prettier
Traditional setup:
```bash
npx create-hauis-app@latest my-app --quality eslint-prettier
```
- 🔍 Comprehensive linting rules
- 🎨 Prettier formatting
- 🔌 Framework-specific plugins
- 🛠️ Highly customizable
## 🪝 Git Hooks with Lefthook
Automated code quality checks:
```bash
npx create-hauis-app@latest my-app --git-hooks
```
Includes:
- 🔍 Pre-commit: Lint and format staged files
- 📝 Commit-msg: Enforce conventional commits
- 🔄 Post-merge: Auto-install dependencies
## 📁 Generated Project Structure
```
my-app/
├── src/ # Source files
├── public/ # Static assets
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript config (if selected)
├── globals.css # Tailwind CSS v4 (if selected)
├── postcss.config.js # PostCSS config
├── biome.json # Biome config (or ESLint/Prettier)
├── lefthook.yml # Git hooks (if selected)
└── .gitignore # Git ignore rules
```
## 🛠️ Available Scripts
Based on your selections:
```bash
# Development
npm run dev # Start dev server
# Build
npm run build # Build for production
# Code Quality (Biome)
npm run check # Lint and check formatting
npm run check:format # Fix all issues
# Code Quality (ESLint + Prettier)
npm run lint # Run ESLint
npm run format # Format with Prettier
# Type Checking
npm run typecheck # Run TypeScript compiler
```
## 📚 Examples
### Next.js Enterprise Setup
```bash
npx create-hauis-app@latest my-enterprise-app \
--preset enterprise-next
```
### Vue 3 with Nuxt
```bash
npx create-hauis-app@latest my-vue-app \
--framework vue \
--meta nuxt \
--typescript \
--tailwind
```
### Minimal Astro Blog
```bash
npx create-hauis-app@latest my-blog \
--framework astro \
--typescript \
--tailwind \
--pm bun
```
### React SPA with Vite
```bash
npx create-hauis-app@latest my-spa \
--framework react \
--typescript \
--quality eslint-prettier
```
## 🤝 Contributing
We welcome contributions! See [CONTRIBUTING.md](CONTRIBUTING.md) for details.
```bash
# Install dependencies
pnpm install
# Run in development
pnpm dev
# Run tests
pnpm test
```
## 📄 License
MIT © [Jacob H]
## 🙏 Acknowledgments
Built with inspiration from:
- create-react-app
- create-next-app
- create-vite
- create-t3-app
---
Made with ❤️ by developers, for developers
GitHub •
npm •
Documentation •