ckm:slides

Tổng quan

ckm:slides là gì?

ckm:slides là một kỹ năng AI để thiết kế trọn bộ slide HTML mang tính chiến lược. Thay vì chỉ xuất ra vài gạch đầu dòng rời rạc, nó hướng dẫn agent tạo ra một cấu trúc trình chiếu mạch lạc, sẵn sàng chạy trên trình duyệt, sử dụng:

• Chart.js cho biểu đồ và trực quan hóa dữ liệu
• Design tokens cho chủ đề hình ảnh nhất quán
• Responsive layouts để hiển thị tốt trên nhiều thiết bị
• Công thức copywriting để nội dung thuyết phục hơn
• Các chiến lược slide đã được kiểm chứng cho những loại deck phổ biến

Kỹ năng này được tối ưu để tạo các bản trình bày marketing, pitch deck, báo cáo cho stakeholders và demo sản phẩm, nơi cả câu chuyện lẫn cấu trúc đều quan trọng.

ckm:slides phù hợp với ai?

ckm:slides phù hợp nếu bạn:

• Thường xuyên xây dựng slide cho marketing, sales, gọi vốn hoặc báo cáo
• Thích trình bày dưới dạng HTML/JavaScript hơn là file PowerPoint truyền thống
• Muốn có các mẫu bố cục và template có thể tái sử dụng thay vì bắt đầu từ một slide trắng
• Cần các cấu trúc kể chuyện rõ ràng (ví dụ: YC seed deck, sales pitch, QBR) được tích hợp sẵn vào quy trình

Developers, product marketer, founder và các nhóm analytics đều có thể dùng kỹ năng này để đi từ “chủ đề + số lượng slide mong muốn” đến một kế hoạch trình chiếu HTML có cấu trúc.

ckm:slides giải quyết những vấn đề gì?

ckm:slides giúp bạn tránh:

• Deck rời rạc, không có đường dây câu chuyện rõ ràng
• Bố cục và kiểu chữ thiếu nhất quán giữa các slide
• Nội dung slide chung chung, không đủ sức thuyết phục
• Phải tự tay tích hợp Chart.js cho từng bản trình bày mới

Bằng cách kết hợp mẫu bố cục, công thức copywriting và một template HTML sẵn sàng sử dụng, kỹ năng này cung cấp cho agent mọi thứ cần thiết để lập kế hoạch deck mạnh và sinh ra HTML có thể triển khai ngay.

Khi nào ckm:slides không phù hợp?

ckm:slides có thể không lý tưởng nếu bạn:

• Cần file PowerPoint hoặc Keynote gốc thay vì HTML
• Không làm việc với front‑end hoặc không thể host các tài nguyên HTML/JS
• Chỉ cần một slide đơn lẻ, không phải cả một deck

Trong các trường hợp đó, một công cụ tạo slide dạng text đơn giản hơn hoặc một công cụ xuất .pptx có thể phù hợp hơn.

Cách sử dụng

Cài đặt và thiết lập

Để thêm kỹ năng slides từ repository nextlevelbuilder/ui-ux-pro-max-skill vào môi trường agent của bạn, hãy cài đặt bằng lệnh:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill slides

Sau khi cài đặt:

1. Mở SKILL.md trong thư mục .claude/skills/slides để hiểu hành vi và tham số ở mức tổng quan.
2. Xem thư mục references/ để nắm các mẫu và template mà kỹ năng sử dụng:
   • references/layout-patterns.md
   • references/html-template.md
   • references/copywriting-formulas.md
   • references/slide-strategies.md
   • references/create.md

Không cần bước build bổ sung cho bản thân kỹ năng; nó chạy như một phần của môi trường agent hiện có. Tuy nhiên, bạn sẽ cần cách để phục vụ hoặc mở file HTML đã sinh (ví dụ: lưu ra file và mở bằng trình duyệt).

Mẫu gọi cơ bản

