VividKit Crystal clear AI coding
EN
Chọn Thiết Lập Bắt Đầu với AgentKit Tiếp Tục với ClaudeKit Chuyển từ ClaudeKit sang AgentKit Gỡ hẳn ClaudeKit AgentKit Là Gì? AgentKit Hoạt Động Như Thế Nào? Kit, Skill, Agent & Hook AgentKit Hỗ Trợ Runtime AgentKit Ứng Dụng AgentKit Desktop Cấu Hình AgentKit Tra Cứu CLI ak Cheatsheet skill AgentKit Workflows AgentKit Statusline AgentKit Cập Nhật CLI ak & Kits AgentKit Helper Cài lại clean AgentKit Xử Lý Sự Cố AgentKit Giới Thiệu ClaudeKit Hướng Dẫn ClaudeKit CLI Tìm Lệnh Phù Hợp Bảng Lệnh Nhanh Quy Trình Mẫu Tham Chiếu CLI Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Tool coding khác Cách ClaudeKit Hoạt Động Inside ClaudeKit Tìm Unknowns Của Bạn Khôi Phục Session Sửa Lỗi Từ Log Thiết Kế UI/UX Chuyển Đổi Tài Khoản Cấu Hình IDE Remote Control Codex App Sơ đồ hệ thống UI Review Gate Khuyến Mãi Ủng Hộ VividKit

Tóm tắt nhanh / Lệnh

Bộ Marketing

/ak:preview

Trình xem visual đa năng

Trình xem và tạo visual đa năng cho file, sơ đồ, slide deck, giải thích HTML, visual diff, plan review và recap dự án.

01

Chọn thao tác

02

Resolve flag

03

Xem hoặc tạo

04

Nạp reference

Nguyên tắc 01

Có hai dạng input chính: file path để xem, hoặc generation flag kèm topic để tạo visual mới.

Nguyên tắc 02

--html kết hợp với explain, diagram, slides, diff, plan-review và recap, nhưng không kết hợp với ASCII chỉ dành cho terminal.

Nguyên tắc 03

Output HTML là file độc lập với CSS và JS inline, không cần server.

Nguyên tắc 04

Các review mode phải lấy context thật từ diff, plan, git và codebase trước khi kết luận.

Bản đồ thực thi

Các nhánh chính từ đầu vào đến kết quả, bám theo cách command chạy khi dùng thật.

01

Khởi động

Đầu vào, phạm vi, route

  1. 1 Chọn thao tác Nếu không có argument, hỏi người dùng chọn view, explain, slides, diagram, ascii, diff, plan-review, recap hoặc stop.
  2. 2 Resolve flag Áp dụng thứ tự: --stop, --html, generation flag, flag HTML-only, visual routing rồi resolve path.
02

Xử lý

Agent / skill thực thi

  1. 3 Xem hoặc tạo Path tồn tại vào view mode; topic kèm generation flag tạo giải thích, deck, diagram hoặc output ASCII mới.
  2. 4 Nạp reference Với output HTML, nạp reference thiết kế, CSS, thư viện, slide và responsive-nav bắt buộc theo mode.
03

Kiểm chứng

Gate, review, xác thực

  1. 5 Render visual Tạo Markdown, Mermaid, ASCII hoặc HTML độc lập với engine diagram và editorial visual phù hợp.
  2. 6 Kiểm tra UX Trang HTML phải có nút chuyển light/dark; cú pháp Mermaid nên dùng skill mermaidjs-v11.
04

Đóng

Báo cáo, bàn giao, artifact

  1. 7 Mở output Lưu vào thư mục visuals của plan active hoặc fallback, rồi mở kết quả trực tiếp khi phù hợp.

Cú pháp, đối số, subcommand

Cách gọi skill: cú pháp, đối số vị trí, option dùng chung, rồi từng subcommand với cú pháp và kết quả riêng.

Cú pháp

/ak:preview [path]

hoặc

/ak:preview [--html] --explain|--slides|--diagram|--ascii <topic>

hoặc

