@adlas/create-app

Professional project initializer for Adlas with AI-powered development tools.

Features

• 🚀 Quick Setup - Initialize Next.js projects with best practices
• 🎨 Figma Integration - Generate UI from Figma designs using Claude + Figma MCP
• 📡 Swagger Integration - Auto-generate API layer from Swagger/OpenAPI specs
• 📚 Documentation - Auto-generated project documentation
• 🎯 HeroUI - Pre-configured with HeroUI components
• 🏗️ Architecture - Clean service module pattern
• 🔄 Updatable - Keep configs and docs up to date

Installation

Global Installation (Recommended)

npm install -g @adlas/create-app

Use with NPX (No Installation)

npx @adlas/create-app init my-project

Local Development

cd cli-tool
pnpm install
pnpm link

Now you can use create-adlas-app or adlas commands globally.

Commands

1. Initialize New Project

adlas init [project-name]

Interactive Mode:

adlas init

Prompts you for:

• Project name
• Template (e-commerce, dashboard, landing, blank)
• Features (auth, i18n, dark mode, PWA, analytics)
• Figma integration (optional)
• Swagger integration (optional)

With Options:

adlas init my-store --template ecommerce

Options:

• -t, --template <template> - Project template
• --skip-install - Skip package installation
• --skip-git - Skip git initialization

What it does:

1. ✅ Creates Next.js 15 project with TypeScript
2. ✅ Installs HeroUI + dependencies (Zustand, React Query, Zod, etc.)
3. ✅ Copies configuration files (.npmrc, prettier, svgr, postcss, etc.)
4. ✅ Generates project-specific documentation
5. ✅ Sets up folder structure (services, components, etc.)
6. ✅ Copies boilerplate code (utils, providers, etc.)
7. ✅ Initializes git with proper commit

2. Generate UI from Figma

adlas figma <figma-url>

Example:

adlas figma https://www.figma.com/file/abc123/My-Design

With Options:

adlas figma <figma-url> --output src/components/features --pages "Home, Products"

Options:

• -o, --output <path> - Output directory (default: ./src/components/features)
• -p, --pages <pages...> - Specific pages to generate

What it does:

1. ✅ Validates Figma URL
2. ✅ Creates instruction file for Claude
3. ✅ Guides you to use Claude with Figma MCP
4. ✅ Claude analyzes Figma design
5. ✅ Generates React components with HeroUI
6. ✅ Creates service modules if needed
7. ✅ Follows architecture patterns

Workflow:

1. Run the command
2. Copy the generated prompt
3. Give it to Claude in your IDE
4. Claude fetches Figma design and generates components automatically

3. Generate API Layer from Swagger

adlas swagger <swagger-url>

Example:

adlas swagger https://api.example.com/swagger.json

With Options:

adlas swagger <swagger-url> --output src/services --module products

Options:

• -o, --output <path> - Output directory (default: ./src/services)
• -m, --module <module> - Specific module/tag to generate

What it does:

1. ✅ Fetches Swagger/OpenAPI spec
2. ✅ Analyzes all endpoints
3. ✅ Creates instruction file for Claude
4. ✅ Saves spec locally
5. ✅ Claude generates:
   • TypeScript types from schemas
   • API client functions
   • React Query hooks (queries & mutations)
   • Query keys
   • Service modules

Generated Structure:

src/services/
├── product/
│   ├── product.types.ts      # TypeScript types
│   ├── product.keys.ts       # Query keys
│   ├── product.api.ts        # API functions
│   └── product.queries.ts    # React Query hooks
├── user/
│   └── ...
└── client.ts                 # Shared Axios client

4. Update Project

adlas update

Update only configs:

adlas update --configs

Update only docs:

adlas update --docs

What it does:

1. ✅ Updates configuration files to latest version
2. ✅ Updates documentation to latest patterns
3. ✅ Creates backups of existing files (.backup)

Project Structure

After initialization, your project will have:

my-project/
├── src/
│   ├── app/                    # Next.js App Router pages
│   │   └── [locale]/
│   │       ├── (website)/      # Public pages
│   │       └── (dashboard)/    # Protected pages
│   ├── components/
│   │   ├── ui/                 # Shared UI components
│   │   └── features/           # Feature-specific components
│   ├── services/               # Service modules (API layer)
│   │   └── [module]/
│   │       ├── [module].types.ts
│   │       ├── [module].queries.ts
│   │       └── [module].store.ts
│   ├── hooks/                  # Custom React hooks
│   ├── lib/                    # Utilities
│   ├── utils/                  # Helper functions (cn, etc.)
│   ├── types/                  # Global TypeScript types
│   ├── locales/                # i18n translations
│   └── providers.tsx           # React Query, HeroUI providers
├── public/
│   └── icons/                  # SVG icons
├── docs/                       # Project documentation
│   ├── PROJECT_OVERVIEW.md
│   ├── ARCHITECTURE_PATTERNS.md
│   ├── UI_COMPONENTS_GUIDE.md
│   ├── IMPLEMENTATION_GUIDE.md
│   ├── AI_QUICK_REFERENCE.md
│   └── DOCUMENTATION_INDEX.md
├── scripts/                    # Build/deployment scripts
├── .npmrc                      # Package manager config
├── prettier.config.mjs         # Code formatting
├── svgr.config.mjs             # SVG import config
├── postcss.config.mjs          # PostCSS config
├── tailwind.config.ts          # Tailwind + HeroUI config
└── tsconfig.json               # TypeScript config

