@hobui/viui-cli 0.0.2

package/dist/assets/cursor/rules/storybook.mdc

@@ -0,0 +1,68 @@
+---
+description: Storybook — sidebar, title, CSF3, addons; stories/demo dùng vi-ui; áp dụng toàn dự án và consumer (@viui/cli) khi AI gen code
+globs: "**/*.stories.@(ts|tsx)", "**/*.mdx", ".storybook/**/*", "src/storybook/**/*"
+alwaysApply: false
+---
+
+# Storybook
+
+**Bạn là Storybook expert cho design system Vue 3 + Vuetify + TypeScript.** Rule áp dụng cho i-design-system và repo consumer đã sync `.cursor` qua **@viui/cli** (AI gen code phải tuân).
+
+## Vai trò
+
+- **Chuẩn hóa** cách viết stories: CSF3, `Meta`/`StoryObj`, argTypes, tags.
+- **Hướng dẫn** cấu hình Storybook (`.storybook/`), addons (a11y, docs, vitest) và tích hợp Vuetify.
+- **Đảm bảo** stories dùng đúng component Vue 3 + Vuetify và design tokens; không hard-code theme/layout.
+
+## Cấu trúc sidebar cố định
+
+Thứ tự và nhóm sidebar trong `.storybook/preview.ts` (`options.storySort.order`):
+
+| Thứ tự | Nhóm | Nguồn | Ghi chú |
+|--------|------|--------|---------|
+| 1 | **Introduction** | `src/storybook/Introduction/*.mdx` | Design Principles |
+| 2 | **Foundations** | `src/storybook/Foundations/*.stories.ts`, `Configure.mdx` | Configure → Colors → Typography → Spacing & Layout |
+| 3 | **VIUI Components** | `src/design-system/vi-ui/**/*.stories.ts` | ViButton, ViInput, ViCard, … (title: `VIUI Components/<Tên>`) |
+| 4 | **Themes** | `src/storybook/Themes/<theme-id>/*.stories.ts` | Neo-Brutalism (trong `neo-brutalism/`), theme khác thêm folder tương ứng |
+| 5 | **Brands** | `src/components/brands/*.stories.ts` | Logo, Style Guide |
+| 6 | **Errors** | `src/components/errors/*.stories.ts` | ErrorPage, … |
+| 7+ | **AI Prompt Rules**, **Icons** | `src/storybook/AIPromptRules/*`, `src/storybook/Icons/IconsOverview.mdx` | Sau nhóm Errors; icon mặc định Tabler (xem `.cursor/rules/icons.mdc`) |
+
+- **Story title** = `{Nhóm}/{Tên}` (vd: `VIUI Components/Button`, `Brands/Logo`, `Errors/ErrorPage`, `Foundations/Colors`).
+- Story đặt **cùng thư mục** với component; **foundation stories** trong `src/storybook/Foundations/`.
+
+## Vi-ui: Component có slot → dùng Story Vue (tránh preview trống)
+
+**Vấn đề:** Component vi-ui dùng **nhiều slot** (vd: `activator` + default) hoặc **nội dung slot phức tạp**. Khi story dùng `render()` với template string, decorator Storybook có thể render component mà **slot không được truyền đúng**, dẫn tới **Canvas/Docs preview trống** (chỉ thấy nút, không thấy nội dung dropdown/menu/list).
+
+**Cách xử lý bắt buộc:** Tạo **component Story Vue** (ví dụ `ViMenuStory.vue`, `ViListStory.vue`) chứa toàn bộ template: component Vi* + nội dung slot (activator, default, …) **ngay trong SFC**. File `*.stories.ts` dùng component Story này làm `component` trong meta và chỉ truyền `args` (không dùng `render()` với template string).
+
+| Bước | Nội dung |
+|------|----------|
+| 1 | Tạo `ViNameStory.vue` trong cùng thư mục với `ViName.vue`. |
+| 2 | Trong SFC: đặt `ViName` với đủ slot (vd: `#activator`, default) và **dữ liệu demo** (v-list, v-list-item, …) trong template. |
+| 3 | Props của Story component: các biến cần đổi giữa các story (vd: `open`, `listVariant`, `location`). Dùng `ref` nội bộ sync với prop khi cần `v-model`. |
+| 4 | Trong `ViName.stories.ts`: `component: ViNameStory`, mỗi story chỉ `args: { ... }`, **không** dùng `render()`. |
+
+**Ví dụ tham chiếu:** `src/design-system/vi-ui/vi-menu/ViMenuStory.vue` + `ViMenu.stories.ts`, `src/design-system/vi-ui/vi-list/ViListStory.vue` + `ViList.stories.ts`.
+
+**Khi nào dùng:** Component có **activator + content** (ViMenu, ViDialog với slot phức tạp), hoặc **list/container cần item mẫu** (ViList). Component đơn giản chỉ props (ViButton, ViChip) có thể chỉ cần `*.stories.ts` với `args` mà không cần file Story Vue.
+
+## Nguyên tắc khi áp dụng rule này
+
+1. **CSF3 + TypeScript** — `satisfies Meta<typeof Component>`, `StoryObj<typeof meta>`, import từ `@storybook/vue3-vite`; đủ `argTypes` và `args` mặc định.
+2. **Cấu trúc title** — Theo hierarchy design system (vd: `vi-ui/Button`); nhất quán với nhóm sidebar trên.
+3. **Controls & docs** — Prop quan trọng có `control` và `description`; `tags: ["autodocs"]` khi cần; `fn()` cho events.
+4. **Vuetify trong stories** — Stories chạy trong app đã wrap Vuetify; dùng theme/tokens từ design system. **Layout (ViAppBar, ViNavigationDrawer, ViMain):** template phải bọc trong `<v-app>` để tránh lỗi `[Vuetify] Could not find injected layout`. Chi tiết: `vuetify-layout.mdc`.
+5. **Addons** — addon-docs, addon-a11y, addon-vitest; không phá cấu hình `.storybook/main.ts`.
+6. **Class BEM & style theo class** — Foundation stories và story wrapper: root có block class BEM (vd `spacing-layout-stories`, `colors-stories`); ưu tiên style qua class/CSS thay vì inline. Chi tiết: `bem-class-style.mdc`.
+7. **Vi-ui trong Storybook** — Stories và demo trong `src/storybook/` (gồm Icons demo) **dùng component vi-ui** (ViInput, ViButton, ViCard, ViMenu, ViButtonToggle, …) từ `@/design-system/vi-ui` khi có sẵn. **Nút action** (copy, link-style, submit) dùng **ViButton**, không dùng raw `<button>`. Nếu thiếu component (vd. ViButtonToggle cho nhóm nút Outline/Filled), bổ sung vào vi-ui trước rồi dùng trong demo. Chi tiết: `icons.mdc` và plan `icons_free_sources.plan.md`.
+
+## Tham chiếu nhanh
+
+- Config: `.storybook/main.ts`, `preview.ts`
+- Stories mẫu (đơn giản): `src/design-system/vi-ui/vi-button/ViButton.stories.ts`
+- Stories mẫu (có slot, dùng Story Vue): `src/design-system/vi-ui/vi-menu/ViMenuStory.vue` + `ViMenu.stories.ts`, `vi-list/ViListStory.vue` + `ViList.stories.ts`
+- Components & tokens: rule `design-system-component-library.mdc` và `src/tokens/`
+
+Khi được kích hoạt (file khớp glob), hành xử như **subagent Storybook expert** và áp dụng các nguyên tắc trên.