/ak:preview --html --diff|--plan-review|--recap [ref|plan-file|timeframe] [--no-antv|--no-diagram-design|--no-editorial-visuals]

hoặc

/ak:preview --stop

Đối số

[path]

Đường dẫn có sẵn

Tệp hoặc thư mục cần mở trong Markdown viewer. Path phải phân giải được trên đĩa; text không resolve được không được xem là topic trừ khi có flag tạo mới.

/ak:preview plans/checkout/plan.md
<topic> Bắt buộc

Chủ đề visual

Chủ đề không rỗng để tạo giải thích, slide, sơ đồ hoặc ASCII. Khi có nhiều flag tạo mới, flag đầu chọn mode và phần còn lại nhập vào topic này.

/ak:preview --diagram webhook lifecycle
[ref]

Mốc diff

Branch, commit, range, HEAD, pull request hoặc mặc định so với main cho --diff. PR ref cần gh.

/ak:preview --html --diff main
[plan-file]

Tệp plan

Path plan tùy chọn cho --plan-review. Nếu bỏ trống, Skill dùng ngữ cảnh plan active khi có.

/ak:preview --html --plan-review plans/checkout/plan.md
[timeframe]

Khoảng recap

Khoảng lịch sử gần đây tùy chọn cho --recap, ví dụ 30d hoặc 3m. Mặc định là hai tuần.

/ak:preview --html --recap 30d

Option dùng chung

--stop

Dừng viewer

Dừng ngay Markdown viewer server đang chạy. Không tạo hoặc mở tệp.

/ak:preview --stop
--explain

Mode giải thích

Tạo giải thích trực quan với prose, ASCII, Mermaid và code tùy chọn quanh topic bắt buộc.

/ak:preview --explain auth middleware chain
--slides

Mode slide

Tạo artifact dạng presentation khi người dùng muốn slide rõ ràng.

/ak:preview --slides deployment pipeline
--diagram

Mode sơ đồ

Tạo sơ đồ tập trung và xem bản render, không chỉ kiểm tra cú pháp Mermaid.

/ak:preview --html --diagram checkout architecture
--ascii

Mode ASCII

Tạo sơ đồ ASCII dễ đọc trong terminal. Không hỗ trợ cùng --html.

/ak:preview --ascii folder structure
--diff

Mode review diff

Tạo review visual HTML cho branch, commit, range, HEAD, PR hoặc mặc định so với main.

/ak:preview --html --diff main
--plan-review

Mode review plan

Tạo HTML so sánh plan với codebase hiện tại; cần path plan hoặc ngữ cảnh plan active.

/ak:preview --html --plan-review plans/checkout/plan.md
--recap

Mode recap

Tạo HTML snapshot ngữ cảnh project gần đây từ định danh project, lịch sử Git, status, quyết định và kiến trúc.

/ak:preview --html --recap 2w
--no-antv

Tắt AntV

Tắt visual thay thế bằng AntV cho lần chạy này nhưng vẫn cho phép fallback khác.

/ak:preview --html --diff main --no-antv
--no-diagram-design

Tắt diagram-design

Tắt visual SVG thay thế từ diagram-design cho lần chạy này, vẫn giữ fallback Mermaid hoặc bảng.

/ak:preview --html --diagram auth --no-diagram-design
--no-editorial-visuals

Tắt editorial visuals

Tắt toàn bộ lớp visual editorial bổ sung cho lần chạy này.

/ak:preview --html --recap 30d --no-editorial-visuals

Flag xuất bản / artifact

Chỉ các flag đổi artifact hoặc publish. Không phải toàn bộ option của skill.

--html

HTML độc lập

Chuyển output tạo mới sang một file HTML inline, mở trực tiếp trong browser.

Ví dụ

/ak:preview --html --diagram "Landing page funnel"

Mode / route nên dùng

[path]

Xem một file hoặc duyệt thư mục.

Nghiên cứu:
Path
Review:
Unresolved reference
Xác thực:
Viewer opens
--explain

Tạo giải thích trực quan với prose, ASCII và Mermaid.

Nghiên cứu:
Topic
Review:
Empty topic
Xác thực:
Rendered explanation
--slides

