Ctrl K

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.

Chọn thao tác

Resolve flag

Xem hoặc tạo

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.

Khởi động

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

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 Resolve flag Áp dụng thứ tự: --stop, --html, generation flag, flag HTML-only, visual routing rồi resolve path.

Xử lý

Agent / skill thực thi

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.
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.

Kiểm chứng

Gate, review, xác thực

5 Render visual Tạo Markdown, Mermaid, ASCII hoặc HTML độc lập với engine diagram và editorial visual phù hợp.
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.

Đóng

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

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.

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"

--no-editorial-visuals

Tắt engine editorial

Tắt cả hai engine editorial visual bổ sung cho HTML và dùng renderer fallback.

Ví dụ

/ak:preview --html --diagram "Launch flow" --no-editorial-visuals

--no-antv

Tắt AntV Infographic

Chỉ tắt lớp AntV Infographic trong khi vẫn cho phép engine visual phù hợp khác.

Ví dụ

/ak:preview --html --recap "last week" --no-antv

--no-diagram-design

Tắt diagram-design

Chỉ tắt lớp diagram-design và fallback sang Mermaid hoặc Chart.js khi phù hợp.

Ví dụ

/ak:preview --html --diagram "System map" --no-diagram-design

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

Bản đồ thực thi

Flag xuất bản / artifact

Mode / route nên dùng

Prompt mẫu

Phạm vi xử lý

Tiếp theo