package/dist/assets/cursor/rules/tokens.mdc

@@ -0,0 +1,32 @@
+---
+description: Design tokens — nguồn chân lý màu, typography, spacing; không hard-code
+globs: src/tokens/**/*, src/types/inet-tokens-types.ts, src/assets/styles/**/*.scss, src/plugins/**/theme*.ts
+alwaysApply: false
+---
+
+# Design Tokens
+
+**Bạn là design tokens specialist.**
+
+## Vai trò
+
+- **Chuyên gia tokens**: Hướng dẫn định nghĩa, cấu trúc và sử dụng design tokens trong dự án.
+- **Nguồn chân lý**: Màu sắc, typography, spacing, elevation, motion — mọi giá trị giao diện lấy từ tokens, không hard-code.
+- **Đồng bộ**: Tokens TypeScript/JSON và SCSS/CSS variables phải nhất quán với `src/tokens/` và types trong `src/types/inet-tokens-types.ts`.
+
+## Nguyên tắc
+
+1. **Một nguồn, nhiều kênh** — **Single source of truth:** `src/tokens/design-tokens.ts` (color, typography, spacing, elevation, shape, motion, zIndex, breakpoint). Theme Vuetify và SCSS (`src/assets/styles/inet-tokens.scss`) consume từ đó. File SCSS mirror tokens ra CSS variables — khi thêm/sửa token trong TS cần cập nhật SCSS tương ứng (quy ước copy tay; sau có thể dùng script build hoặc Style Dictionary).
+2. **Legacy** — `inet-design-tokens.ts` và `IinetDesignTokens` giữ cho tương thích; code mới dùng `designTokens` / `colorTokens` / `typographyTokens` / `spacingTokens` từ `design-tokens.ts`. Types cho design tokens: export từ `design-tokens.ts` (`ColorTokens`, `TypographyTokens`, …).
+3. **Đặt tên có cấp bậc** — Ví dụ: `colorTokens.brand.primary`, `typographyTokens.fontSize.base`, `spacingTokens[4]`; tránh tên phẳng không ngữ cảnh.
+4. **Đơn vị và format** — Màu hex/rgb; spacing/typography dùng rem hoặc px theo quy ước dự án; không trộn đơn vị tùy tiện.
+5. **Tuân AGENTS.md** — Không tự chạy lệnh shell khi chưa có đồng ý.
+
+## Tham chiếu nhanh
+
+- **Tokens (ưu tiên):** `src/tokens/design-tokens.ts` — `colorTokens`, `typographyTokens`, `spacingTokens`, `designTokens`
+- **Legacy:** `src/tokens/inet-design-tokens.ts`, types `src/types/inet-tokens-types.ts`
+- Styles: `src/assets/styles/inet-tokens.scss`, `main.scss`
+- Theme: `src/plugins/theme-base.ts`, `v-light.ts`, `v-dark.ts`
+
+Khi được kích hoạt (file khớp glob), hành xử như **subagent design tokens specialist** và áp dụng các nguyên tắc trên.

package/dist/assets/cursor/rules/viui-themes.mdc

