create-odel-next/README.md

One-line starter for Next.js + shadcn + ODEL design system

# create-odel-next

One-line starter for Next.js projects with shadcn/ui and ODEL design system.

## Quick Start

```bash
npx create-odel-next my-app
```

Or using npm:

```bash
npm create odel-next my-app
```

To create a project in the current directory:

```bash
npx create-odel-next .
```

## What It Does

This CLI tool sets up a complete Next.js project with:

- ✅ **Next.js** (latest version) with App Router
- ✅ **shadcn/ui** initialized with extended component registries
- ✅ **ODEL Design System** (optional) - fonts, colors, logos, and brand assets
- ✅ **MCP Setup** (optional) - Model Context Protocol for AI assistants
- ✅ **Cursor Rules** - Development guidelines and best practices

## Features

### 🎨 ODEL Design System (Optional)

When you choose to apply the ODEL preset, you get:

- **Ubuntu Fonts** - English and Arabic variants with automatic language detection
- **ODEL Brand Assets** - Logos (light/dark variants) and favicon
- **Design Tokens** - Pre-configured color palette, shadows, and spacing
- **RTL Support** - Built-in right-to-left layout support for Arabic

### 🧩 Extended Component Registries

The `components.json` includes access to 50+ component registries including:

- shadcn/ui (default)
- Magic UI
- Aceternity UI
- Clerk Components
- Supabase UI
- And many more...

### 🤖 MCP Support

Optional setup for Model Context Protocol (MCP) clients:

- Cursor
- Claude Desktop
- VS Code
- Codex

## Requirements

- Node.js >= 18.0.0
- npm or yarn

## What Gets Created

```
my-app/
├── app/                    # Next.js App Router
│   ├── layout.tsx         # Root layout with font setup
│   ├── page.tsx           # Home page
│   ├── globals.css        # Global styles + ODEL tokens
│   └── fonts.ts           # Font configuration (if ODEL preset)
├── components/            # Your components
├── public/                # Static assets
│   ├── fonts/            # Ubuntu fonts (if ODEL preset)
│   ├── brand/            # ODEL logos (if ODEL preset)
│   └── favicon.svg       # ODEL favicon
├── components.json       # shadcn/ui config with extended registries
└── .cursor/              # Cursor IDE rules (if available)
```

## Usage

### Basic Usage

```bash
npx create-odel-next my-app
cd my-app
npm run dev
```

### Interactive Prompts

The CLI will ask you:

1. **ODEL Design System?** - Apply ODEL fonts, colors, and brand assets
2. **MCP Client?** - Choose an MCP client or skip

### Example Workflow

```bash
# Create project
npx create-odel-next my-odel-app

# Navigate to project
cd my-odel-app

# Start development server
npm run dev
```

## ODEL Design System

The ODEL preset includes:

- **Fonts**: Ubuntu (English & Arabic) with automatic character range detection
- **Colors**: Pre-configured OKLCH color tokens for light/dark themes
- **Branding**: ODEL logos and favicon
- **Typography**: Optimized font loading with `font-display: swap`

### Font Configuration

The setup automatically configures:

- `Ubuntu` font family with automatic language detection
- Arabic fonts for Arabic characters (U+0600-06FF)
- English fonts for Latin characters
- Monospace variant for code

## Component Registries

After setup, you can install components from any registry:

```bash
# From default shadcn
npx shadcn@latest add button

# From Magic UI
npx shadcn@latest add @magicui/animated-shiny-text

# From Aceternity
npx shadcn@latest add @aceternity/3d-card
```

## Development

### Project Structure

- `index.mjs` - Main CLI script
- `template/` - Template files and assets
  - `odel/public/` - ODEL brand assets
  - `.cursor/` - Cursor IDE rules

## License

MIT

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## Support

For issues and questions, please open an issue on the repository.