Tools
lookup_token
Tra cứu design token theo đường dẫn (VD: "colors.primary.light", "colors.accent.light")
validate_token
Kiểm tra giá trị token hợp lệ — color, dimension, duration, fontWeight, number
suggest_token
Từ hex color hoặc dimension → tìm design token gần nhất kèm WCAG ratio
search_tokens
Tìm kiếm fuzzy trong toàn bộ design tokens, lọc theo loại
generate_color_vars
Sinh tất cả CSS vars --viui-color-* từ design tokens, hỗ trợ css/scss/ts/json với light/dark tự động
get_component_api
Xem API đầy đủ của Vi* component — props, slots, emits, defaults. Tool được dùng nhiều nhất.
get_component_usage
Xem ví dụ sử dụng Storybook cho bất kỳ Vi* component nào
scaffold_component
Tạo template Vue 3 SFC + Storybook story cho component mới
review_design_tokens
Quét file CSS/SCSS/JSX/TSX để phát hiện giá trị cứng nên thay bằng design token. Từ xa: gửi `sources`; chạy local qua stdio: dùng `project_root`
search_blocks
Tìm UI blocks theo keyword hoặc category
get_block
Lấy source code đầy đủ của một UI block theo slug
list_blocks
Liệt kê tất cả block có sẵn, có thể lọc theo danh mục
list_themes
Liệt kê tất cả themes có sẵn
compare_themes
So sánh CSS variables giữa 2 themes
get_landing_page_defaults
Lấy nội dung mẫu đầy đủ của một mẫu trang giới thiệu, để sửa từng phần
list_capabilities
Liệt kê tất cả tools và prompts có sẵn trong ViUI MCP server
list_icons
Tìm kiếm icon trong bộ viui-icons (nguồn DUY NHẤT: outline + duotone, ~1338). Không còn tabler/mdi.
list_docs
Liệt kê hoặc đọc tài liệu hệ thống
get_accessibility_guide
Hướng dẫn WCAG 2.1 AA: overview, checklist, design-rationale, ui-kit
get_brand_rules
Lấy quy tắc Brand DNA iNET theo nhóm: color, motion, iconography, dataViz, illustration, hoặc all
validate_brand_usage
Quét CSS/SCSS/Vue code để phát hiện vi phạm Brand DNA: semantic color sai context, hardcoded motion, icon contrast thấp
list_dna_buttons
Liệt kê 16 DNA button concepts — Group A (iNET Brand #024799+#cc0e0e) và Group B (One Series #49c98d+#f7ad30) kèm SVG thumbnail preview
list_footer_layouts
Hai mẫu footer để người dùng chọn: theo bộ thiết kế chung, hoặc theo trang giới thiệu iNET
list_landing_templates
Liệt kê các mẫu trang giới thiệu có sẵn để chọn
list_landing_headers
Liệt kê nội dung phần đầu trang do Marketing cấu hình
list_landing_footers
Liệt kê nội dung phần chân trang do Marketing cấu hình
rate_response
Chấm điểm hài lòng/không hài lòng cho một tool vừa sử dụng
dismiss_whats_new
Ẩn footer thông báo "Mới" cho phiên làm việc hiện tại
submit_feedback
Gửi góp ý / báo lỗi / đề xuất tính năng dạng văn bản tự do tới team ViUI
Prompts
create-component
Hướng dẫn tạo component Vi* mới theo chuẩn design system
migrate-to-viui
Hướng dẫn chuyển code từ Vuetify sang Vi* design system
accessibility-check
Tạo checklist kiểm tra WCAG AA cho component
generate-block
Hướng dẫn AI tạo block UI mới theo chuẩn ViUI design system
generate-page
Hướng dẫn AI tổ hợp trang hoàn chỉnh từ các block có sẵn
customize-block
Hướng dẫn AI chỉnh sửa block có sẵn theo yêu cầu mới
design-system-qa
Trả lời câu hỏi về design system ViUI: components, tokens, blocks, themes, conventions
viui
Hub dispatcher: hỏi muốn làm gì, AI route đến tool/resource phù hợp
getting-started
Hướng dẫn kết nối và sử dụng ViUI MCP server
choose-button
Chọn DNA button concept phù hợp từ 16 hướng thiết kế — iNET Brand (A) và One Series (B)
generate-landing-page
Hướng dẫn AI tạo landing page marketing hoàn chỉnh từ mẫu (template) có sẵn qua tool generate_landing_page
Resources
Brand primary/accent, màu trạng thái, backgrounds, borders, text colors. Hệ thống khoảng cách lưới 8pt. Font, cỡ chữ, độ đậm, chiều cao dòng. Giá trị đổ bóng (box-shadow). Thời lượng, easing, hiệu ứng chuyển tiếp. Toàn bộ design token gộp chung
Primary #024799 + Accent #cc0e0e cùng scale và hướng dẫn sử dụng. Màu sắc từng dòng sản phẩm iNET: One* (OneMail, OnePanel,...) — green #49c98d, orange #f7ad30, dark backgrounds
30+ Vi* component APIs — ViButton, ViInput, ViDialog, ViDataTable, ViCard...
Danh sách, lọc theo category, và source code đầy đủ của UI blocks. Block trong một danh mục cụ thể. Metadata và mã nguồn đầy đủ của một block
Danh sách tất cả themes có sẵn trong hệ thống
Bộ icon viui-icons (nguồn DUY NHẤT): outline + duotone, nhóm theo services/product/ui/data/lucide. Tìm bằng list_icons, lấy SVG raw qua get_icon_svg. (Tabler/MDI đã gỡ.)
Tài liệu hệ thống và danh sách Storybook stories. Metadata và cấu trúc story. Cập nhật mới nhất của iNET Design System
Quy tắc code ViUI — đặt tên, cấu trúc, patterns
Nguyên tắc WCAG 2.1 AA và bảng tỷ lệ tương phản màu cho i-design-system. Danh mục kiểm tra WCAG 2.1 AA: tương phản màu, bàn phím, focus visible, ARIA. Lý do chọn nl-600 cho biểu tượng, opacity:0/1 pattern, focus ring style. Mẫu thành phần Vi* chuẩn tiếp cận: ViButton, ViInput, ViDialog, ViDataTable. CSS custom properties và giá trị thiết kế của admin dashboard: màu sắc, kiểu chữ, khoảng cách