@@ -0,0 +1,53 @@
+---
+description: Theme SCSS (viui-themes) — chỉ override hình dạng; màu semantic theo props Vi* (color: primary, success, info, error, warning). Cấu trúc tối đa 2 file per theme; không tạo file *-global trùng lặp.
+globs: packages/viui-themes/**/*.scss, src/storybook/Themes/**/*.vue
+alwaysApply: false
+---
+
+# viui-themes — Design style themes (SCSS)
+
+**Khi tạo hoặc chỉnh SCSS trong `packages/viui-themes/` (và view theme trong `src/storybook/Themes/`), theme phải tôn trọng props của component Vi\* về màu sắc.**
+
+## Cấu trúc file — tối đa 2 file per theme
+
+Quản lý tập trung, tránh trùng lặp:
+
+- **Một partial:** `_<id>.scss` — chứa cả scoped (`.components-overview-wrapper.design-style-<id>`) và `body.design-style-<id>` (teleport + global). **Không** tạo file `_<id>-global.scss` riêng.
+- **Một entry:** `<id>.scss` — chỉ `@use './_<id>' as *;`. Import này dùng cho cả scoped và global.
+- **Alias tương thích ngược:** Trong `package.json`, `"./<id>-global"` và `"./<id>-global.scss"` trỏ cùng `"./<id>.scss"` (không tạo file vật lý `*-global.scss`).
+
+Khi thêm theme mới: tuân quy ước trên và `packages/viui-themes/_THEME_CONVENTION.md`.
+
+## Nguyên tắc bắt buộc (nội dung theme)
+
+**Theme chỉ override "hình dạng" (shape), không override "màu semantic".**
+
+| Override được (theme) | Không override (để props/quản lý) |
+|------------------------|-----------------------------------|
+| `border-width`, `border-style` | `border-color` — do prop `color` của Vi\* (primary, success, info, error, warning, …) |
+| `border-radius` | `background`, `background-color` khi component có `color` |
+| `box-shadow` (nhẹ hoặc none) | Màu chữ/nền semantic (Vuetify/theme từ tokens) |
+| `font-weight`, typography | |
+| `padding`, `margin`, spacing | |
+
+- **Màu sắc** (border, nền, chữ) phải **đi theo cấu hình props** của component Vi\*: `color="primary"`, `color="success"`, `color="info"`, `color="error"`, `color="warning"`, … Theme (palette) cung cấp token; component nhận `color` và áp dụng qua Vuetify theme. SCSS của theme **không** hardcode một màu duy nhất (vd. `border: 1px solid var(--color-border-default) !important`) cho mọi instance — nếu làm vậy sẽ chặn màu từ props.
+
+## Áp dụng trong SCSS theme
+
+1. **Button, Card, và component có prop `color`**  
+   - Set `border-width`, `border-style`, `border-radius`, `box-shadow`, `font-weight`.  
+   - **Không** set `border-color` (hoặc không dùng `!important` cho border-color) để Vuetify/component có thể áp màu từ prop `color`.
+
+2. **Input, Dialog, Toast, v.v.**  
+   - Có thể dùng `border-color: var(--color-border-default)` làm fallback **không** `!important` để trạng thái focus/error/semantic vẫn ghi đè được.
+
+3. **Focus / error state**  
+   - Được phép set `border-color` (vd. focus ring) với `!important` chỉ cho trạng thái đó, không cho default.
+
+## Tóm tắt
+
+- **Theme = lớp phong cách** (viền mỏng/dày, bóng nhẹ/nặng, typography, spacing).  
+- **Màu = theo props** (primary, success, info, error, warning, …).  
+- Tránh nhắc lại: mọi theme mới hoặc chỉnh theme cũ phải tuân quy tắc trên.
+
+Tham chiếu: `design-system-component-library.mdc`, `tokens.mdc`; plan `.cursor/plans/themes.plan.md`.

package/dist/assets/cursor/rules/vuetify-layout.mdc

@@ -0,0 +1,52 @@
+---
+description: Vuetify layout — bắt buộc bọc v-app khi dùng ViAppBar, ViNavigationDrawer, ViMain; tránh lỗi "Could not find injected layout"
+globs: "**/*.vue", "**/*.stories.@(ts|tsx)"
+alwaysApply: false
+---
+
+# Vuetify Layout (v-app bắt buộc)
+
+**Khi dùng component layout của Vuetify (hoặc vi-ui tương ứng), template phải nằm trong `<v-app>`.** Nếu không, runtime sẽ báo: **`[Vuetify] Could not find injected layout`**.
+
+## Component cần v-app
+
+Các component sau **phụ thuộc layout inject** từ Vuetify; chúng phải được render **bên trong** một `<v-app>`:
+
+| Vi-ui | Vuetify gốc |
+|-------|-------------|
+| ViAppBar | v-app-bar |
+| ViNavigationDrawer | v-navigation-drawer |
+| ViMain | v-main |
+| (VFooter nếu dùng) | v-footer |
+
+## Quy tắc bắt buộc
+
+1. **Trang / view / story có dùng bất kỳ component trên** → root template phải bọc bằng `<v-app>`.
+2. **Một cấp v-app** — Chỉ cần một `<v-app>` bọc toàn bộ nội dung trang (không cần mỗi section một v-app).
+3. **Storybook** — Story hoặc component Story Vue (vd. theme preview `Minimalist2.vue`, `NeoBrutalism.vue`) nếu có ViAppBar / ViNavigationDrawer / ViMain thì **root element của template** phải là `<v-app>` rồi mới đến nội dung.
+
+## Ví dụ đúng
+
+```vue
+<template>
+  <v-app>
+    <div class="my-page">
+      <ViAppBar title="Demo" />
+      <ViNavigationDrawer v-model="drawerOpen">...</ViNavigationDrawer>
+      <ViMain>...</ViMain>
+    </div>
+  </v-app>
+</template>
+```
+
+## Khi tạo mới hoặc cập nhật
+
+- **Thêm section Layout (AppBar, Drawer, Main)** vào theme preview hoặc bất kỳ trang Vue nào → kiểm tra root có `<v-app>` chưa; nếu chưa thì bọc toàn bộ template trong `<v-app>`.
+- **Lỗi "Could not find injected layout"** → nguyên nhân gần như chắc chắn là thiếu v-app bọc ngoài chỗ dùng ViAppBar / ViNavigationDrawer / ViMain; sửa bằng cách thêm `<v-app>` làm root.
+
+## Tham chiếu
+
+- Theme preview mẫu (đã bọc v-app): `src/storybook/Themes/minimalist-2/Minimalist2.vue`
+- Vi-ui layout: `src/design-system/vi-ui/vi-app-bar/`, `vi-navigation-drawer/`, `vi-main/`
+
+Khi chỉnh file khớp glob và có dùng layout component, **luôn đảm bảo** template được bọc trong `<v-app>` để tránh lỗi lặp lại.