Kỹ năng mong đợi tham số ở dạng:

• [topic] [slide-count]

và hỗ trợ subcommand create. Một lệnh gọi điển hình từ prompt của agent có thể như:

Use the ckm:slides skill to create a "create" deck about "Series A fundraising narrative" with 12 slides.

Bên trong, việc định tuyến diễn ra theo luồng (được mô tả trong SKILL.md):

1. Phân tích subcommand từ $ARGUMENTS (từ đầu tiên, ví dụ create).
2. Tải file reference tương ứng (với create là references/create.md).
3. Dùng các tham số còn lại (chủ đề và số slide) để sinh cấu trúc và nội dung deck.

Quy trình khuyến nghị khi tạo deck mới

1. Xác định mục tiêu và đối tượng

Trước khi gọi ckm:slides, hãy làm rõ:

• Mục tiêu (vd: gọi vốn seed, chốt hợp đồng enterprise, cập nhật cho hội đồng quản trị)
• Đối tượng chính (VCs, khách hàng tiềm năng, ban lãnh đạo, team nội bộ, người dự hội nghị)
• Số slide dự kiến

Hãy truyền bối cảnh này trong tham số để kỹ năng có thể chọn đúng cấu trúc và mẫu.

2. Chọn hoặc để kỹ năng chọn chiến lược slide

File references/slide-strategies.md liệt kê 15 cấu trúc deck phổ biến như:

• YC Seed Deck (10–12 slide)
• Sales Pitch (7–10 slide)
• Product Demo (5–8 slide)
• QBR, Board Meeting, Webinar, Workshop, và nhiều hơn nữa

Bạn có thể:

• Yêu cầu rõ cấu trúc (vd: “Use a YC seed deck structure”), hoặc
• Để agent suy luận cấu trúc phù hợp dựa trên mục tiêu và khán giả.

Mỗi chiến lược bao gồm dàn ý từng slide và “đường cong cảm xúc” (vd: curiosity → frustration → hope → confidence → trust → urgency) để câu chuyện liền mạch.

3. Tạo nội dung bằng các công thức thuyết phục

File references/copywriting-formulas.md cung cấp 25 công thức, gồm:

• PAS (Problem–Agitate–Solution) cho các slide nêu vấn đề
• AIDA (Attention–Interest–Desire–Action) cho phần mở đầu và CTA
• FAB (Features–Advantages–Benefits) cho slide tính năng và sản phẩm
• Cost of Inaction và Before–After–Bridge để nhấn mạnh tính cấp bách và sự chuyển đổi

Kỹ năng dùng các công thức này để cấu trúc headline, nội dung chính và CTA cho từng slide. Hãy hướng dẫn nó:

• Mapping loại slide với công thức phù hợp
• Dùng ngôn ngữ mẫu trong template làm điểm xuất phát
• Điều chỉnh tone cho phù hợp thương hiệu và mức độ hiểu biết của đối tượng

4. Áp dụng layout patterns và animation

File references/layout-patterns.md định nghĩa 25 layout pattern dựa trên CSS như:

• Title Slide
• Problem Statement
• Solution Overview
• Feature Grid
• Metrics Dashboard
• Comparison Table
• Timeline Flow
• Team Grid
• Pricing Cards
• CTA Closing

Mỗi bố cục gồm:

• Trường hợp sử dụng được khuyến nghị
• Ví dụ animation class (animate-fade-up, animate-stagger, animate-scale, v.v.)
• Ví dụ cấu trúc CSS cho các kiểu slide thường gặp

Khi yêu cầu agent tạo deck, hãy thêm hướng dẫn như:

For each slide, assign a layout class from layout-patterns.md and, where relevant, an animation class.

Việc này giúp deck của bạn nhất quán về mặt hình ảnh và dễ theming bằng CSS.

5. Sử dụng HTML slide template

File references/html-template.md cung cấp cấu trúc HTML hoàn chỉnh cho deck, bao gồm:

