create-molano-app

Interactive CLI to scaffold new Next.js projects with the Molano Design System pre-configured. v2.0.

Quick Start

npx create-molano-app my-app
cd my-app
npm install
npm run dev

Interactive Wizard

The CLI prompts for:

| Step | Options | Default | |------|---------|---------| | App type | dashboard · crud · landing · blank | dashboard | | Auth pages | yes / no | yes | | Sidebar | yes / no | yes | | Brand theme | default · energy · forest · royal | default |

Non-Interactive Mode

npx create-molano-app my-app --type dashboard --auth --sidebar --brand energy

All flags:

| Flag | Values | Description | |------|--------|-------------| | --type | dashboard, crud, landing, blank | App template | | --auth | (flag) | Include login/register pages | | --no-auth | (flag) | Skip auth pages | | --sidebar | (flag) | Include sidebar navigation | | --no-sidebar | (flag) | Skip sidebar | | --brand | default, energy, forest, royal | Brand theme |

What Gets Generated

my-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx              # Root layout with ThemeProvider
│   │   ├── page.tsx                # Home page
│   │   ├── globals.css             # DS tokens + theme bridge
│   │   ├── login/                  # (if --auth)
│   │   │   └── page.tsx            # LoginForm recipe
│   │   └── register/               # (if --auth)
│   │       └── page.tsx            # RegisterForm recipe
│   ├── components/
│   │   └── sidebar.tsx             # (if --sidebar)
│   └── lib/
│       └── utils.ts                # cn() utility
├── .github/
│   └── copilot-instructions.md     # Copilot context for DS
├── .vscode/
│   ├── mcp.json                    # MCP server config
│   └── settings.json               # Recommended settings
├── next.config.ts
├── postcss.config.mjs
├── tsconfig.json
├── eslint.config.mjs
└── package.json

Template Variations

| Type | Pages generated | |------|----------------| | dashboard | Home (KPI cards + chart + activity), Projects table, Settings | | crud | Resource list (DataTable + search + filters), Create/Edit dialogs | | landing | Hero section, Features grid, Pricing cards, CTA | | blank | Minimal home page with a Button |

Generated Features

• Next.js 16 with App Router
• @molano/ui — Full component library
• @molano/tokens — Design tokens + brand theme (if selected)
• Tailwind CSS v4 — CSS-based (no config file)
• Dark mode — next-themes with system preference
• TypeScript — Strict mode
• ESLint — DS compliance rules
• Copilot context — .github/copilot-instructions.md with DS rules
• MCP server — .vscode/mcp.json pre-configured

File Structure

tools/create-molano-app/
├── index.js                # CLI entry point
├── lib/
│   ├── wizard.js           # Interactive prompts
│   ├── generator.js        # File generation logic
│   └── templates.js        # Page templates per app type
├── template/               # Base template files
│   ├── src/
│   ├── .github/
│   └── .vscode/
├── package.json
└── README.md

Development

# Test locally
cd tools/create-molano-app
node index.js test-app

# Test with flags
node index.js test-app --type crud --auth --brand forest