package/dist/assets/cursor/skills/accessibility.md

@@ -0,0 +1,75 @@
+---
+name: accessibility
+description: Chuyên gia accessibility tập trung — ARIA, keyboard, focus, color contrast (WCAG AA). Một file cho audit a11y, sửa component/story, checklist a11y, và mọi vấn đề tương phản màu chữ/nền.
+---
+
+# Accessibility (Skill tổng thể — gồm Color Contrast)
+
+## Khi nào dùng skill này
+
+- **Audit accessibility** cho component, story hoặc trang.
+- Thiết kế hoặc refactor component để **dễ truy cập** (screen reader, keyboard, focus).
+- Cần **checklist a11y** trước khi merge (ARIA, contrast, keyboard, focus).
+- **Sửa hoặc review color contrast** — chữ/nền đạt 4.5:1 (chữ thường), 3:1 (chữ lớn); thêm component/story mới có chữ trên nền màu/swatch.
+
+---
+
+## 1. Color contrast (WCAG AA)
+
+### Chuẩn
+
+- **WCAG 2.1 AA:** Chữ thường ≥ 4.5:1, chữ lớn (18pt+ hoặc 14pt đậm) ≥ 3:1.
+- Tham chiếu: [Deque color-contrast](https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=axeAPI).
+
+### Quy tắc trong dự án
+
+- Chữ và nền đạt tỉ lệ trên. Không dùng `text.disabled` cho nội dung đọc được; trên nền có màu dùng semantic `.text`. Trên swatch dùng #000/#fff theo luminance.
+- **Rule chi tiết:** `.cursor/rules/accessibility-contrast.mdc` (quy tắc đầy đủ + ví dụ Colors.stories.ts). **AGENTS.md:** mục "Color contrast (WCAG AA)".
+
+### Hành động nhanh (contrast)
+
+1. **Chữ trên nền neutral:** Dùng `text.primary` hoặc `text.secondary`; không dùng `text.disabled` cho nội dung đọc được.
+2. **Chữ trên nền có màu (success, warning, error, info):** Dùng semantic `.text` (vd: `colors.success.light.text` trên `colors.success.light.surface`).
+3. **Chữ trên swatch / ô màu:** Màu đặc theo luminance: `#000` (lum > 0.5), `#fff` (lum ≤ 0.5).
+4. **Tag / pill trên swatch:** Màu chữ và nền pill theo luminance để cặp ≥ 4.5:1.
+5. **Token mới "text on X surface":** Ghi rõ cặp nền và kiểm tra tỉ lệ 4.5:1.
+
+### Tokens & theme (contrast)
+
+- **Tokens:** `design-tokens.ts` (text.disabled chỉ cho UI disabled), `inet-design-tokens.ts` (semantic surface + text).
+- **Theme:** `v-light.ts` / `v-dark.ts` map `on-success` / `on-warning` từ inet-design-tokens.
+
+---
+
+## 2. ARIA & ngữ nghĩa
+
+- Dùng đúng role, aria-label, aria-describedby, aria-live khi cần.
+- Form control có label (for/id hoặc aria-label). Nút/icon có text hoặc aria-label.
+
+## 3. Keyboard
+
+- Mọi tương tác có thể dùng bàn phím; thứ tự tab hợp lý; không trap focus trừ modal/dialog (và khi đó có cách thoát).
+
+## 4. Focus
+
+- Focus visible (outline hoặc ring); focus không mất vào element ẩn; sau khi mở modal/dropdown, focus chuyển vào vùng tương tác.
+
+## 5. Vùng chạm (touch target)
+
+- Nút/control đủ lớn (vd ≥ 44x44px) khi có thể.
+
+---
+
+## Hành động nhanh (chung)
+
+- **Sửa contrast:** Áp dụng rule `accessibility-contrast.mdc` và phần "Color contrast" trên.
+- **Sửa ARIA/keyboard/focus:** Kiểm tra component Vue/Vuetify có aria-*, tabindex, @keydown; form có label; nút có mô tả.
+- **Kiểm tra bằng addon:** Storybook addon a11y hoặc axe; sửa từng lỗi theo thứ tự ưu tiên (contrast → ARIA → keyboard).
+
+## Trong dự án
+
+- **Rule contrast:** `.cursor/rules/accessibility-contrast.mdc`
+- **Command audit:** `.cursor/commands/audit-accessibility.md` (chạy audit và liệt kê lỗi + hướng sửa)
+- **AGENTS.md:** Mục "Color contrast (WCAG AA)" và quy tắc chung
+
+Khi được kích hoạt, đóng vai chuyên gia a11y: gợi ý chỉnh sửa cụ thể (attribute, token, component) để đạt WCAG 2.1 AA và trải nghiệm keyboard/screen reader tốt; với contrast, áp dụng quy tắc trên và gợi ý sửa token/màu/component cụ thể.

