@hobui/viui-cli 0.0.6 → 0.0.7

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

@@ -1,75 +0,0 @@
----
-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

@@ -1,40 +0,0 @@
----
-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

@@ -1,38 +0,0 @@
----
-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

@@ -1,60 +0,0 @@
----
-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

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

package/dist/assets/viui-themes/bento-grid-global.scss

@@ -1,5 +0,0 @@
-/**
- * @viui/themes — Bento Grid (global alias).
- * Same content as bento-grid.scss; physical file so Vite/consumers resolve without package exports.
- */
-@forward './bento-grid';

package/dist/assets/viui-themes/glassmorphism-global.scss

@@ -1,5 +0,0 @@
-/**
- * @viui/themes — Glassmorphism (global alias).
- * Same content as glassmorphism.scss; physical file so Vite/consumers resolve without package exports.
- */
-@forward './glassmorphism';

package/dist/assets/viui-themes/material-global.scss

@@ -1,5 +0,0 @@
-/**
- * @viui/themes — Material (global alias).
- * Same content as material.scss; physical file so Vite/consumers resolve without package exports.
- */
-@forward './material';

package/dist/assets/viui-themes/minimalist-2-global.scss

@@ -1,5 +0,0 @@
-/**
- * @viui/themes — Minimalist 2.0 (global alias).
- * Same content as minimalist-2.scss; physical file so Vite/consumers resolve without package exports.
- */
-@forward './minimalist-2';

package/dist/assets/viui-themes/minimalist-global.scss

@@ -1,5 +0,0 @@
-/**
- * @viui/themes — Minimalist (global alias).
- * Same content as minimalist.scss; physical file so Vite/consumers resolve without package exports.
- */
-@forward './minimalist';

package/dist/assets/viui-themes/neo-brutalism-global.scss

@@ -1,5 +0,0 @@
-/**
- * @viui/themes — Neo-Brutalism (global alias).
- * Same content as neo-brutalism.scss; physical file so Vite/consumers resolve without package exports.
- */
-@forward './neo-brutalism';