npm package: @phenikaax/aiot-ui-cli
Description: AIOT-UI CLI - Install and manage AIOT-UI skill for building professional React/Next.js applications with Tailux UI Kit
Author: Nguyen Minh Phuong
Latest version: 1.0.10

# AIOT-UI CLI

[![npm version](https://badge.fury.io/js/%40phenikaax%2Faiot-ui-cli.svg)](https://www.npmjs.com/package/@phenikaax/aiot-ui-cli)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Node](https://img.shields.io/node/v/%40phenikaax%2Faiot-ui-cli.svg)](https://nodejs.org)

> **AI-powered design intelligence for building professional React/Next.js applications with Tailux UI Kit**

AIOT-UI CLI provides intelligent design recommendations and code generation based on the **Tailux UI Kit** template. It automatically analyzes your requirements and generates tailored design systems with production-ready code.

## ✨ Features

- 🎨 **57+ UI Components** - Complete Tailux component library with variants
- 📐 **3 Layout Patterns** - MainLayout, HorizontalNav, Sideblock
- 📄 **20+ Page Templates** - Dashboards, forms, tables, apps
- 🧠 **100 Industry Rules** - Specialized design recommendations for SaaS, Fintech, Healthcare, etc.
- 🎭 **20 Color Themes** - Light and dark themes
- 🔤 **7 Font Pairings** - Typography combinations with Google Fonts
- 🤖 **AI Reasoning Engine** - Automatic design system generation
- 🛠️ **11 AI Assistants** - Support for Claude, Cursor, Copilot, and more

## 🚀 Installation

```bash
# Install globally
npm install -g @phenikaax/aiot-ui-cli
```

## 💻 Usage

### Initialize for AI Assistant

```bash
# Navigate to your project
cd /path/to/your/project

# Initialize for your AI assistant
aiot-ui init --ai claude       # Claude Code
aiot-ui init --ai cursor       # Cursor
aiot-ui init --ai copilot      # GitHub Copilot
aiot-ui init --ai kiro         # Kiro
aiot-ui init --ai codex        # Codex CLI
aiot-ui init --ai antigravity  # Antigravity
```

### Generate Design System

```bash
# Generate design system with ASCII output
aiot-ui generate "saas dashboard" -p "MyApp"

# Generate with Markdown output
aiot-ui generate "fintech banking" -f markdown

# Generate with JSON output
aiot-ui generate "ecommerce" -f json

# Persist design system to file
aiot-ui generate "SaaS dashboard" --persist -p "MyApp"

# Page-specific override
aiot-ui generate "checkout" --persist -p "MyApp" --page "checkout"
```

### Other Commands

```bash
aiot-ui info              # Show package information
aiot-ui --version         # Show version
aiot-ui --help            # Show help
```

## 🎯 How It Works

### 1. Initialize

Run `aiot-ui init --ai claude` in your project directory. The CLI will:
- Create necessary folders for your AI assistant
- Copy skill files with design system data
- Copy Python scripts for design generation
- Configure everything automatically

### 2. Use Your AI Assistant

Simply chat naturally with your AI assistant:

```
Build a SaaS dashboard for analytics

Create a healthcare patient management form

Design a fintech trading dashboard with dark mode

Make an e-commerce product listing with filters
```

### 3. Get Results

The AI will automatically:
1. **Analyze** your requirements
2. **Generate** a tailored design system
3. **Create** production-ready code with Tailux components
4. **Apply** proper colors, typography, and layouts

## 📦 What's Included

### Component Library

Complete set of Tailux components:

- **Actions**: Button
- **Forms**: Input, Select, Checkbox, Switch, Textarea, FileUpload
- **Layout**: Card, Divider, Box
- **Data Display**: Table, Badge, Avatar, Timeline, Circlebar, Carousel, Tag, Legend
- **Feedback**: Alert, Progress, Skeleton, Spinner
- **Navigation**: Dropdown, Pagination, Tabs, Steps
- **Overlay**: Modal, Tooltip, Drawer, Popover
- **Disclosure**: Accordion

### Layout Patterns

- **MainLayout**: Traditional sidebar + header layout
- **HorizontalNav**: Top navigation bar layout
- **Sideblock**: Alternative sidebar with block navigation

### Industry-Specific Rules

Specialized design recommendations for:

- **SaaS** - Clean, professional with trust indicators
- **Fintech** - Secure, trustworthy with clear data visualization
- **Healthcare** - Calming, accessible with emergency contacts
- **E-commerce** - Visual, streamlined checkout
- **CRM** - Pipeline-focused with activity tracking
- **Developer Tools** - Dark mode, comprehensive docs
- **Web3/Crypto** - Wallet-first, real-time monitoring
- And 13+ more industries

## 🎨 Design System Example

```
+----------------------------------------------------------------------------------------+
|  TARGET: MyApp - RECOMMENDED DESIGN SYSTEM                                              |
+----------------------------------------------------------------------------------------+
|                                                                                        |
|  PATTERN: MainLayout                                                                   |
|     Layout: Traditional sidebar + header layout with responsive design                 |
|                                                                                        |
|  THEME: INDIGO Primary                                                                 |
|     Light: slate                                                                       |
|     Dark: cinder                                                                       |
|                                                                                        |
|  TYPOGRAPHY: Inter Only                                                                |
|     Mood: Clean, consistent, modern                                                    |
|     Google Fonts: https://fonts.google.com/share?selection?family=...                  |
|                                                                                        |
|  KEY COMPONENTS: Card, Table, Circlebar, Progress, Badge                              |
|                                                                                        |
|  AVOID (Anti-patterns):                                                                |
|     - Information overload                                                             |
|     - Poor data visualization                                                          |
|     - Slow loading                                                                     |
|                                                                                        |
+----------------------------------------------------------------------------------------+
```

## 📚 Documentation

For complete documentation, visit:
- **GitLab**: [https://gitlab.phenikaax.com/aiot-platform/aiot-ui-skill](https://gitlab.phenikaax.com/aiot-platform/aiot-ui-skill)
- **Tailux UI Kit**: [https://tailux.piniastudio.com/](https://tailux.piniastudio.com/)

## 🔧 Supported Tech Stacks

- **React** / **Next.js** (default)
- **HTML + TailwindCSS**
- **Vue** / **Nuxt.js**
- **SwiftUI** / **React Native** / **Flutter**

## 🤝 Contributing

Contributions are welcome! Please read our [Contributing Guide](https://gitlab.phenikaax.com/aiot-platform/aiot-ui-skill/-/blob/main/CONTRIBUTING.md) for details.

## 📝 License

MIT © [Nguyen Minh Phuong](https://github.com/mphuong2311)

## 📧 Support

- **Issues**: [GitLab Issues](https://gitlab.phenikaax.com/aiot-platform/aiot-ui-skill/-/issues)
- **Email**: [minhphuongitst@gmail.com](mailto:minhphuongitst@gmail.com)
- **Facebook**: [MinhPhuong.VN18](https://www.facebook.com/MinhPhuong.VN18/)

---

**Built with ❤️ by [Nguyen Minh Phuong](https://gitlab.phenikaax.com/aiot-platform/aiot-ui-skill)**

Based on [Tailux UI Kit](https://tailux.piniastudio.com/) - A versatile Admin and Webapp UI Kit built on React and TailwindCSS.