package/dist/assets/cursor/skills/design-system-thinking.md

@@ -0,0 +1,40 @@
+---
+name: design-system-thinking
+description: Tư duy design system — NHÓM, workflow thêm mới/tìm kiếm/tổng kết, tokens là nguồn chân lý, 8pt grid, Simple–Secure–Stable. Dùng khi quyết định cấu trúc, thêm item mới, hoặc review nhất quán.
+---
+
+# Skill: Design System Thinking
+
+## Khi nào dùng
+
+- Cần **thêm item mới** (component, token file, doc, story) và phải đặt đúng NHÓM và vị trí.
+- Cần **tìm** component hoặc tài liệu theo nhóm hoặc tên.
+- Cần **tổng kết** hoặc review design system (số NHÓM, số items, trạng thái).
+- Cần ra quyết định **kiến trúc** (tách component, đặt token, cấu trúc Storybook).
+
+## Vai trò
+
+Áp dụng tư duy design system iNET: tổ chức theo NHÓM và items, workflow rõ (thêm mới, tìm kiếm, tổng kết), tokens là single source of truth, 8pt grid và triết lý Simple – Secure – Stable. Bám `docs/design-system-plan.md` và các rule trong `.cursor/rules/`.
+
+## Nguyên tắc
+
+1. **NHÓM chuẩn** — Vi-ui, Brands, Errors, Icons, Tokens, Docs, Storybook foundations. Mỗi item thuộc đúng một NHÓM; vị trí file theo `.cursor/rules/project-structure.mdc` và `.cursor/rules/design-system-workflow.mdc`.
+2. **Workflow** — Thêm mới: chọn NHÓM → tạo đúng vị trí → cập nhật index/re-export → story hoặc docs nếu cần. Tìm kiếm: theo tên hoặc theo NHÓM. Tổng kết: đếm items theo nhóm, trạng thái documented/có story/dùng token.
+3. **Tokens trước** — Màu, spacing, typography, elevation, shape lấy từ `src/tokens/design-tokens.ts`. Không hard-code giá trị thiết kế trong component hoặc story.
+4. **8pt grid** — Spacing layout theo bội số 8px (space8pt); chi tiết có thể 4px. Nhất quán với `spacingTokens` và `space8pt`.
+5. **Simple – Secure – Stable** — Thiết kế đơn giản, trạng thái an toàn rõ ràng (semantic color, xác nhận thao tác nguy hiểm), API và token ổn định (semver, tương thích ngược).
+
+## Checklist khi thêm item mới
+
+- [ ] Đã chọn NHÓM (vi-ui, Brands, Errors, Icons, Tokens, Docs, Storybook foundations).
+- [ ] File đặt đúng thư mục (vd Vi* → `src/design-system/vi-ui/vi-<tên>/`, stories cùng thư mục).
+- [ ] Đã dùng tokens (không hard-code); nếu cần token mới thì cập nhật `design-tokens.ts` và quy ước mirror TS ↔ SCSS.
+- [ ] Naming tuân `.cursor/rules/component-naming.mdc` và `.cursor/rules/storybook.mdc`.
+- [ ] Đã cập nhật index/re-export nếu NHÓM có file index.
+
+## Tham chiếu
+
+- Workflow và NHÓM: `.cursor/rules/design-system-workflow.mdc`, `.cursor/rules/project-structure.mdc`
+- Plan và mục tiêu: `docs/design-system-plan.md`, `docs/design-system.md`
+- Tokens: `.cursor/rules/tokens.mdc`, `src/tokens/design-tokens.ts`
+- Tổng quan tích hợp: `docs/integration-guide.md`

package/dist/assets/cursor/skills/figma-interpretation.md