Templates

E-commerce

• Product listing & detail pages
• Shopping cart
• Checkout flow
• User authentication
• Order management

Dashboard

• Admin layout
• Data tables
• Forms
• Charts
• User management

Landing Page

• Hero section
• Features
• Pricing
• Contact form
• Responsive design

Blank

• Minimal setup
• Just the structure
• Build anything from scratch

Complete Workflow Example

1. Create New E-commerce Project

adlas init my-store

Select:

• Template: E-commerce
• Features: Authentication, i18n, Dark Mode
• Figma: Yes → https://figma.com/file/abc123
• Swagger: Yes → https://api.mystore.com/swagger.json

2. Project Created

cd my-store

Files generated:

• ✅ Complete Next.js setup
• ✅ HeroUI configured
• ✅ Documentation ready
• ✅ Project structure created

3. Generate API Layer

The CLI already prepared instructions. Open Claude and say:

Read .adlas-swagger-instructions.md and generate the API layer.

Claude will:

• Read Swagger spec
• Generate all types
• Create React Query hooks
• Set up service modules

4. Generate UI from Figma

Open Claude and say:

Read .adlas-figma-instructions.md and implement the UI from Figma.

Claude will:

• Fetch Figma designs
• Generate components with HeroUI
• Create proper structure
• Connect to API layer

5. Start Development

pnpm dev

Your app is ready with:

• ✅ Full type-safe API layer
• ✅ UI components from Figma
• ✅ Clean architecture
• ✅ Best practices

6. Update Later

When new configs or patterns are available:

adlas update

Tech Stack

Projects created with this CLI include:

Core

• Next.js 15 - React framework with App Router
• TypeScript - Type safety
• Tailwind CSS - Styling
• HeroUI - UI component library

State & Data

• Zustand - State management
• TanStack Query (React Query) - Server state
• React Hook Form - Form handling
• Zod - Schema validation

Features

• next-intl - Internationalization (optional)
• Framer Motion - Animations (via HeroUI)
• Lucide React - Icons

Developer Experience

• SVGR - SVG to React components
• Prettier - Code formatting
• ESLint - Code linting
• TypeScript - Full type safety

Configuration Files

All projects include pre-configured:

• .npmrc - Package manager settings (auto-install peers, etc.)
• prettier.config.mjs - Code formatting rules
• svgr.config.mjs - SVG import configuration
• postcss.config.mjs - PostCSS plugins
• tailwind.config.ts - Tailwind + HeroUI theme
• tsconfig.json - TypeScript compiler options
• next.config.mjs - Next.js with SVGR support

Documentation

Every project includes comprehensive documentation:

1. PROJECT_OVERVIEW.md - Project-specific overview
2. ARCHITECTURE_PATTERNS.md - Code structure and patterns
3. UI_COMPONENTS_GUIDE.md - HeroUI component usage
4. IMPLEMENTATION_GUIDE.md - Step-by-step workflows
5. AI_QUICK_REFERENCE.md - DO/DON'T rules for AI
6. DOCUMENTATION_INDEX.md - Navigation hub

Working with Claude

This CLI is designed to work seamlessly with Claude AI:

After Init

I created a new project with @adlas/create-app.
Read docs/DOCUMENTATION_INDEX.md to understand the project.

For Figma

Read .adlas-figma-instructions.md and implement the UI.

For Swagger

Read .adlas-swagger-instructions.md and generate the API layer.

Claude will:

• ✅ Understand your architecture
• ✅ Follow your patterns
• ✅ Generate proper code
• ✅ Use correct components
• ✅ Create type-safe APIs

Requirements

• Node.js 18+
• pnpm (recommended) or npm
• Claude with Figma MCP (for Figma integration)

Publishing

To NPM (for company use)

# Update version
npm version patch|minor|major

# Build
pnpm build

# Publish to private registry
npm publish --access restricted

# Or public
npm publish --access public

Private Registry

Update package.json:

{
  "name": "@yourcompany/create-app",
  "publishConfig": {
    "registry": "https://npm.yourcompany.com"
  }
}

Development

# Install dependencies
pnpm install

# Link for local development
pnpm link

# Test
adlas init test-project

# Unlink
pnpm unlink

Roadmap

• [ ] More templates (Blog, SaaS, Portfolio)
• [ ] Component generator (adlas generate component)
• [ ] Page generator (adlas generate page)
• [ ] Tests generator
• [ ] Storybook integration
• [ ] Docker setup
• [ ] CI/CD templates

Support

• Documentation: docs/ folder in every project
• Issues: Create issue in repository
• Updates: Run adlas update regularly

License

MIT

Built with ❤️ for Adlas