@hobui/viui-cli

CLI cho iNET Design System — quản lý themes, tokens, config và MCP server trong consumer projects.

Package: @hobui/viui-cli | Binary: viui

Cài đặt

# Consumer project
pnpm add -D @hobui/viui-cli

# Development (local link)
cd packages/cli && pnpm build && npm link
npm link @hobui/viui-cli  # tại consumer project

Commands

| Command | Mô tả | |---------|-------| | viui init | Tạo viui.config.ts + .viui-lock.json, chọn theme (6 themes), style format, sinh AI prompts | | viui sync | Sync themes/tokens SCSS từ CLI bundle vào consumer project | | viui update | Check npm registry cho updates, apply + tự prompt sync | | viui theme list | Liệt kê themes khả dụng, đánh dấu active | | viui theme switch <name> | Chuyển theme, update config + lock file | | viui theme preview <name> | Xem CSS custom properties của theme | | viui doctor | Health check: config, tokens, themes, lock file integrity | | viui docs | Mở Storybook docs trong browser | | viui docs --api | Mở VitePress API docs | | viui audit | Audit component usage: Vi* adoption, icon patterns, accessibility | | viui config | Quản lý cấu hình MCP server cho IDE (setup mặc định) |

Quick Start

# 1. Init project
viui init

# 2. Theo hướng dẫn setup:
#    pnpm add @hobui/viui vuetify @mdi/font @tabler/icons-vue

# 3. Sync theme files
viui sync --apply

# 4. Check health
viui doctor

Config File

viui init tạo viui.config.ts:

import type { ViuiConfig } from '@hobui/viui-cli'

export default {
  theme: 'minimalist-2',
  tokens: '@hobui/tokens',
  styleImport: 'scss',
  outputDir: 'src/assets/styles/viui/',
  vuetifyIntegration: true,
} satisfies ViuiConfig

Themes

6 themes khả dụng:

| Theme | Style | |-------|-------| | neo-brutalism | Bold, chunky borders, high contrast | | minimalist-2 | Stripe-like, clean, subtle (iNET DNA) | | material | Material Design 3 | | minimalist | Ultra-minimal | | glassmorphism | Frosted glass effects | | bento-grid | Grid-based layout |

Icons

Hỗ trợ 2 icon sets qua Vuetify:

<!-- MDI (font-based) -->
<v-icon icon="mdi-home" />

<!-- Tabler (SVG, khuyến nghị) -->
<v-icon icon="tabler:home" />

Cấu hình Tabler trong vuetify.ts:

import { tabler } from '@hobui/viui/iconsets/tabler'
import { mdi } from 'vuetify/iconsets/mdi'

createVuetify({
  icons: { defaultSet: 'mdi', sets: { mdi, tabler } }
})

AI Prompts

viui init tự động phát hiện AI tools trong project và sinh prompt context phù hợp:

| AI Tool | File sinh ra | |---------|-------------| | Claude Code | .claude/CLAUDE.md | | Cursor | .cursor/rules/viui.mdc | | Windsurf | .windsurf/rules/viui.md | | GitHub Copilot | .github/copilot-instructions.md | | Cline | .clinerules | | Aider | .aider.conf.yml |

Prompts cũng có thể chỉ định thủ công qua prompts.targets trong viui.config.ts.

Init Options

| Option | Mô tả | |--------|-------| | --dry-run | Chỉ hiển thị, không ghi file |

Sync Options

| Option | Mô tả | |--------|-------| | --diff | Chỉ hiện diff, không apply | | --dry-run | Simulate, không ghi file | | --apply | Apply changes |

Update Options

| Option | Mô tả | |--------|-------| | --diff | Chỉ hiện available updates | | --dry-run | Simulate update | | --apply | Apply updates + prompt sync |

Docs Options

| Option | Mô tả | |--------|-------| | --api | Mở VitePress API docs | | --guide | Mở VitePress guide docs |

viui config

Quản lý cấu hình MCP server cho IDE. Hỗ trợ VS Code, Cursor, Claude, Windsurf, Trae, Gemini CLI.

Subcommands

| Subcommand | Mô tả | |------------|-------| | viui config | Cấu hình MCP (alias cho setup) | | viui config setup | Phát hiện IDE, ghi config MCP server | | viui config status | Hiển thị trạng thái MCP config của tất cả IDE | | viui config health | Kiểm tra MCP server có phản hồi không | | viui config uninstall | Xóa cấu hình MCP viui khỏi IDE | | viui config rollback | Khôi phục cấu hình từ backup (.bak) | | viui config export | Xuất toàn bộ MCP config ra stdout (JSON) | | viui config import <file> | Nhập cấu hình MCP từ file JSON |

Setup Options

| Option | Mô tả | |--------|-------| | --remote | Dùng server từ xa https://viui.inet.vn/mcp (mặc định) | | --local | Dùng server cục bộ http://localhost:3200/mcp | | --global | Cấu hình global thay vì project-level | | --yes | Tự động cấu hình tất cả IDE đã phát hiện | | --dry-run | Xem trước cấu hình, không ghi file |

Status Options

| Option | Mô tả | |--------|-------| | --global | Hiển thị global config | | --json | Xuất kết quả dạng JSON |

Health Options

| Option | Mô tả | |--------|-------| | --timeout <ms> | Timeout milliseconds (mặc định: 5000) |

Uninstall Options

| Option | Mô tả | |--------|-------| | --global | Xóa global config | | --yes | Tự động xóa không hỏi |

Config Workflow

# Setup MCP cho tất cả IDE tự động
viui config setup --yes

# Kiểm tra trạng thái
viui config status

# Ping MCP server
viui config health

# Backup và restore
viui config export > mcp-backup.json
viui config import mcp-backup.json

# Xóa config
viui config uninstall

Build

cd packages/cli
pnpm build

Chạy tsc + copy-assets.mjs (copy viui-conf + themes SCSS vào dist/assets/).

Local Development

# Build + link global
cd packages/cli && pnpm build && npm link

# Tại consumer project
npm link @hobui/viui-cli
viui init