@@ -0,0 +1,38 @@
+---
+name: figma-interpretation
+description: Chuyên gia đọc và chuyển design từ Figma sang code. Dùng khi có Figma URL/node, cần get_design_context hoặc get_screenshot (MCP), map design sang tokens và component Vue theo iNET Design System.
+---
+
+# Skill: Figma Interpretation
+
+## Khi nào dùng
+
+- User cung cấp **Figma URL** (design hoặc Make) và muốn sinh/cập nhật page, component hoặc story từ design.
+- Cần **ánh xạ** layer/spec Figma sang token names và component API của dự án.
+- Cần hướng dẫn **quy trình** design → code (MCP, mapping, kiểm tra drift).
+
+## Vai trò
+
+Đọc design từ Figma (qua MCP hoặc mô tả), hiểu layout và spec, và chuyển thành code Vue 3 + Vuetify bám **tokens** và **quy ước** của iNET Design System. Không hard-code màu/spacing/typography; luôn map sang `design-tokens.ts` và `inet-design-tokens.ts`.
+
+## Nguyên tắc
+
+1. **Tokens là nguồn chân lý** — Giá trị trong Figma (màu, spacing, radius, shadow) map sang key trong `src/tokens/design-tokens.ts`. Nếu Figma dùng giá trị khác token, ưu tiên token; ghi chú trong code hoặc với designer để cập nhật Figma.
+2. **Figma Variables ↔ token names** — Nếu Figma có Variables, map tên (vd `brand/primary` → `colorTokens.brand.primary`). Tham chiếu `.cursor/rules/tokens.mdc` và `docs/integration-guide.md`.
+3. **Component naming** — Component sinh từ Figma tuân `.cursor/rules/component-naming.mdc`: Vi* trong `vi-<tên>/`, PascalCase, `*.stories.ts` cùng thư mục. Story title = `{Nhóm}/{Tên}` theo `.cursor/rules/storybook.mdc`.
+4. **MCP workflow** — Khi dùng Figma MCP: gọi `get_design_context` với `fileKey` (và `nodeId` nếu có) để lấy code/screenshot/hints. Output MCP thường là reference (React/Tailwind); chuyển sang Vue 3 + Vuetify và component/token của dự án.
+5. **Accessibility** — Màu chữ/nền phải đạt WCAG 2.1 AA; dùng semantic `.text` trên nền màu. Xem `.cursor/rules/accessibility-contrast.mdc`.
+
+## Quy trình gợi ý (Figma → code)
+
+1. **Lấy design** — MCP `get_design_context(fileKey, nodeId?)` hoặc user mô tả/screenshot. Xác định sections, components, và giá trị (màu, spacing, typography).
+2. **Map tokens** — Màu → `colorTokens.*` hoặc `inetDesignTokens.colors.*`; spacing → `spacingTokens` / `space8pt`; radius → `shapeTokens`; shadow → `elevationTokens`. Không thêm giá trị mới ngoài token trừ khi đã cập nhật `design-tokens.ts`.
+3. **Chọn component** — Dùng Vi* có sẵn nếu khớp; nếu không, tạo component mới đúng thư mục và naming. Thêm story trong cùng thư mục.
+4. **Kiểm tra** — Storybook chạy đúng; không có `[object Object]` hay chuỗi render-function; contrast và a11y đạt.
+
+## Tham chiếu
+
+- Tokens: `src/tokens/design-tokens.ts`, `.cursor/rules/tokens.mdc`
+- Naming: `.cursor/rules/component-naming.mdc`, `.cursor/rules/storybook.mdc`
+- Figma integration: `docs/integration-guide.md`, `docs/AI-prompt-rules.md` (block Designer / Figma AI)
+- Contrast: `.cursor/rules/accessibility-contrast.mdc`

package/dist/assets/cursor/skills/vue-vuetify-design-system-architect.md

@@ -0,0 +1,60 @@
+---
+name: vue-vuetify-design-system-architect
+description: Vue 3 & Vuetify Design System — pattern component, kiến trúc, tokens, theming, accessibility. Một file tập trung cho viết/sửa component Vi* hoặc brands/errors/icons, refactor, và quyết định design system.
+---
+
+# Vue 3 & Vuetify Design System (Pattern + Kiến trúc)
+
+## Ngôn ngữ và tài liệu
+
+- **File hướng dẫn (.md, .mdc, …)**: Luôn ưu tiên **Tiếng Việt** khi soạn hoặc sửa nội dung.
+- **Khi chưa rõ**: Luôn **hỏi lại User** thay vì đoán; không bỏ qua hoặc giả định yêu cầu.
+
+## Khi nào dùng
+
+- Đang **viết hoặc sửa** component Vue (Vi*, Brands, Errors, Icons) — cần pattern nhất quán.
+- Cần **refactor** component cũ sang đúng chuẩn design system.
+- Cần **quyết định kiến trúc** (tokens, theme, API, cấu trúc Storybook).
+- Định nghĩa props/slots, thêm stories, hoặc thiết kế theme từ tokens.
+
+## Vai trò
+
+Một skill tập trung cho Vue 3 + Vuetify trong iNET Design System: pattern component (Composition API, tokens, props/slots), kiến trúc (tokens, theme, API), và accessibility. Bám AGENTS.md và rules trong `.cursor/rules/`.
+
+## Nguyên tắc cốt lõi
+
+1. **Tokens trước** — Component dùng design tokens (màu, khoảng cách, typography) từ design system. Không hard-code giá trị cho layout hoặc theme.
+2. **Vue 3 + Vuetify** — Ưu tiên Composition API, `<script setup>`, và component/theme Vuetify 3. Dùng biến theme Vuetify xuất phát từ tokens khi phù hợp.
+3. **Accessible mặc định** — ARIA, điều hướng bàn phím, quản lý focus, HTML ngữ nghĩa. Kiểm tra tương phản và vùng chạm. **Color contrast:** tuân WCAG 2.1 AA; xem `.cursor/rules/accessibility-contrast.mdc` và `.cursor/skills/accessibility.md` (phần Color contrast).
+4. **API composable** — Props, slots, events rõ ràng; hỗ trợ tùy biến qua props và theme thay vì override từng chỗ.
+5. **Định dạng chặt** — Tuân style dự án (AGENTS.md). Không tự chạy lệnh shell khi chưa có User đồng ý; giải thích rủi ro an toàn với thao tác hạ tầng.
+
+## Cấu trúc file (pattern)
+
+- **Vi*:** `src/design-system/vi-ui/vi-<tên>/ViName.vue` + `ViName.stories.ts`; export qua `src/design-system/vi-ui/index.ts`.
+- **Brands/Errors/Icons:** `src/components/<nhóm>/<ComponentName>/ComponentName.vue` + `ComponentName.stories.ts`.
+- **Story title:** `{Nhóm}/{Tên}` (vd `vi-ui/Button`, `Foundations/Colors`). Naming và vị trí theo `.cursor/rules/component-naming.mdc`, `.cursor/rules/storybook.mdc`.
+
+## Khi thiết kế hoặc triển khai
+
+- **Component mới**: Định nghĩa props và slots từ use case; ánh xạ UI sang tokens; thêm stories và mô tả biến thể.
+- **Tokens**: Một nguồn chân lý (`design-tokens.ts`); expose ra theme/SCSS để component dùng qua theme hoặc CSS variables.
+- **Theming**: Theme Vuetify lấy từ design tokens; tránh trùng lặp giá trị token giữa theme và component.
+- **Refactor**: Giữ hoặc cải thiện accessibility và việc dùng tokens; giữ API công khai ổn định hoặc ghi rõ breaking changes.
+
+## Checklist trước khi giao
+
+- [ ] Code dùng tokens (không hard-code màu/khoảng cách/typography cho quyết định thiết kế).
+- [ ] Vue 3 Composition API / `<script setup>` khi phù hợp.
+- [ ] Props/slots rõ; naming đúng `.cursor/rules/component-naming.mdc`.
+- [ ] Component và theme Vuetify dùng nhất quán.
+- [ ] Đã xét accessibility (nhãn, focus, bàn phím, ngữ nghĩa, **color contrast** WCAG AA).
+- [ ] Story có và chạy đúng; không có `[object Object]` hay chuỗi render trong DOM.
+- [ ] Tuân AGENTS.md và quy tắc dự án (không auto-exec, ghi chú an toàn cho hạ tầng).
+
+## Tài liệu tham khảo
+
+- Tokens và theme: `src/tokens/`, `.cursor/rules/tokens.mdc`, theme trong `src/plugins/`.
+- Color contrast (WCAG AA): `.cursor/rules/accessibility-contrast.mdc`, `.cursor/skills/accessibility.md` (phần Color contrast).
+- Naming và workflow: `.cursor/rules/component-naming.mdc`, `.cursor/rules/design-system-workflow.mdc`, `.cursor/rules/storybook.mdc`.
+- Quyết định design system: `AGENTS.md`, `docs/design-system.md`.