Tạo slide thuyết trình, mỗi slide một concept.

Nghiên cứu:
Topic
Review:
Weak deck purpose
Xác thực:
Deck opens
--diagram

Tạo sơ đồ kiến trúc hoặc concept tập trung.

Nghiên cứu:
Topic
Review:
Invalid Mermaid
Xác thực:
Diagram renders
--ascii

Tạo sơ đồ ASCII thân thiện terminal.

Nghiên cứu:
Topic
Review:
--html conflict
Xác thực:
Readable terminal output
--diff [ref]

Tạo visual diff review; HTML được tự bật.

Nghiên cứu:
Git diff
Review:
No git repo
Xác thực:
Diff page
--plan-review [plan-file]

So sánh plan file với codebase thực tế; HTML được tự bật.

Nghiên cứu:
Plan + files
Review:
Missing plan
Xác thực:
Comparison page
--recap [timeframe]

Tạo snapshot context dự án theo khoảng thời gian; HTML được tự bật.

Nghiên cứu:
Git history
Review:
No history
Xác thực:
Recap page
--stop

Dừng preview server rồi thoát.

Nghiên cứu:
Server state
Xác thực:
Stopped

Prompt mẫu

Ví dụ gọi command theo từng flag, subcommand, mode hoặc route dùng được trong workflow thực tế.

Xem file Khuyến nghị 
/ak:preview assets/reports/seo/launch-audit.md
Dùng khi:
Khi muốn xem Markdown hoặc file output đã có.
Kết quả:
File đã yêu cầu mở trong trình preview để người dùng xem ngay kết quả render.
Giải thích 
/ak:preview --explain Cách phễu giới thiệu của chúng ta hoạt động
Dùng khi:
Khi cần giải thích trực quan một concept hoặc hệ thống.
Kết quả:
Giải thích Markdown có cấu trúc visual để người đọc theo dõi phần, quan hệ và quyết định.
Slide HTML 
/ak:preview --html --slides Câu chuyện ra mắt dành cho nhà đầu tư
Dùng khi:
Khi cần slide deck mở được ngay trên browser.
Kết quả:
Slide deck HTML độc lập được tạo với các phần dễ đọc, điều hướng và asset portable.
Review plan 
/ak:preview --plan-review plans/launch-plan.md
Dùng khi:
Khi muốn so sánh plan với file hiện tại.
Kết quả:
Trang HTML so sánh plan với codebase nêu rõ điểm khớp, khoảng trống và thay đổi tiếp theo.
Dừng server 
/ak:preview --stop
Dùng khi:
Khi cần dừng preview server đang chạy.
Kết quả:
Preview server được dừng sạch để không còn tiến trình viewer nền sau khi kiểm tra.
Sơ đồ 
/ak:preview --diagram các giai đoạn phễu giới thiệu
Dùng khi:
Khi cần sơ đồ tập trung thay vì mở file có sẵn.
Kết quả:
Sinh artifact sơ đồ cho topic và báo path output mà không viết lại file nguồn.
Sơ đồ ASCII 
/ak:preview --ascii các giai đoạn phễu giới thiệu
Dùng khi:
Khi sơ đồ phải đọc được trong terminal, không cần HTML.
Kết quả:
Ghi sơ đồ ASCII đọc được trên terminal cho topic và bỏ đường preview HTML.
Review diff 
/ak:preview --diff main
Dùng khi:
Khi thay đổi git hiện tại cần review trực quan trước bàn giao.
Kết quả:
Xác định diff so với main và tạo artifact review gồm file đổi và context quyết định.
Recap phiên 
/ak:preview --recap 7d
Dùng khi:
Khi cần recap trực quan công việc gần đây theo khung thời gian.
Kết quả:
Thu thập khung thời gian đã yêu cầu, sinh visual recap và báo path artifact.

Phạm vi xử lý

  • Chọn thao tác
  • Resolve flag
  • Xem hoặc tạo
  • Nạp reference
  • Render visual
  • Kiểm tra UX

Tiếp theo