• <head> với Chart.js được nhúng qua CDN
• Hệ thống theming dựa trên token dùng biến CSS trong :root
• Container .slide-deck và các phần tử .slide với tỷ lệ 16:9
• Style cơ bản cho typography và layout

Quy trình điển hình:

1. Bắt đầu từ HTML template được cung cấp.
2. Chèn các slide được sinh ra dưới dạng phần tử <section> hoặc <div> với class phù hợp.
3. Dán design tokens của bạn (vd: từ embed-tokens.cjs) vào block :root.
4. Thêm các phần tử <canvas> Chart.js và JavaScript tương ứng cho biểu đồ.

Kỹ năng có thể xuất ra:

• Bản nháp file HTML đầy đủ, hoặc
• Chỉ cấu trúc slide trong phần <body> để bạn dán vào shell template riêng.

6. Kết nối biểu đồ dữ liệu với Chart.js

Với các deck dựa trên dữ liệu (metrics dashboard, slide traction, QBR, báo cáo hội đồng), ckm:slides được thiết kế để làm việc với Chart.js (như trong html-template.md).

Bạn có thể hướng dẫn agent:

• Tạo phần tử <canvas> cho biểu đồ trong các layout slide phù hợp
• Gợi ý các Chart.js config object (datasets, labels, colors) dựa trên số liệu của bạn
• Nhúng các block <script> khởi tạo biểu đồ khi trang load

Bạn chịu trách nhiệm cung cấp dữ liệu thực tế và kiểm tra cấu hình biểu đồ, còn kỹ năng cung cấp khung cấu trúc.

7. Export và trình chiếu

Khi HTML của deck đã sẵn sàng:

1. Lưu thành file .html trong project của bạn.
2. Mở trực tiếp bằng trình duyệt, hoặc phục vụ qua web server bạn dùng.
3. Dùng phím tắt hoặc JS tuỳ chỉnh (nếu bạn thêm) để chuyển giữa các slide.

Nếu cần chia sẻ với những người quen dùng PowerPoint, bạn có thể share màn hình trình duyệt hoặc xuất slide thành ảnh/PDF qua chức năng in ra PDF của trình duyệt.

Mẹo để có kết quả tốt hơn với ckm:slides

• Khi có thể, hãy nêu rõ số lượng slide và cấu trúc mong muốn.
• Cho agent biết quyết định chính mà deck cần thúc đẩy (gọi vốn, mua hàng, thống nhất nội bộ, v.v.).
• Chỉ rõ slide nào nên có biểu đồ và loại biểu đồ (line, bar, pie, v.v.).
• Yêu cầu một bảng liệt kê số slide, tiêu đề, mục tiêu, layout và công thức copywriting chính để bạn duyệt kế hoạch trước khi sinh nội dung đầy đủ.

Câu hỏi thường gặp (FAQ)

ckm:slides chính xác tạo ra những gì?

ckm:slides được thiết kế để tạo:

• Dàn ý từng slide kèm mục tiêu và đường dây câu chuyện
• Bản nháp nội dung cho mỗi slide, dùng các công thức như PAS, AIDA và FAB
• Gợi ý bố cục dựa trên các pattern đã định nghĩa trong layout-patterns.md
• Cấu trúc HTML/CSS cho bộ slide responsive, dùng token để theming
• Khung tích hợp Chart.js cho các slide hiển thị dữ liệu

Kết quả cụ thể phụ thuộc vào cách bạn prompt agent, nhưng trọng tâm luôn là nội dung slide HTML mang tính chiến lược, không chỉ là tài liệu text chung chung.

ckm:slides có tạo file PowerPoint (.pptx) không?

Không. ckm:slides tập trung vào các bộ slide HTML. Nó sử dụng HTML, CSS và Chart.js để tạo bản trình bày có thể mở bằng trình duyệt. Nếu bạn cần file .pptx, bạn sẽ phải dùng bước export hoặc chuyển đổi bên ngoài kỹ năng này.