package/dist/assets/cursor/sync-manifest.json

@@ -0,0 +1,6 @@
+{
+  "rules": { "dir": "rules", "overwrite": true },
+  "skills": { "dir": "skills", "overwrite": true },
+  "commands": { "dir": "commands", "overwrite": true },
+  "plans": { "dir": "plans", "overwrite": true }
+}

package/dist/assets/plugins/viui-conf/defaults/README.md

@@ -0,0 +1,27 @@
+# viui-conf/defaults
+
+Defaults Vuetify (global + từng component) cho createVuetify. Merge base + **theme override** theo `VITE_VIUI_THEME`.
+
+## Theme mặc định
+
+**Minimalist 2.0** (`minimalist-2`). Khi không set env hoặc giá trị không nhận dạng → dùng bộ variants của minimalist-2 (VBtn outlined, VCard flat).
+
+## Theme ids hỗ trợ
+
+| Theme ID        | VBtn default | VCard default |
+|-----------------|--------------|---------------|
+| `minimalist-2`  | outlined     | flat          |
+| `neo-brutalism` | elevated     | elevated      |
+| `material`      | elevated     | elevated      |
+
+## Cấu hình
+
+- **vuetify.ts:** Khi không cấu hình `.env`, dùng theme mặc định từ `by-theme/index.ts` (`VIUI_DEFAULT_THEME_ID` = `minimalist-2`). Gọi `getDefaults(import.meta.env.VITE_VIUI_THEME ?? VIUI_DEFAULT_THEME_ID)`.
+- **.env:** `VITE_VIUI_THEME=minimalist-2` (mặc định) | `neo-brutalism` | `material`.
+
+## Cấu trúc
+
+- `index.ts` — merge base + export `getDefaults(themeId?)`, `defaults` (= getDefaults()).
+- `by-theme/` — override theo theme: `minimalist-2.ts`, `neo-brutalism.ts`, `material.ts`.
+
+Chi tiết: [.cursor/plans/themes.plan.md](../../../../.cursor/plans/themes.plan.md).

package/dist/assets/plugins/viui-conf/defaults/alerts.ts

@@ -0,0 +1,13 @@
+/**
+ * iNET Design System — Vuetify defaults cho VAlert (ViAlert).
+ */
+
+import type { VuetifyOptions } from 'vuetify'
+
+export const alertDefaults: NonNullable<VuetifyOptions['defaults']> = {
+  VAlert: {
+    variant: 'tonal',
+    density: 'comfortable',
+    rounded: 'lg',
+  },
+}

package/dist/assets/plugins/viui-conf/defaults/app-bar.ts

@@ -0,0 +1,14 @@
+/**
+ * iNET Design System — Vuetify defaults cho VAppBar (ViAppBar).
+ * Density, elevation, color từ tokens.
+ */
+
+import type { VuetifyOptions } from 'vuetify'
+
+export const appBarDefaults: NonNullable<VuetifyOptions['defaults']> = {
+  VAppBar: {
+    density: 'default',
+    elevation: 1,
+    color: 'surface',
+  },
+}

package/dist/assets/plugins/viui-conf/defaults/avatars.ts

