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

# 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:

npm install -g create-hauis-app
create-hauis-app

📖 Documentation

Interactive Mode

Simply run the command and follow the prompts:

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:

npx create-frontend-app@latest my-app \
  --framework react \
  --meta next \
  --typescript \
  --tailwind \
  --pm pnpm \
  --quality biome \
  --git-hooks

CLI Options

📋 Presets

Quick configurations for common setups:

Available Presets

Using Presets

# 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

npx create-hauis-app@latest my-app --framework react

npx create-hauis-app@latest my-app --framework react --meta next

npx create-hauis-app@latest my-app --framework react --meta remix

Vue Ecosystem

npx create-hauis-app@latest my-app --framework vue

npx create-hauis-app@latest my-app --framework vue --meta nuxt

Other Frameworks

npx create-hauis-app@latest my-app --framework svelte --meta sveltekit

npx create-hauis-app@latest my-app --framework astro

🎨 Tailwind CSS v4

When Tailwind CSS is selected, you get a modern v4 setup:

@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:

# 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:

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:

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:

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:

# 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

npx create-hauis-app@latest my-enterprise-app \
  --preset enterprise-next

Vue 3 with Nuxt

npx create-hauis-app@latest my-vue-app \
  --framework vue \
  --meta nuxt \
  --typescript \
  --tailwind

Minimal Astro Blog

npx create-hauis-app@latest my-blog \
  --framework astro \
  --typescript \
  --tailwind \
  --pm bun

React SPA with Vite

npx create-hauis-app@latest my-spa \
  --framework react \
  --typescript \
  --quality eslint-prettier

🤝 Contributing

We welcome contributions! See CONTRIBUTING.md for details.

# 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 •