Tôi có thể tuỳ biến thiết kế cho giống thương hiệu của mình không?

Có. File html-template.md dùng design tokens thông qua biến CSS. Bạn có thể:

• Thay các giá trị token mẫu trong :root bằng màu sắc, typography và spacing của thương hiệu
• Mở rộng các class CSS để có layout hoặc animation riêng
• Thêm component của bạn (logo, footer, watermark, v.v.)

ckm:slides cung cấp một điểm khởi đầu có cấu trúc; bạn mang hệ thống nhận diện thương hiệu vào.

Subcommand create hoạt động như thế nào?

Subcommand create là điểm vào chính được mô tả trong references/create.md. Khi bạn gọi create với tham số, kỹ năng sẽ:

1. Xem <task>$ARGUMENTS</task> như mô tả về deck bạn muốn tạo.
2. Dùng knowledge base (layout patterns, copywriting formulas, slide strategies, HTML template) để thiết kế một deck thuyết phục phù hợp với task đó.

Thường bạn không gọi create trực tiếp như một CLI; thay vào đó, bạn hướng dẫn agent dùng kỹ năng ckm:slides với subcommand create.

ckm:slides mạnh nhất với những loại deck nào?

Dựa trên các pattern trong slide-strategies.md, ckm:slides đặc biệt hữu ích cho:

• Deck gọi vốn (YC Seed Deck, Series A)
• Sales pitch và product demo
• Quarterly business review (QBR) và báo cáo cho hội đồng quản trị
• Webinar, workshop và bài nói tại hội nghị
• Case study và bản trình bày phân tích cạnh tranh

Tất cả các loại này đều cần câu chuyện rõ ràng, nội dung thuyết phục và thường có biểu đồ—đúng với những gì knowledge base của kỹ năng được tối ưu.

Tôi xử lý điều hướng và phím tắt như thế nào?

HTML template cơ bản tập trung vào bố cục và hình ảnh. Phần điều hướng (phím mũi tên, click để chuyển slide, thanh tiến trình) chưa được định nghĩa đầy đủ trong snippet tham chiếu và được để cho bạn tự triển khai. Bạn có thể:

• Thêm JavaScript lắng nghe phím ArrowLeft / ArrowRight và thay đổi slide đang hiển thị
• Dùng URL hash hoặc data attribute để theo dõi slide đang active
• Tích hợp với một framework trình chiếu HTML sẵn có nếu bạn muốn

ckm:slides giúp bạn thiết kế nội dung và cấu trúc; hành vi điều hướng phụ thuộc vào setup front‑end của bạn.

Tôi có cần hiểu JavaScript để dùng ckm:slides không?

Hiểu biết cơ bản về front‑end sẽ rất hữu ích, đặc biệt nếu bạn:

• Muốn chỉnh sửa hoặc mở rộng HTML template
• Cần cấu hình biểu đồ và tương tác của Chart.js

Tuy vậy, phần việc nặng (cấu trúc câu chuyện, chọn layout, áp dụng pattern copywriting) không mang tính kỹ thuật. Người không phải developer vẫn có thể tận dụng bằng cách phối hợp với developer để hoàn thiện HTML và biểu đồ.

Tôi có thể xem tất cả pattern và chiến lược ở đâu?

Mở thư mục của kỹ năng (thường là .claude/skills/slides) và xem:

• SKILL.md để hiểu hành vi tổng thể, tham số và cách routing
• references/layout-patterns.md cho layout và cấu trúc CSS
• references/html-template.md cho shell deck HTML cơ bản
• references/copywriting-formulas.md cho các khung copywriting thuyết phục
• references/slide-strategies.md cho cấu trúc deck hoàn chỉnh và đường cong cảm xúc

Xem qua các file này sẽ giúp bạn hiểu rõ ckm:slides có thể làm gì và giúp bạn viết prompt chính xác hơn khi tạo deck.