@@ -0,0 +1,14 @@
+/**
+ * iNET Design System — Vuetify defaults cho VAvatar (ViAvatar).
+ * Size, color semantic từ tokens.
+ */
+
+import type { VuetifyOptions } from 'vuetify'
+
+export const avatarDefaults: NonNullable<VuetifyOptions['defaults']> = {
+  VAvatar: {
+    size: 'default',
+    color: 'default',
+    rounded: 'circle',
+  },
+}

package/dist/assets/plugins/viui-conf/defaults/buttons.ts

@@ -0,0 +1,15 @@
+/**
+ * iNET Design System — Vuetify defaults cho Buttons (VBtn).
+ * Đồng bộ với design tokens (shape, elevation); variant/color dùng theme.
+ */
+
+import type { VuetifyOptions } from 'vuetify'
+
+export const buttonDefaults: NonNullable<VuetifyOptions['defaults']> = {
+  VBtn: {
+    variant: 'elevated',
+    elevation: 1,
+    rounded: 'lg',
+    size: 'default',
+  },
+}

package/dist/assets/plugins/viui-conf/defaults/by-theme/index.ts

@@ -0,0 +1,30 @@
+/**
+ * Defaults theo design style theme (override variant, v.v.).
+ * Theme mặc định: minimalist-2. Map themeId → defaults override.
+ */
+
+import type { VuetifyOptions } from 'vuetify'
+import { minimalist2ThemeDefaults } from './minimalist-2'
+import { neoBrutalismThemeDefaults } from './neo-brutalism'
+import { materialThemeDefaults } from './material'
+
+export const VIUI_DEFAULT_THEME_ID = 'minimalist-2' as const
+
+export type ViuiThemeId = 'minimalist-2' | 'neo-brutalism' | 'material'
+
+const byTheme: Record<ViuiThemeId, NonNullable<VuetifyOptions['defaults']>> = {
+  'minimalist-2': minimalist2ThemeDefaults,
+  'neo-brutalism': neoBrutalismThemeDefaults,
+  material: materialThemeDefaults,
+}
+
+export function getThemeDefaults (themeId: string | undefined): NonNullable<VuetifyOptions['defaults']> {
+  if (themeId && themeId in byTheme) {
+    return byTheme[themeId as ViuiThemeId]
+  }
+  return byTheme[VIUI_DEFAULT_THEME_ID]
+}
+
+export { minimalist2ThemeDefaults } from './minimalist-2'
+export { neoBrutalismThemeDefaults } from './neo-brutalism'
+export { materialThemeDefaults } from './material'

package/dist/assets/plugins/viui-conf/defaults/by-theme/material.ts

@@ -0,0 +1,15 @@
+/**
+ * Theme Material / base — default variants: elevated.
+ * Fallback khi cần style Material chuẩn; dùng khi VITE_VIUI_THEME=material.
+ */
+
+import type { VuetifyOptions } from 'vuetify'
+
+export const materialThemeDefaults: NonNullable<VuetifyOptions['defaults']> = {
+  VBtn: {
+    variant: 'elevated',
+  },
+  VCard: {
+    variant: 'elevated',
+  },
+}

package/dist/assets/plugins/viui-conf/defaults/by-theme/minimalist-2.ts

@@ -0,0 +1,15 @@
+/**
+ * Theme Minimalist 2.0 — default variants: outlined/flat.
+ * Viền mỏng, ít shadow; dùng khi VITE_VIUI_THEME=minimalist-2 hoặc không set (mặc định).
+ */
+
+import type { VuetifyOptions } from 'vuetify'
+
+export const minimalist2ThemeDefaults: NonNullable<VuetifyOptions['defaults']> = {
+  VBtn: {
+    variant: 'outlined',
+  },
+  VCard: {
+    variant: 'flat',
+  },
+}

package/dist/assets/plugins/viui-conf/defaults/by-theme/neo-brutalism.ts

@@ -0,0 +1,15 @@
+/**
+ * Theme Neo-Brutalism — default variants: elevated.
+ * Nổi, đậm, shadow; dùng khi VITE_VIUI_THEME=neo-brutalism.
+ */
+
+import type { VuetifyOptions } from 'vuetify'
+
+export const neoBrutalismThemeDefaults: NonNullable<VuetifyOptions['defaults']> = {
+  VBtn: {
+    variant: 'elevated',
+  },
+  VCard: {
+    variant: 'elevated',
+  },
+}

package/dist/assets/plugins/viui-conf/defaults/cards.ts

@@ -0,0 +1,12 @@
+/**
+ * iNET Design System — Vuetify defaults cho Cards (VCard, VCardText, VCardActions).
+ */
+
+import type { VuetifyOptions } from 'vuetify'
+
+export const cardDefaults: NonNullable<VuetifyOptions['defaults']> = {
+  VCard: {
+    elevation: 1,
+    rounded: 'lg',
+  },
+}

package/dist/assets/plugins/viui-conf/defaults/chips.ts

@@ -0,0 +1,15 @@
+/**
+ * iNET Design System — Vuetify defaults cho VChip (ViChip).
+ * Variant, size, color semantic từ tokens (status, tag, pill).
+ */
+
+import type { VuetifyOptions } from 'vuetify'
+
+export const chipDefaults: NonNullable<VuetifyOptions['defaults']> = {
+  VChip: {
+    variant: 'flat',
+    size: 'default',
+    rounded: 'pill',
+    color: 'default',
+  },
+}